js使用Replace结合正则替换重复出现的字符串功能示例


Posted in Javascript onDecember 27, 2016

本文实例讲述了js使用Replace结合正则替换重复出现的字符串功能。分享给大家供大家参考,具体如下:

今天想把网站上关于用户搜索资料后的结果列表进行处理,如同百度搜索一样,加入我搜索框中输入“我要日日发网络”,点击搜索按钮所得的结果列表中将会出现“我要日日发网络”字符串为红色。

我今天想到用js来进行处理,就是利用js内的replace函数对结果列表内的字符串进行指定字符串的替换工作,开始我是这样写的

<script type="text/JavaScript" language="javascript">
<!--
  function ReplaceStr(str) {
   var content = document.getElementById("content").innerHTML;
   content = content.replace(str, "<font color='red'>" + str + "</font>");
   document.getElementById("content").innerHTML = content;
  }
  ReplaceStr("日日发");
// -->
</script>

最后运行页面发现只替换掉了第一个“日日发”字符串,其他“日日发”字符串没有被替换掉,开始百思不得其解,后来在朋友的帮助下了解到js内的replace和c#内的replace有很大的不同,js内的replace默认的只是对字符串进行一次扫描。那么利用js的replace函数如何才能够达到字符串全部替换的效果呢? 这里我们就必须引入正则式了的,修改后的js函数如下所示:

<script type="text/javascript" language="javascript">
<!--
  function ReplaceStr(str) {
   var content = document.getElementById("content").innerHTML;
   content = content.replace(new RegExp(str,"gi"), "<font color='red'>" + str + "</font>");
   document.getElementById("content").innerHTML = content;
  }
  ReplaceStr("日日发");
// -->
</script>

这两者一比较就很清楚问题出在哪里了的,利用正则式很轻松地解决了问题,在这里 new RegExp(str,"gi")  这句话是什么意思呢?

后来查阅了一些资料,g - 从头至尾扫描完一次整个字符串,i- 不区分替换字符串的大小写。那么整个语句的意思就好理解了的。

Javascript 相关文章推荐
Javascript 调试利器 Firebug使用详解六
Jul 05 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
May 20 Javascript
jQuery中appendTo()方法用法实例
Jan 08 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
JS实现双击内容变为可编辑状态
Mar 03 Javascript
Vue.js之slot深度复制详解
Mar 10 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
Aug 23 Javascript
JavaScript对象拷贝与赋值操作实例分析
Dec 10 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
Dec 27 #Javascript
jQuery获取选中单选按钮radio的值
Dec 27 #Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 #Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
Dec 27 #Javascript
TypeScript学习之强制类型的转换
Dec 27 #Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 #Javascript
详解js的六大数据类型
Dec 27 #Javascript
You might like
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
javascript 验证日期的函数
2010/03/18 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
关于vue状态过渡transition不起作用的原因解决
2019/04/09 Javascript
Node.js中console.log()输出彩色字体的方法示例
2019/12/01 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
Python读写Redis数据库操作示例
2014/03/18 Python
python内存管理分析
2015/04/08 Python
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python执行使用shell命令方法分享
2017/11/08 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
python logging通过json文件配置的步骤
2020/04/27 Python
Python dict的常用方法示例代码
2020/06/23 Python
美国Curacao百货连锁店网站:iCuracao.com
2019/07/20 全球购物
params有什么用
2016/03/01 面试题
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2014年村委会工作总结
2014/11/24 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
七夕情人节问候语
2015/11/11 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js