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 写类方式之一
Jul 05 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
Apr 02 Javascript
js判断某个方法是否存在实例代码
Jan 10 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
layui的table中显示图片方法
Aug 17 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
three.js 制作动态二维码的示例代码
Jul 31 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
解析php入库和出库
2013/06/25 PHP
封装ThinkPHP的一个文件上传方法实例
2014/10/31 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
ext for eclipse插件安装方法
2008/04/27 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
学习JavaScript设计模式之代理模式
2016/01/12 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
对 Vue-Router 进行单元测试的方法
2018/11/05 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
python实现人人网登录示例分享
2014/01/19 Python
python实现ip地址的包含关系判断
2020/02/07 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python模块内置属性概念及实例
2021/02/18 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
美国礼品卡商城: Gift Card Mall
2017/08/25 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
优秀党员获奖感言
2014/02/18 职场文书
道德演讲稿
2014/05/21 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
设计大赛策划方案
2014/06/13 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
群众路线领导对照材料
2014/08/23 职场文书
2014年大学宣传部工作总结
2014/12/19 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
十大必看国产动漫排名,魁拔上线,第二曾在日本播出
2022/03/18 国漫