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循环变量注册dom事件 之强大的闭包
Sep 08 Javascript
深入理解javascript中return的作用
Dec 30 Javascript
js动态拼接正则表达式的两种方法
Mar 04 Javascript
基于jQuery实现表单提交验证
Nov 24 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
Vue.js2.0中的变化小结
Oct 24 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
jquery实现动态添加附件功能
Oct 23 jQuery
vue-router实现编程式导航的代码实例
Jan 19 Javascript
js实现超级玛丽小游戏
Mar 18 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP把JPEG图片转换成Progressive JPEG的方法
2014/06/30 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
Redis构建分布式锁
2017/03/28 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery 弹出登录窗口实现代码
2009/12/24 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
2016/03/01 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
微信小程序封装自定义弹窗的实现代码
2019/05/08 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Python中实现远程调用(RPC、RMI)简单例子
2014/04/28 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
业务员岗位职责范本
2013/12/15 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
三严三实对照检查材料
2014/09/22 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
检讨书怎么写
2015/05/07 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
《植树问题》教学反思
2016/03/03 职场文书
python解决12306登录验证码的实现
2021/04/18 Python