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 相关文章推荐
Jquery 快速构建可拖曳的购物车DragDrop
Nov 30 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
浅谈jQuery中的事件
Mar 23 Javascript
js密码强度实时检测代码
Mar 02 Javascript
js倒计时简单实现代码
Aug 11 Javascript
jQuery获取选中单选按钮radio的值
Dec 27 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
一步步教你利用Docker设置Node.js
Nov 20 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 Vue.js
JS前端canvas交互实现拖拽旋转及缩放示例
Aug 05 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
PHP的时间戳与具体时间转化的简单实现
2016/06/13 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
JavaScript 继承使用分析
2011/05/12 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
Javascript算符的优先级介绍
2013/03/20 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
javascript动态判断html元素并执行不同的操作
2014/06/16 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
微信小程序中显示html格式内容的方法
2017/04/25 Javascript
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
2018/08/31 Javascript
图解NodeJS实现登录注册功能
2019/09/16 NodeJs
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
德国网上药房:Apotal
2017/04/04 全球购物
好的自荐信的要求
2013/10/30 职场文书
客房主管岗位职责
2013/12/09 职场文书
职业生涯规划怎么写
2013/12/29 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书
python基础之停用词过滤详解
2021/04/21 Python
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
mysql拆分字符串作为查询条件的示例代码
2022/07/07 MySQL