JavaScript中利用正则表达式实现字符串全局替换

JavaScript全局替换字符串的实现原理

本文通过具体实例，介绍在JavaScript中如何结合Replace函数与正则表达式来替换重复出现的字符串，供读者参考学习。

以网站用户搜索功能为例，当用户在搜索框输入“我要日日发网络”并点击搜索后，需要在结果列表中将该关键词高亮显示为红色，类似百度搜索的效果。

为实现此功能，考虑使用JavaScript的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>

正则表达式gi参数的作用解析

运行页面后发现，该代码仅替换了第一个“日日发”字符串，其余出现的相同字符串未被替换。经排查发现，JavaScript的replace函数默认行为仅对字符串进行一次扫描，这与C#中的replace行为不同。要实现全部替换，必须引入正则表达式。修改后的代码如下：

<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正则表达式在线测试工具： http://tools.jb51.net/regex/javascript

正则表达式在线生成工具： http://tools.jb51.net/regex/create_reg

如需了解更多JavaScript相关知识，可参考本站专题：《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》。

希望本文所述内容对JavaScript程序设计有所帮助。