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中的事件
Sep 23 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
动态显示可输入的字数提示还可以输入的字数
Apr 01 Javascript
js数组操作常用方法
May 08 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
Oct 19 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
thinkphp学习笔记之多表查询
2014/07/28 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
学习ExtJS accordion布局
2009/10/08 Javascript
JS编程小常识很有用
2012/11/26 Javascript
javascript 正则表达式相关应介绍
2012/11/27 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
js控制frameSet示例
2013/09/10 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
jquery css实现流程进度条
2020/03/26 jQuery
JavaScript中window和document用法详解
2020/07/28 Javascript
JavaScript原生数组函数实例汇总
2020/10/14 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python3 线性回归验证方法
2019/07/09 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
Python中的面向接口编程示例详解
2021/01/17 Python
python包的导入方式总结
2021/03/02 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
美特斯邦威官方商城:邦购网
2016/10/13 全球购物
印度网上药店:1mg
2017/10/13 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
安全教育心得体会
2013/12/29 职场文书
教师绩效工资方案
2014/02/01 职场文书
2014年元旦感言
2014/03/06 职场文书
《大海那边》教学反思
2014/04/09 职场文书
治安消防安全责任书
2014/07/23 职场文书
自主招生自荐信格式
2015/03/04 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android