javascript - 如何通过反向模板从 DOM 转到变量？

Question

（我已经在下面回答了这个问题）我想知道如何生成一个对象，例如{ name: 'iLoch', message: 'Hello' }给定一个 DOM 元素，以及生成它的模板。这是一个例子：

DOM：

<div>iLoch says "Hello"</div>

模板：

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

我想通过将模板与实际 DOM 内容“相交”来生成该原始对象：

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

Answer 1

编辑：这似乎还没有按预期工作。我应该用多个需要更换的实例对其进行测试。工作时会更新。

编辑2：在这里！应该像我最初预期的那样工作...... http://jsfiddle.net/Yy2yJ/

我根据 Scott 的评论创建了一个解决方案，可以在这里看到：http: //jsfiddle.net/faAsQ

我还没有对它进行足够彻底的测试以查看是否有任何问题 - 但如果这对您有帮助或您有改进，请在此处发表评论。干杯!

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));