Javascript 更快地替换 HTML 代码中的 "variables"

Question

我正在使用 javascript 和新的 html 构建一个多语言单页网站 template -tag 并希望使用自己的变量，如 {{txt.welcome}}在 html 中，应由翻译替换。

HTML:

<div class="container">
  <h2>{{heading.hello}}</h2>
  <p>{{txt.welcome}}<br /><img alt="{{image.description}}" src="" /></p>
</div>

Javascript:

var reg = new RegExp(/{{([a-z.]+)}}/g);
var result;
while(result = reg.exec(document.documentElement.innerHTML)) {
    document.documentElement.innerHTML = document.documentElement.innerHTML.replace(result[0], translations[result[1]]);
}

它会在整个文档中搜索变量并用定义的文本替换它们，但是对于很多变量，性能会变得非常糟糕。

有什么比在整个文档的 html 上使用正则表达式循环更快的解决方案？

其他图书馆怎么办like AngularJS与 {{ 'FOO' | translate }} ？

Answer 1

我认为，最大的问题是您不仅要运行正则表达式，还要多次对整个 HTML 运行替换。而且您要多次设置实际的 DOM HTML，而不是在获得结果之前操作字符串，然后设置一次 HTML。我强烈建议使用像 Handlebars.js 这样的库，但是如果你想自己做，一个非常快速的实现是这样的:

var translations = { 
    heading: { 
        hello: "hello" 
    }, 
    txt: { 
        welcome: "welcome" 
    }, 
    image: { 
        description: "this is a test" 
    }
};

function get(obj, desc) {
    var arr = desc.split(".");
    while(arr.length && (obj = obj[arr.shift()]));
    return obj;
}

function replaceTokens(HTML) {
    return HTML.split('{{').map(function(i) { 
        var symbol = i.substring(0, i.indexOf('}}')).trim(); 
        return i.replace(symbol + '}}', get(translations, symbol)); 
    }).join('');
}