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 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
两个Javascript小tip资料
Nov 23 Javascript
jquery对dom的操作常用方法整理
Jun 25 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
javascript读取xml实现javascript分页
Dec 13 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
Feb 25 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Vue2.0 实现单选互斥的方法
Apr 13 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
Sep 12 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 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
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
js验证表单第二部分
2006/11/25 Javascript
jQuery插件实现表格隔行换色且感应鼠标高亮行变色
2013/09/22 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
JS添加或修改控件的样式(Class)实现方法
2016/10/15 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Python实现统计代码行的方法分析
2017/07/12 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
Python File(文件) 方法整理
2019/02/18 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
Python paramiko 模块浅谈与SSH主要功能模拟解析
2020/02/29 Python
python 基于selectors库实现文件上传与下载
2020/12/31 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
迎元旦广播稿
2014/02/22 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python