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小技巧 2.5 则
Sep 12 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
JavaScript闭包和回调详解
Aug 09 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
详解javascript中的Error对象
Apr 25 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
vue router 动态路由清除方式
May 25 Vue.js
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
11个PHP 分页脚本推荐
2011/08/15 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
打造通用的匀速运动框架(实例讲解)
2017/10/17 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
2019/05/07 Javascript
python实现无证书加密解密实例
2014/10/27 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
pandas Dataframe行列读取的实例
2018/06/08 Python
python数据批量写入ScrolledText的优化方法
2018/10/11 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
python定义类self用法实例解析
2020/01/22 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
python使用信号量动态更新配置文件的操作
2020/04/01 Python
利用python 下载bilibili视频
2020/11/13 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
职工趣味运动会方案
2014/02/10 职场文书
525心理活动总结
2014/07/04 职场文书
小学运动会演讲稿
2014/08/25 职场文书
2014年重阳节老干部座谈会上的讲话稿
2014/09/25 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
护理专业自我评价
2015/03/11 职场文书
田径运动会通讯稿
2015/07/18 职场文书