Javascript 如何通过反向模板从DOM到变量？

（我在下面回答了这个问题）我想知道如何在给定DOM元素的情况下生成对象，例如

{name:'iLoch'，message:'Hello'}

，以及生成它的模板。下面是一个例子：

DOM:

---

Edit：这似乎还没有达到预期效果。。我应该用不止一个需要替换的实例来测试它。工作时将进行更新。

编辑2：在这里！应该像我原来期望的那样工作

我根据Scott的评论创建了一个解决方案，如下所示：

我还没有彻底测试过它，看看是否有任何东西破坏了它-但是如果这对你有帮助或者你有改进，请在这里发表评论。干杯

var untemplate = function(template, html) {
    var names = [],
        obj = {},
        encodedHtml = escape(html);

    var templateRegex = new RegExp(escape(template).replace(/[\\\/\.\-\*]/g, function(match) {
            return '\\' + match;
    }).replace(/%7B%7B([^(?:%7B)]+?)%7D%7D/g, function(match, name) {
            names.push(name);
            return '(.*?)';
        }), 'g');

    encodedHtml.replace(templateRegex, function() {

        for(var i = 1; i < arguments.length - 2; i++) {
            obj[names[i - 1]] = unescape(arguments[i]);
        }
    });

    return obj;
}

console.log(untemplate('<div id="test">{{name}}</div><a>{{desc}}</a><a>{{desc2}}</a>', document.getElementById('container').innerHTML));

var untemplate=函数（模板，html）{
变量名称=[]，
obj={}，
encodedHtml=escape（html）；
var templateRegex=new RegExp（转义（模板）。替换（/[\\\/\.\-\*]/g，函数（匹配）{
返回“\\”+匹配；
}).替换（/%7B%7B（[^（？%7B）]+？）%7D%7D/g，函数（匹配，名称）{
name.push（name）；
返回“（.*）”；
})“g”）；
encodedHtml.replace（templateRegex，函数（）{
对于（var i=1；i

您可以使用正则表达式来匹配您的模式。这也是我想到的第一件事-但我更喜欢一个能以明显方式实现这一点的库。我删除了

mustache

标记，虽然我看到了

{tagname}

概念的相似之处，但它与mustache无关，它只需要一个模板就可以呈现为HTML，而不是你想要的相反。我发现了这一点，感谢Scott，能够用它来编写我自己的。

<div>{{name}} says "{{message}}"</div>

{ name: 'iLoch', message: 'Hello' }

var untemplate = function(template, html) {
    var names = [],
        obj = {},
        encodedHtml = escape(html);

    var templateRegex = new RegExp(escape(template).replace(/[\\\/\.\-\*]/g, function(match) {
            return '\\' + match;
    }).replace(/%7B%7B([^(?:%7B)]+?)%7D%7D/g, function(match, name) {
            names.push(name);
            return '(.*?)';
        }), 'g');

    encodedHtml.replace(templateRegex, function() {

        for(var i = 1; i < arguments.length - 2; i++) {
            obj[names[i - 1]] = unescape(arguments[i]);
        }
    });

    return obj;
}

console.log(untemplate('<div id="test">{{name}}</div><a>{{desc}}</a><a>{{desc2}}</a>', document.getElementById('container').innerHTML));