JavaScript 之 String.replace

最简单的用法

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
// 转移 html 标签
var str = '<span></span>',
    specialMap = {
        '<': '&lt;',
        '>': '&gt;'
    };

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

匹配函数的参数

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
// 演示匹配函数的参数
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 模板系统不少了,但在非大规模应用的情况下,可以简单地写一个函数来实现基本的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
 * @overview 根据字符串模板从json数据中生成字符串,模板标志为 {variable}
 * @param {String} str 字符串形式的模板
 * @param {JSON} data 待生成字符串的 json 数据
 */

function sub(str, data) {
    return str.replace(/\{(.*?)\}/g,function($,$1) {
            return data[$1] ? data[$1] : '';
        });
}

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

《JavaScript 之 String.replace》有4个想法

  1. function($,$1)请问这里的$是什么意思呢,没看懂^ ^

    1. 你可以看上面【匹配函数的参数】那段,对于匹配函数来说,第一个参数是当前匹配项,后加m个分组匹配内容,最后一个参数是整个字符串;参数命名可以是任意符合规则的标识符,只是最后一个例子中用了 $ 这个在别的语言中不属于标识符范围的字符而已($, $1.. $9 这些变量在这里没什么特殊意义,但对于 Regexp 来说是有的,这里借用其含义而已,可参考 http://msdn.microsoft.com/zh-cn/library/ie/t0kbytzc(v=vs.94).aspx )

评论已关闭。