Injecting inline formated xml in javascript
Sometimes is good tho have some code like this:
1 2 3 4 | var html = <form> <input type="text"> </form>; |
But for now is not posible to do until E4X is adopted by all the browsers…
A tricky way to do it is to use the javascript /*! comments */ inside a function definition, to store the real formated xml.
How to define a variable in comments:
1 2 3 4 5 6 7 | /*! {"embed":{ "id":"form" } } <form> <input type="text" name="user"/> <input type="text" name="password"/> </form> */ |
First line begins with a normal multiline comment /* and the ! simbol, ATTENTION, that way, starting width /*! we tell some javascripts mimimizers that this is a special comment and they must left the comments as is in the source code.
Second line tells the parser the variable asignation name of the content.
The declaration must end width the close comment tag */ in a new line.
Full example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | var data = function() { /*! {"embed":{ "id":"form" } } <form> <input type="text" name="user"/> <input type="text" name="password"/> </form> */ /*! {"embed":{ "id":"button"} } <button value="Send"> */ } var parsedData = window.parseEmbeds(data); alert( parsedData.form ) alert( parsedData.button ); |
The main parseEmbeds function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | (function(window) { window.parseEmbeds = function( fn, opt ) { var dataObj = {} var regex_comments = /\*(.|[\r\n])*?\*/gi; var code = fn.toString().match( regex_comments ); var comment; var lines; var outputString; var trim11 =function(str){str = str.replace(/^\s+/, '');for (var i = str.length - 1; i >= 0; i--) {if (/\S/.test(str.charAt(i))) {str = str.substring(0, i + 1);break;}}return str;}; for( var i=0; i<code.length; i++ ) { comment = code[ i ]; if( comment.indexOf('{"embed":')!=-1 ) { lines = comment.split('\n'); outputString = ""; for( var e=2; e <lines.length-1; e++ ) { outputString+=trim11(lines[e]); } dataObj[ JSON.parse( lines[ 1 ] ).embed.id ] = outputString; } } return dataObj; } })(window); |
