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

Javascript regex to replace multiple words with new words

本文关键字：替换 单词 新单词 正则表达式 用于 Javascript      更新时间：2023-09-26

每次渲染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完成，但由于它仅供内部使用，因此没有可用的后端，也不需要由Google索引，因此暂时没问题。

可以使用回调函数替换模板变量。例如，考虑：

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")。

相关文章：