Javascript正则表达式用新词替换多个词

Question

每次呈现 HTML 模板时，我都试图用新词替换多个词。

不必遍历模板(相当大)三次来查找三个不同的单词，我想组合这三个单词及其替换，并且只遍历模板一次。 (此外，显然下面的代码只替换了最后一个词 {id}，因为它覆盖了上面的其他两个替换尝试)。

       $.get('/templates/list-item.html', function(data) {
          var template = data,
              tmp = '';

          $.getJSON('conf.json', function(data) {
            var items = [],
                list = data.default;

            for (var item in list) {
              var name = item.name,
                  value = list[item].value,
                  id = list[item].id;

              tmp = template.replace('{name}', name);
              tmp = template.replace('{value}', value);
              tmp = template.replace('{id}', id);

              items.push(tmp);
            }

            $('<div/>', {
              html: items.join('')
            }).appendTo('body');
          });
        });

显然渲染模板不应该用JS来完成，但是由于它仅供内部使用，没有可用的后端，也不需要被谷歌索引，所以暂时可以。

Answer 1

您可以使用回调函数来替换模板变量。考虑例如:

template = "{foo} and {bar}"
data = {foo:123, bar:456}

template.replace(/{(\w+)}/g, function($0, $1) {
    return data[$1];
});

我还建议用 map() 替换循环:

items = $.map(list, function(item) {
   var data = {name: item.name, value:.... etc }
   return template.replace(/{(\w+)}/g, function($0, $1) {
       return data[$1];
   });
}

/{(\w+)}/g 基本意思如下:

/                - start pattern
{                - match { literally
    (            - begin group 1
        \w       - a "word" character (letter+digit+underscore)
        +        - repeat once or more
    )            - end group 1
}                - match } literally
/                - end pattern
g                - match globally, i.e. all occurences

回调函数被调用时，第一个参数是整个比赛，第二个参数是组1的值。因此，当它看到 {foobar} 时，它会调用 callback("{foobar}", "foobar")。