通过网页代码实现查找字符并且替换功能。
侵删转自：博客园
<!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>侵删转自：开源社区孟飞阳
<div id='box'>
<input type="text"id='inpt1'>
<input type="text"id='inpt2'>
<input type="button" value="查找" id='btn1' >
<input type="button" value="替换" id='btn2' >
<p id="text" >
一场人生,谁走进你的生命,是由命运决定,但谁能停留在你的生命中,是由你决定。
有的人,注定是一生陪伴;有的人,注定是成为痕迹这痕迹也分深浅,深的一生不忘,浅
的只是过客所谓的公平,只是强者对弱者的一种怜悯,是弱者自哀自怨的一种可怜。
</p>
</div>
<script>
var t1= document.getElementById('inpt1'),
t2 = document.getElementById('inpt2'),
bnt2 = document.getElementById('bnt2'),
bnt1 = document.getElementById('bnt1'),
txt = document.getElementById('text'),
textHTML = txt.innerHTML;
btn1.onclick = function(){
var val =t1.value;
if(val){
var arr = textHTML.split(val);
txt.innerHTML = arr.join("<span>" + val +"</span>");
}
};
btn2.onclick = function(){
var val1 = t1.value,
val2 = t2.value;
if(val1){
var arr = textHTML.split (val1);
textHTML = arr.join(val2);
txt.innerHTML = arr.join("<span>" + val2 + "</span>");
}
};
</script>
<style>
*{margin:Opx;padding:Opx;)}
a{text-decoration:none;color:#000;}
li{list-style:none;}
#box{width:500px; height:240px; border:1px solid skyblue; margin:60px auto; padding: 10px}
#box span{color: red; font-size: 16px; font-weight: bold;}
#box inputmargin-left: 13px;}
#box #text{line-height: 33px; margin-top: 15px;text-indent:2em;}
#box #aut{text-align: right; display: block; margin-top: 46px;}
</style>