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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
JavaScript中的操作符类型转换示例总结
May 30 Javascript
Javascript动画效果(1)
Oct 11 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
利用angularjs1.4制作的简易滑动门效果
Feb 28 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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
如何给phpadmin一个保护
2006/10/09 PHP
PHP新手上路(十二)
2006/10/09 PHP
如何隐藏你的.php文件
2007/01/04 PHP
用PHP编写和读取XML的几种方式
2013/01/12 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
Thinkphp框架中D方法与M方法的区别
2016/12/23 PHP
php 如何设置一个严格控制过期时间的session
2017/05/05 PHP
php数据序列化测试实例详解
2017/08/12 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
2013/04/26 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
layui 阻止图片上传的实例(before方法)
2019/09/26 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
python如何导入依赖包
2020/07/13 Python
Python如何使用27行代码绘制星星图
2020/07/20 Python
Python远程linux执行命令实现
2020/11/11 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
Linux上比较文件的命令都有哪些
2013/09/28 面试题
大学学习计划书范文
2014/05/02 职场文书
婚礼新人答谢词
2015/01/04 职场文书
师范生见习自我总结
2015/06/23 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
导游词之天津盘山
2019/11/01 职场文书
Vue如何清空对象
2022/03/03 Vue.js
vue判断按钮是否可以点击
2022/04/09 Vue.js
Python实现批量将文件复制到新的目录中再修改名称
2022/04/12 Python
delete in子查询不走索引问题分析
2022/07/07 MySQL