字符串的replace()方法隐藏着什么不可告人秘密？
Posted 前端矿场常年招矿工啦啦啦 - muyuxingguang@
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了字符串的replace()方法隐藏着什么不可告人秘密？相关的知识，希望对你有一定的参考价值。
最近在做JS算法项目时发现一个令我匪夷所思的问题， 这里想记录一下问题。
首先介绍一下字符串replace()方法的基本用法。
replace() 方法使用一个替换值（replacement）替换掉一个匹配模式（pattern）在原字符串中某些或所有的匹配项，并返回替换后的字符串。这个替换模式可以是字符串或者RegExp（正则表达式），替换值可以是一个字符串或者一个函数。
语法
str.replace(regexp|substr, newSubStr|function[, flags])参数
regexp- 一个
RegExp对象。该正则所匹配的内容会被第二个参数的返回值替换掉。
substr- 一个要被
newSubStr替换的字符串。
newSubStr- 替换掉第一个参数在原字符串中的匹配部分。该字符串中可以内插一些特殊的变量名。
function一个用来创建新子字符串的函数，该函数的返回值将替换掉第一个参数匹配到的结果。该函数的参数描述请参考 指定一个函数作为参数 小节。
返回值
一个部分或全部匹配由替代模式所取代的新的字符串。
关于这个方法具体的信息参考MDN再好不过了。
String.prototype.replace() - JavaScript | MDN
现在有一个非常简单的需求：将html代码中的特殊字符进行实体转义：
先看一个简单的输出没有错误的版本：
正确方法一：
functionconvertHTML(str) {// :)varpattern=/[&<>"\']/g;return str.replace(pattern,function(match){switch(match){case "<":return "<";case ">":return ">";case "&":return "&";case "\\"":return""";case"\\\'":return"'";}});}console.log(convertHTML("<Tom & Jerry>"));//<Tom & Jerry>指定一个函数作为第二个参数。在这种情况下，当匹配执行后， 该函数就会执行。 函数的返回值作为替换字符串。 (注意: 上面提到的特殊替换参数在这里不能被使用。) 另外要注意的是， 如果第一个参数是正则表达式， 并且其为全局匹配模式， 那么这个方法将被多次调用， 每次匹配都会被调用。
后来我对上述的代码进行了改造，使代码看起来更明了：
正确方法二：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function convertHTML(str) { // :) var pattern=/[&<>"\']/g; rules={"&":"&","<":"<",">":">",\'"\':""","\'":"'"}; return str.replace(pattern,function(match){ return rules[match]; });}console.log(convertHTML("<Tom & Jerry>"));//<Tom & Jerry> |
很明显非常简单的一个改造，我将规则键值对放在了rules对象中，输出结果同样也是正确的。
接下来，我发现貌似使用RegExp构造函数属性还能使代码变得更加简单。RegExp构造函数属性如下表所示：
其中一个叫做lastMatch的属性深深吸引了我。我在想能不能像下面这样改造一下：
错误方法：
|
1
2
3
4
5
6
|
function convertHTML(str) { var pattern=/[&<>"\']/g; rules={"&":"&","<":"<",">":">",\'"\':""","\'":"'"}; return str.replace(pattern,rules[RegExp.lastMatch]); }console.log(convertHTML("<Tom & Jerry>")); |
写完这个代码，突然觉得自己聪明绝世，飘飘然了呢，然而一瓢冷水泼下来了。运行结果如下：
|
1
|
undefinedTom undefined Jerryundefined |
这是什么鬼，貌似该替换的字符都被替换成了undefined。接下来我加入了一条测试语句：
|
1
2
3
4
5
6
7
8
9
|
function convertHTML(str) { // :) var pattern=/[&<>"\']/g; rules={"&":"&","<":"<",">":">",\'"\':""","\'":"'"};
//下面是测试代码 console.log(RegExp.lastMatch);//> return result;}console.log(convertHTML("<Tom & Jerry>")); |
根据测试代码，最后匹配的是“>”说明匹配是正确的，但是最后为什么没有按照规则进行替换呢，我想应该是replace()方法的实现机制我们没有弄清楚，网上没有找到相关的资料，所以只能提醒自己以后不能写这样的代码了，在这种情况下，还是乖乖函数作为第二个参数。。。。。。等等，用函数做第二个参数，我又进行了下面的修改：
|
1
2
3
4
5
6
7
8
9
10
|
function convertHTML(str) { // :) var pattern=/[&<>"\']/g; rules={"&":"&","<":"<",">":">",\'"\':""","\'":"'"}; var result=str.replace(pattern,function(){ return rules[RegExp.lastMatch] }); return result;}console.log(convertHTML("<Tom & Jerry>"));//<Tom & Jerry> |
注意上面我还是使用了正则表达式函数属性与方法二是有区别的，但是结果却是离奇的正确了。（难道闭包作怪）
replace（）究竟隐藏着什么秘密，还有待挖掘？？
以上是关于字符串的replace()方法隐藏着什么不可告人秘密？的主要内容，如果未能解决你的问题，请参考以下文章