前端开发 JS 文本查找并替换字符
摘要：关于前端开发需要的主要技能 前端和软件开发 前端开发软件前十 html 代码 <!DOCTYPE html> <html> <head> <style type=”text/css”> * { font-famil……
关于前端开发需要的主要技能 前端和软件开发 前端开发软件前十
html 代码
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
* {
font-family: “微软雅黑”;
font-size: 16px;
margin: 0;
padding: 0;
letter-spacing: 3px;
line-height: 22px;
}
#wrap {
width: 500px;
height: 300px;
margin: 20px auto;
position: relative;
}
#text {
width: 500px;
height: 300px;
border: 1px solid green;
}
#result {
width: 500px;
position: absolute;
left: 0px;
top: 0px;
display: none;
}
input {
width: 100px;
height: 40px;
margin-top: 5px;
}
span {
background-color: yellow;
}
</style>
</head>
<body>
<div id=”wrap”>
<div id=”result”></div>
<textarea id=”text” placeholder=”请在此输入文本。。。。”></textarea>
<input type=”text” id=”val” placeholder=”被查找字符” />——<input type=”text” id=”new_val” placeholder=”替换后字符” />
<input type=”button” id=”btnFind” value=”替换” /> <input type=”button” value=”重置” id=”reset” />
</div>
<script type=”text/javascript”>
function replace() {
var inner = null;
var txt = document.getElementById(‘text’).value.toString();
var val = document.getElementById(‘val’).value.toString();
var newVal = document.getElementById(‘new_val’).value.toString();
newInner = “<span>” + newVal + “</span>”;
for (var i = 0; i <= txt.length – val.length; i++) {
if (txt == “” || val == “”) {
alert(“请输入内容！”);
return false;
}
if (txt.length < val.length) {
return false;
}
if (i + val.length >= txt.length) {
if (txt.substring(i) == val) {
inner = txt.split(”);
inner.splice(i, val.length, newInner);
txt = inner.join(“”);
i = i + newInner.length – 1;
}
}
else {
if (txt.substring(i, i + val.length) == val) {
inner = txt.split(”);
inner.splice(i, val.length, newInner);
txt = inner.join(“”);
i = i + newInner.length – 1;
}
}
}
document.getElementById(“result”).innerHTML = txt;
document.getElementById(“text”).value = null;
document.getElementById(“text”).placeholder = “”;
document.getElementById(“result”).style.display = “block”;
}
document.getElementById(‘btnFind’).onclick = function () {
replace();
}
document.getElementById(‘reset’).onclick = function () {
document.getElementById(“result”).style.display = “none”;
document.getElementById(“val”).value = null;
document.getElementById(“new_val”).value = null;
document.getElementById(“text”).placeholder = “请在此输入文本。。。。”;
}
</script>
</div>
</body>
</html>
前端开发人员需要考哪些证书 ios前端开发软件 php前端开发面试题
» 本文来自：前端开发者 » 《前端开发 JS 文本查找并替换字符》
» 本文链接地址：https://www.rokub.com/5375.html
» 您也可以订阅本站：https://www.rokub.com
近期评论