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 相关文章推荐
VBS通过WMI监视注册表变动的代码
Oct 27 Javascript
JavaScript跨域方法汇总
Oct 16 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
JavaScript中constructor()方法的使用简介
Jun 05 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
Jan 16 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
详解babel升级到7.X采坑总结
May 12 Javascript
百度小程序之间的页面通信过程详解
Jul 18 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue实现鼠标经过动画
Oct 16 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工厂模式的好处
2013/06/18 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP中数组转换为SimpleXML教程
2019/01/27 PHP
jquery text()要注意啦
2009/10/30 Javascript
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jquery 取子节点及当前节点属性值
2014/07/25 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
浅谈Vue.js中如何实现自定义下拉菜单指令
2019/01/06 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
2019/07/10 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
从零学Python之入门(三)序列
2014/05/25 Python
Python中编写ORM框架的入门指引
2015/04/29 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
Python使用os.listdir()和os.walk()获取文件路径与文件下所有目录的方法
2019/04/01 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
python3让print输出不换行的方法
2020/08/24 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
OSPF有什么优点?为什么OSPF比RIP收敛快?
2013/02/13 面试题
节水倡议书范文
2014/04/15 职场文书
个人综合鉴定材料
2014/05/23 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书