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 相关文章推荐
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
JS对象转换为Jquery对象示例
Jan 26 Javascript
JavaScript检测鼠标移动方向的方法
May 22 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
如何编写jquery插件
Mar 29 jQuery
你或许不知道的一些npm实用技巧
Jul 04 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
详解Angular cli配置过程记录
Nov 07 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
基于JavaScript实现轮播图效果
Jan 02 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
让你的WINDOWS同时支持MYSQL4,MYSQL4.1,MYSQL5X
2006/12/06 PHP
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php中jpgraph类库的使用介绍
2013/08/08 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
漂亮的提示信息(带箭头)
2007/03/21 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
基于jquery封装的一个js分页
2011/11/15 Javascript
JS判断对象是否存在的10种方法总结
2013/12/23 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
2017/04/26 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
python中os操作文件及文件路径实例汇总
2015/01/15 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
分享一个可以生成各种进制格式IP的小工具实例代码
2017/07/28 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python numpy格式化打印的实例
2018/05/14 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
详解从Django Allauth中进行登录改造小结
2019/12/18 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
幼儿园大班开学寄语
2014/08/02 职场文书
大学生实习证明范本
2014/09/19 职场文书
群众路线教育实践活动心得体会(四风)
2014/11/03 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
写给父母的感谢信
2015/01/22 职场文书
人与自然的观后感
2015/06/18 职场文书
谢师宴家长致辞
2015/07/27 职场文书
文明礼仪主题班会
2015/08/13 职场文书
环保建议书范文
2015/09/14 职场文书
《圆的周长》教学反思
2016/02/17 职场文书