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

最新推荐文章于 2023-05-15 13:58:23 发布

前端老码农

最新推荐文章于 2023-05-15 13:58:23 发布

阅读量1k

点赞数

分类专栏：前端文章标签： javascript

原文链接：https://www.mk2048.com/blog/blog.php?id=hh1k12k1jj2j&title=JS%E5%AE%9E%E7%8E%B0%E6%96%87%E6%9C%AC%E4%B8%AD%E6%9F%A5%E6%89%BE%E5%B9%B6%E6%9B%BF%E6%8D%A2%E5%AD%97%E7%AC%A6

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

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>

如有错误，欢迎联系我改正，非常感谢！！！

更多专业前端知识，请上【猿2048】www.mk2048.com

前端老码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JS实现文本中查找并替换字符

JS实现文本中查找并替换字符效果图：代码如下，复制即可使用： <!DOCTYPE html> <html><head>　　<style type="text/css"> 　　　　*{fon...
复制链接

扫一扫