JavaScript 之 String.replace

最简单的用法

直接的用字符串替换字符串是最简单的用法，这种情况下将只会替换掉第一个匹配的字符串。

var res = 'a1a2a3'.replace('a', 'b'); // => 'b1a2a3'

使用正则来达到复杂的要求

JavaScript 中正则的介绍可参照 MDN 的 RegExp。

// 把字符串的所有英文字符都去掉，不论大小写
var pattern = /[a-z]/gi;
var str = '1aBc2d3E4f5e';
var res = str.replace(pattern, ''); // => '12345'

使用函数来对匹配内容做高级处理

在使用正则匹配的同时，可以使用一个函数来对匹配的内容来做更加复杂的一些处理，比如下面的把 < 和 > 做转义，而不用通过执行两次的 replace 操作。

// 转移 html 标签
var str = '<span></span>',
    specialMap = {
        '<': '<',
        '>': '>'
    };

var newStr = str.replace(/[<>]/gm, function(match){
    return specialMap[match];
});     // => '<span></span>'

匹配函数的参数

在上面的例子中，匹配函数带了一个参数，其代表了当前匹配的内容。这个函数还可以带更多的参数。

匹配函数一共可以带 m+3 个参数，其中 m 是正则表达式中组（group）的个数（没 group 时 m 为 0）。

第一个参数是当前匹配内容；倒数第二个参数是当前匹配内容在待匹配字符串中的 index；最后一个参数是待匹配字符串；中间的 m 个参数则依次是各个分组内容。

// 演示匹配函数的参数
var str = '555-666-777-888';
var pattern = /(\d+)-(\d+)/g;

str.replace(pattern, function(match, g1, g2, index, str) {
    console.log(match, g1, g2, index, str);
});

// => 555-666 555 666 0 555-666-777-888
// => 777-888 777 888 8 555-666-777-888

// 注意：匹配函数中没有 return，那么最终将不会替换

构建一个简单的模板函数

在现在，越来越多的功能依赖于 js，比如通过 ajax 等来获取 json 数据，然后拼成相应的 HTML 代码，然后插入到页面。在 HTML 结构复杂的情况下，拼 HTML 字符串是一件极其痛苦的事情，需要十分留意代码嵌套的问题；另外，后期的维护修改起来也是非常的痛苦的，特别是经过压缩的代码。

应对这个问题的一个解决方法就是：模板。正如JSP/PHP/Python 等模板系统一样，通过把 HTML 结构写写来，然后用数据来填写对应的变量，这样便方便了撰写/修改/维护。

现有的 JS 模板系统不少了，但在非大规模应用的情况下，可以简单地写一个函数来实现基本的功能。

/*
 * @overview 根据字符串模板从json数据中生成字符串，模板标志为 {variable}
 * @param {String} str 字符串形式的模板
 * @param {JSON} data 待生成字符串的 json 数据
 */
function sub(str, data) {
    return str.replace(/\{(.*?)\}/g,function(match, g1) {
            return data[g1] ? data[g1] : '';
        });
}

var tpl = '{name} (blog: {blog})';
var json = {
    name: 'John',
    blog: 'http://xx.oo'
};