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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
jquery验证表单中的单选与多选实例
Aug 18 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
Sep 09 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
了不起的node.js读书笔记之例程分析
Dec 22 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
vue组件中的数据传递方法
May 14 Javascript
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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
根据ip调用新浪api获取城市名并转成拼音
2014/03/07 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP array_shift()用法实例分析
2019/01/07 PHP
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
JQuery基础语法小结
2015/02/27 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue项目中引入noVNC远程桌面的方法
2018/03/05 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
PHP开发的一般流程
2013/08/13 面试题
机电一体化求职信
2014/03/10 职场文书
《彩色世界》教学反思
2014/04/12 职场文书
名人演讲稿范文
2014/09/16 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
行政处罚决定书
2015/06/24 职场文书
php中配置文件保存修改操作 如config.php文件的读取修改等操作
2021/05/12 PHP
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python