JS实现文本中查找并替换字符

2018-07-25 13:19:37来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

JS实现文本中查找并替换字符

 效果图:

 代码如下,复制即可使用:

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

 如有错误,欢迎联系我改正,非常感谢!!!

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:使用JavaScript / JQuery导出 html table 数据至 Excel 兼容IE/C

下一篇:react-router实现tab页面切换,并解决选中样式首页始终选中问题