javascript - How to go from DOM to variables via reverse templating? -


(i've answered below) i'd know how can produce object such { name: 'iloch', message: 'hello' } given dom element, , template produced it. here's example:

dom:

<div>iloch says "hello"</div> 

template:

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

and want produce original object "intersecting" template actual dom contents:

{ name: 'iloch', message: 'hello' } 

edit: doesn't seem work expected yet.. should have tested more 1 instance needed replaced. update when works.

edit 2: here is! should work expected originally... http://jsfiddle.net/yy2yj/

i've created solution based on scott's comment, can seen here: http://jsfiddle.net/faasq

i haven't tested thoroughly enough see if breaks - please comment here if helped or if have improvements. cheers!

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

Comments