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>

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

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. QEMU简单知识 以及磁盘格式转换的简单命令

    From 百度百科 QEMU,是由 Fabrice Bellard开发的通用.开源机器模拟与虚拟化软件,Fabrice Bellard是另一个著名的C编译器的作者.QEMU可以在不同的机器上运行独自开 ...

  2. button 和 submit 的区别

    表单提交中button和submit的区别submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮, ...

  3. 2019 front-end web trending

    2019 front-end web trending https://github.com/kamranahmedse/developer-roadmap https://raw.githubuse ...

  4. Java之资源文件读取

    ClassLoaderWrapper.java package org.utils.resource; import java.io.InputStream; import java.net.URL; ...

  5. Luogu4768 NOI2018归程(最短路径+kruskal重构树)

    按海拔从大到小合并建出kruskal重构树,这样就能知道开车能到达哪些点,对这些点到1的最短路取min即可.最难的部分在于多组数据的初始化和数组大小的设置. #include<iostream& ...

  6. jquer导航锚点链接动画效果和返回顶部代码

    $(function(){ $(".index_nav li a").click(function(event){ //绑定按钮的单击事件 var index = this.tit ...

  7. 导致 KEIL error #20 的一种情况

    > 描述 <+> 环境为 KEIL5.20 & STM32F429工程,平台为 win10 <+> 结构体原形如下 @File <A.h> #incl ...

  8. 洛谷 P1310 表达式的值 解题报告

    P1310 表达式的值 题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. "× "运算优先于"⊕"运算,即计算表 ...

  9. 前端学习 -- Css -- 字体的几个属性学习

    font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体 ...

  10. word默认字体与大小

    对于红色地方单击,“正文框”按右键+修改 修改字体大小 修改中文和西文时的字体 注意宋体和宋体 (中文正文)是不同的