JQuery在呈现后搜索dom元素，并用相应的值替换键。

Question

我正在尝试在我的正在开发的web应用程序上应用我自己的本地化方法。我知道我使用的是JQuery 2.2.0，没有任何其他框架或第三方。我需要用纯html代码编写一些表达式，以便：

ex-1:
<span>#{{lang.details}}</span>

ex-2:
<button value='#{{lang.save}}'>

然后，当dom被完全呈现后，我想通过dom元素找到所有以“{{”开头并以"}}“结尾的表达式，用我的JSON包中的相应值替换它们。

我的JSON包看起来像：

var en = {
    details: "details",
    save: "save"
}

我的app.js代码：

var lang = en;
// jquery load en json file
// search the dom elements and replace the key surrounded 
// by '#{{ }}' with its corresponding value from the bundle

在JavaScript或JQuery中找出这些元素的最佳方法是什么。我不能通过第三方解决其他问题吗？

Answer 1

页面加载后用JavaScript变量替换HTML

var doneReplacing = false;
$(function() {
    if (doneReplacing === false) {
        $(document.documentElement).html(function(index, content) {
            return content.replace(/#{{([^}]*)}}/g, function(match, $1) {
                return eval($1);
            });
        });
        doneReplacing = true;
    }
});

演示

Regex101测试

基本上，它所做的是，在页面加载之后，它搜索模式#{{ variable }}，然后用变量的值替换匹配。