JavaScript replace方法与正则表达式详解

作者：hezhiwu5@163.com

基础字符串替换与局限性

<script language="javascript">

var stringObj="终古人民共和国，终古人民";

//替换错别字“终古”为“中国”

//并返回替换后的新字符

//原字符串stringObj的值没有改变

var newstr=stringObj.replace("终古","中国");

alert(newstr);

</script>

观察上述示例可知，若字符串中存在多个相同的待替换子串，仅调用一次replace方法只能替换第一个匹配项，后续的“终古”并未被替换。虽然可以通过连续调用多次replace方法来逐个替换，但这种方式在面对大量重复字符时效率低下且代码冗余。

<script language="javascript">

var stringObj="终古人民共和国，终古人民";

//替换错别字“终古”为“中国”

//并返回替换后的新字符

//原字符串stringObj的值没有改变

var newstr=stringObj.replace("终古","中国");

newstr=newstr.replace("终古","中国");

alert(newstr);

</script>

如果字符串中包含N的N次方个错别字，显然不能通过执行N的N次方次replace方法来解决。引入正则表达式后，可以通过全局匹配标志一次性完成所有替换，无需逐个处理。改进后的代码如下所示。

使用正则表达式进行全局替换

<script language="javascript">

var reg=new RegExp("终古","g"); //创建正则RegExp对象

var stringObj="终古人民共和国，终古人民";

var newstr=stringObj.replace(reg,"中国");

alert(newstr);

</script>

上述内容展示了replace方法的最基本应用。接下来将探讨更为复杂的应用场景，例如实现网站搜索关键字的高亮显示功能。

在许多网站的文章搜索功能中，用户会发现搜索关键字会以高亮或不同颜色显示。这一效果通常通过正则表达式结合replace方法实现。其核心原理是将匹配到的关键字包裹在特定的HTML标签中，具体实现代码如下。

利用子匹配实现关键字高亮

<script language="javascript">

var str="中华人民共和国，中华人民共和国";

var newstr=str.replace(/(人)/g,"<font color=red>$1</font>");

document.write(newstr);

</script>

上述程序缺乏交互性，无法让用户自定义查找内容。为了增强实用性，我们可以改进程序，允许用户自主输入需要高亮显示的字符。

<script language="javascript">

var s=prompt("请输入在查找的字符","人");

var reg=new RegExp("("+s+")","g");

var str="中华人民共和国，中华人民共和国";

var newstr=str.replace(reg,"<font color=red>$1</font>");

document.write(newstr);

</script>

在上述代码中，$1是一个特殊占位符，它代表正则表达式中第一个括号内捕获的子匹配内容。同理，$2代表第二个子匹配。所谓子匹配，即正则表达式中由括号()包围的部分，每个括号对应一个子匹配组。

当我们需要对匹配到的字符进行动态计算或复杂处理时，可以使用回调函数。在实现之前，先介绍如何获取函数参数。在JavaScript函数内部，存在一个arguments对象，它存储了当前函数的所有参数。通过arguments可以访问这些参数，具体示例代码如下。

通过回调函数处理复杂替换逻辑

<script language="javascript">

function test()

alert("参数个数："+arguments.length);

alert("每一个参数的值："+arguments[0]);

alert("第二个参数的值"+arguments[1]);

//可以用for循环读取所有的参数

test("aa","bb","cc");

</script>

理解上述参数获取机制后，我们可以进一步探讨replace方法的高级用法：传入回调函数。

<script language="javascript">

var reg=new RegExp("\\d","g");

var str="abd1afa4sdf";

str.replace(reg,function(){alert(arguments.length);});

</script>

运行上述代码会发现，匿名回调函数被执行了两次，且每次执行时都接收到了三个参数。这是因为正则表达式\\d匹配单个数字，而字符串"abd1afa4sdf"中包含两个数字，因此回调函数被调用了两次。接下来我们将分析这三个参数的具体含义。

<script language="javascript">

function test()

for(var i=0;i<arguments.length;i++)

alert("第"+(i+1)+"个参数的值："+arguments[i]);

var reg=new RegExp("\\d","g");

var str="abd1afa4sdf";

str.replace(reg,test);

</script>

通过观察输出结果可知，回调函数的第一个参数是匹配到的子串，第二个参数是该匹配在原始字符串中的索引位置（对应RegExp.index），第三个参数是原始被搜索的字符串（对应RegExp.input）。此外，如果正则表达式中包含子匹配组，回调函数的参数列表还会相应增加，用于存储这些子匹配的内容。基于此机制，我们可以采用更灵活的写法。

<script language="javascript">

function test($1)

return "<font color='red'>"+$1+"</font>"

var s=prompt("请输入在查找的字符","人");

var reg=new RegExp("("+s+")","g");

var str="中华人民共和国，中华人民共和国";

var newstr=str.replace(reg,test);

document.write(newstr);

</script>

通过上述方式，我们可以对匹配到的字符执行任意逻辑处理。下面展示一个实际应用示例：将字符串中的年龄转换为出生年份。

<script language="javascript">

var str="他今年22岁，她今年20岁，他的爸爸今年45岁，她的爸爸今年44岁，一共有4人"

function test($1)

var gyear=(new Date()).getYear()-parseInt($1)+1;

return $1+"("+gyear+"年出生)";

var reg=new RegExp("(\\d+)岁","g");

var newstr=str.replace(reg,test);

alert(str);

alert(newstr);

</script>