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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
jquery阻止后续事件只执行第一个事件
Jul 24 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
浅谈jQuery中Ajax事件beforesend及各参数含义
Dec 03 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
详解webpack 热更新优化
Sep 13 Javascript
详解Vue中的scoped及穿透方法
Apr 18 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
详解Js模块化的作用原理和方案
Apr 29 Javascript
手写实现JS中的new
Nov 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP实现实时生成并下载超大数据量的EXCEL文件详解
2017/10/23 PHP
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
分享10个原生JavaScript技巧
2015/04/20 Javascript
JS实现关闭当前页而不弹出提示框的方法
2016/06/22 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
详解照片瀑布流效果(js,jquery分别实现与知识点总结)
2017/01/01 Javascript
Move.js入门
2017/02/08 Javascript
基于bootstrap实现收缩导航条
2017/03/17 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
Vue实现验证码功能
2019/12/03 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python字典多条件排序方法实例
2014/06/30 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
opencv3/C++ 平面对象识别&amp;透视变换方式
2019/12/11 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
python 实现关联规则算法Apriori的示例
2020/09/30 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
CSS3区域模块region相关编写示例
2015/08/28 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
土建专业大学生自荐信范文
2014/04/09 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
Python字符串格式化方式
2022/04/07 Python