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 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
Javascript 获取字符串字节数的多种方法
Jun 02 Javascript
理解Javascript_02_理解undefined和null
Oct 11 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 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时区转换转换函数
2014/01/07 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
PHP连接MySQL数据库并以json格式输出
2018/05/21 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
2014/11/26 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
Vue.JS入门教程之自定义指令
2016/12/08 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
Vue导出页面为PDF格式的实现思路
2018/07/31 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
Tensorflow环境搭建的方法步骤
2018/02/07 Python
python机器学习之神经网络实现
2018/10/13 Python
django 微信网页授权登陆的实现
2019/07/30 Python
利用python计算时间差(返回天数)
2019/09/07 Python
django中间键重定向实例方法
2019/11/10 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python如何实现word批量转HTML
2020/09/30 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
毕业自我鉴定
2013/11/05 职场文书
业务员岗位职责范本
2013/12/15 职场文书
护士自我评价范文
2014/01/25 职场文书
艾滋病宣传活动总结
2014/05/08 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
总经理岗位职责
2015/02/04 职场文书
小学元宵节活动总结
2015/02/06 职场文书
运动会通讯稿50字
2015/07/20 职场文书
新年寄语2016
2015/08/17 职场文书
redis中lua脚本使用教程
2021/11/01 Redis
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript