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

效果图：

代码如下，复制即可使用：

  1. <!DOCTYPE html>
    <html>
  2. <head>
  3. 　　<style type="text/css">
  4. 　　　　*{font-family:"微软雅黑";font-size:16px;margin:0;padding:0;letter-spacing:3px;line-height:22px;}
  5. 　　　　#wrap{width:500px;height:300px;margin:20px auto;position:relative;}
  6. 　　　　#text{width:500px;height:300px;border:1px solid green;}
  7. 　　　　#result{width:500px;position:absolute;left:0px;top:0px;display:none;}
  8. 　　　　input{width:100px;height:40px;margin-top:5px;}
  9. 　　　　span{background-color:yellow;}
  10. 　　</style>
  11. </head>
  12. <body>
  13. 　　<div id="wrap">
  14. 　　　　<div id="result"></div>
  15. 　　　　<textarea id="text" placeholder="请在此输入文本。。。。"></textarea>
  16. 　　　　<input type="text" id="val" placeholder="被查找字符"/>——<input type="text" id="new_val" placeholder="替换后字符"/>&nbsp;&nbsp;&nbsp;
  17. 　　　　<input type="button" id="btnFind" value="替换"/>&nbsp;&nbsp;&nbsp;<input type="button" value="重置" id="reset"/>
  18. 　　</div>
  19. 　　<script type="text/javascript">
  20.  
  21. 　　function replace(){
  22.     　　var inner=null;
  23.     　　var txt=document.getElementById('text').value.toString();
  24.    　　 var val=document.getElementById('val').value.toString();
  25.    　　 var newVal=document.getElementById('new_val').value.toString();
  26.     　　newInner="<span>"+newVal+"</span>";
  27.    　　 for(var i=0;i<=txt.length-val.length;i++){
  28.        　　 if(txt==""||val=="") {
  29.           　　  alert("请输入内容！");
  30.            　　 return false;
  31.        　　 }
  32.        　　 if(txt.length<val.length) {
  33.           　　  return false;
  34.        　　 }
  35.         　　if(i+val.length>=txt.length){
  36.            　　 if(txt.substring(i)==val){
  37.               　　  inner=txt.split('');
  38.              　　   inner.splice(i,val.length,newInner);
  39.              　　   txt=inner.join("");
  40.              　　   i=i+newInner.length-1;
  41.            　　 }
  42.  
  43.        　　 }
  44.        　　 else {
  45.             　　if(txt.substring(i,i+val.length)==val) {
  46.                　　 inner=txt.split('');
  47.                　　 inner.splice(i,val.length,newInner);
  48.                　　 txt=inner.join("");
  49.                　　 i=i+newInner.length-1;
  50.            　　 }
  51.         　　}
  52.    　　 }
  53.    　　 document.getElementById("result").innerHTML=txt;
  54.     　　document.getElementById("text").value=null;
  55.    　　 document.getElementById("text").placeholder="";
  56.    　　 document.getElementById("result").style.display="block";
  57. 　　}
  58.  
  59. 　　document.getElementById('btnFind').onclick=function(){
  60.     　　replace();
  61. 　　}
  62. 　　document.getElementById('reset').onclick=function(){
  63.    　　 document.getElementById("result").style.display="none";
  64.     　　document.getElementById("val").value=null;
  65.     　　document.getElementById("new_val").value=null;
  66.    　　 document.getElementById("text").placeholder="请在此输入文本。。。。";
  67.  
  68. 　　}
  69.  
  70. 　　</script>
  71. </div>
  72. </body>
  73. </html>

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

JS实现文本中查找并替换字符的更多相关文章

  1. C# 在word中查找及替换文本

    C# 在word中查找及替换文本 在处理word文档时,很多人都会用到查找和替换功能.尤其是在处理庞大的word文档的时候,Microsoft word的查找替换功能就变得尤为重要,它不仅能让我们轻易 ...

  2. 【python cookbook】【字符串与文本】6.以不区分大小写的方式对文本做查找和替换

    问题:以不区分大小写的方式对文本做查找和替换 解决方法:使用re模块,并对各种操作都添加上re.IGNORECASE标记 text='UPPER PYTHON,lower python,Mixed P ...

  3. Linux中在vim/vi模式下对文本的查找和替换

    查找: 1.vim  filename  进入一般模式下 2.查找和替换方法 /word    向下查找word 的字符串  例如  /chengtingting   向下查找字符chengtingt ...

  4. C# 在excel中查找及替换数据

    在使用Excel处理数据时,有时候工作表内容很多,如果手动地一行一行的找数据很难发现它们在哪个地方.微软Excel给我们提供了一个很强大的数据处理功能-查找和替换,通过这个功能,我们可以快速地找到想要 ...

  5. [LeetCode] Find And Replace in String 在字符串中查找和替换

    To some string S, we will perform some replacement operations that replace groups of letters with ne ...

  6. [转]grep 在文本中查找内容

    转自: http://www.lampweb.org/linux/3/27.html 功能:grep系列是Linux中使用频率最高的文本查找命令.主要功能在一个或者多个文件中查找特定模式的字符串.如果 ...

  7. 使用SQL除掉文本中特殊的ascll字符比如Enter，Tab，空格键

    一.在SQL查询的字段中如果包含tab.enter.空格键,可以使用ascii码进行替换: --替换了文本中含有tab键,Enter键,空格键的ascii码 select REPLACE(REPLAC ...

  8. Sublime 、NotePad++中查找匹配中文字符

    在Sublime .NotePad++中可以使用正则表达式 [\x{4e00}-\x{9fa5}] 查找匹配中文字符.

  9. 在LoadRunner中查找和替换字符串

    参考<Search & Replace function for LoadRunner>: http://ptfrontline.wordpress.com/2009/03/13/ ...

随机推荐

  1. [转帖]SSL/TLS/WTLS原理

    SSL/TLS/WTLS原理 作者:yawl < yawl@nsfocus.com >主页:http://www.nsfocus.com日期:2001-02-19 一 前言 首先要澄清一下 ...

  2. react & monaco editor & vs code

    react & monaco editor & vs code monaco-editor https://microsoft.github.io/monaco-editor/inde ...

  3. clear & file input & reset & file input

    clear & file input & reset & file input Clear <input type="file"> docume ...

  4. php学习目录

    前面的话 前端工程师为什么要学习php?是因为招聘要求吗?这只是一方面 一开始,我对学习php是抵触的,毕竟javascript已经够自己喝一壶的了,再去学习php,可能让自己喝醉.但是,在学习jav ...

  5. JDK8新特性，给接口添加一个默认实现

    在JDK8中,允许给接口本身添加一个默认的实现.用“default”进行修饰.如下实例 package interfacetest; public interface TestInterface { ...

  6. spring data jpa查询部分字段、多余附加字段

    spring data jpa查询部分字段 第一种方法:使用 model 查询时转化 首先建立一个 model ,写上自己想要查询的字段,然后写上构造函数,这步很重要,因为spring jpa 转化时 ...

  7. Linq与Lambda，神一般的工作效率

    Linq与Lambda,神一般的工作效    通过对linq和lambda的学习,越发感觉linq和lambda的重要性,他们能极大地简化程序,同时提升程序的可读性,大大提升了我们的工作效率,在公司的 ...

  8. Hbuild开发App入门

    http://ask.dcloud.net.cn/article/89建议必看网站 http://www.html5plus.org/doc/h5p.html  API下载地址

  9. Python内置模块-日志模块（logging）常见用法

    Python内置模块-日志模块(logging)常见用法 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.初识logging模块 #!/usr/bin/env python #_ ...

  10. 小贾漫谈——Java反射

    一.Class的API 二.测试使用的JavaBean class Admin{ //字段 public String userName; public String pwd; private int ...