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 相关文章推荐
改进:论坛UBB代码自动插入方式
Dec 22 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
jquery批量控制form禁用的代码
Aug 06 Javascript
html5+javascript制作简易画板附图
Apr 25 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
template.js前端模板引擎使用详解
Oct 10 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
Vue注册组件命名时不能用大写的原因浅析
Apr 25 Javascript
微信小程序wxml列表渲染原理解析
Nov 27 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中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
基于PHP的登录和注册的功能的实现
2020/08/06 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
自己封装的javascript事件队列函数版
2014/06/12 Javascript
浅谈Javascript 数组与字典
2015/01/29 Javascript
Ionic如何创建APP项目
2016/06/03 Javascript
jQuery 限制输入字符串长度
2016/06/20 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
基于wxPython的GUI实现输入对话框(2)
2019/02/27 Python
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
使用pandas读取文件的实现
2019/07/31 Python
简述安装Slackware Linux系统的过程
2012/01/12 面试题
数控技术专业推荐信
2013/11/01 职场文书
租房协议书样本
2014/08/20 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
异地年检委托书范本
2014/09/24 职场文书
工作失职检讨书
2015/01/26 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
MySQL索引失效的典型案例
2021/06/05 MySQL
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL