查找替换网页代码

**通过网页代码实现查找字符并且替换功能。**
侵删转自：[博客园](https://www.cnblogs.com/yidaixiaohui/p/8447143.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="替换后字符"/>&nbsp;&nbsp;&nbsp;
　　　　<input type="button" id="btnFind" value="替换"/>&nbsp;&nbsp;&nbsp;<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>
```

侵删转自：[开源社区孟飞阳](https://my.oschina.net/u/2391658/blog/979174)

```
<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>
```

最后修改：2024 年 10 月 07 日

如果觉得我的文章对你有用，请随意赞赏

查找替换网页代码

admin • 2024 年 10 月 07 日