phpstudy集成环境

 首页 > js中的String.prototype.replace函数

js中的String.prototype.replace函数

function htmlEncode(str) {
        //var div = document.createElement('div');
        //div.innerText = str;
        //return div.innerHTML;
        var map = {
            '&': '&',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        };
        var mapper = function($0) {
            return map[$0];
        };
        return str.replace(/[&<>"']/g, mapper);
    }

上面代码中replace函数的第二个参数我看mdn上可以指定一个函数，其例子是

function replacer(match, p1, p2, p3, offset, string) {
  // p1 is nondigits, p2 digits, and p3 non-alphanumerics
  return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);

这个例子我勉强可以看懂，可是最上面的代码map是一个对象，map[$0]这是啥意思呢，为啥参数是$0呢。

$0只是第一个参数的名字,你也可以管他叫a、b、c、_...

而第一个参数的意义是匹配上正则表达式的字符串(match)(chars which matched regex)
，正如mdn的例子，

str.replace(/[&<>"']/g, mapper) 是指把匹配到的字符串替換成 mapper 回傳的值，其實相較官方例子，htmlEncode 這個就比較簡單，先解釋下正則：

/[&<>"']/g ：匹配到 & < > " ' 任何一個

所以他會取代掉所有的上述特殊字元，而取代成什麼，就是從 map 取得

// 這是匹配後要替換的字元，例如 & 就替換成 &amp;
var map = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
};
var mapper = function($0) {
    // $0 其實只是個普通的參數，前面加個 $ 是 js 允許的命名方式，並無特別之處
    // $0 代表匹配到的，例如 & 或是 "
    // 那再根據這個匹配到的字元，去 map 裡找相對應要替換的字元再傳回
    return map[$0];
};

// 所以這裡的用意是把所有上述特殊字元都給替換成另一種編碼形式(UrlEncode)
return str.replace(/[&<>"']/g, mapper);

function htmlEncode(str) {
        //var div = document.createElement('div');
        //div.innerText = str;
        //return div.innerHTML;
        var map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#39;'
        };
        var mapper = function($0) {
            return map[$0];
        };
        return str.replace(/[&<>"']/g, mapper);//mapper函数就相当于图片中的匿名函数
    }

以“uu&fhd”为例，正则表达式会匹配到其中的“&”，然后将 “&”、2（&符号在字符串的位置）、“uu&fhd;” 三个参数传入到mapper函数中，mapper函数接收了三个参数，其中第一个参数赋值给了“$0”。然后执行mapper函数体内的语句，返回map[$0]，即map.&所对应的值'&amp;'，最后用这个返回值替换原来的“&”符号就ok了

replace方法替换字符串分两步：
1、首先根据第一个参数匹配要替换的字符，
2、找到要替换的字符之后，将之替换成第二个参数。

而这里第二个参数是一个函数，那么replace会将匹配到的字符作为参数传递给函数。

str.replace(/[&<>"']/g, mapper);

所以你的问题其实是不理解property accessor

简单说，就是通过item[属性名]，可以访问到item变量的属性名的值

【热门文章】
【热门文章】