How to make Resig micro templates compatible with XHTML?

Question

I experimented with a John Resig micro-template that works great. However, the margin will not pass the XHTML 1.0 Transitional validation test. (Among other things, id attributes give errors.)

Replacing the tag identifiers <,> with [[,]] is being tested. So I created a js script that, at boot time (a finished jQuery document), converts the square brackets back to regular markers. This works fine in FF, but not in IE, Chrome, etc.

Scripts embedded in CDATA tags are also checked.

Question: Is there a way to insert a micro-template into a script and still pass the XHTML check? My idea was to remove the CDATA tags after the page loaded. But there are probably more reasonable ways. (Note: I would prefer not to inject HTML through js, since markup will be difficult to maintain.)

PS: I looked at other js templates, but they either do not match XHTML, or are too bulky.

TIA for any advice.

Answer 1

Why are you faced with the problem of changing all methods that use the micromask instead of changing the micromask itself? It seems like a waste of processing to load everything in a certain way, and then change it all so that it is compatible with the script.

script [[ <%, ?

str
          .replace(/[\r\t\n]/g, " ")
          .split("<%").join("\t")
          .replace(/((^|%>)[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)%>/g, "',$1,'")
          .split("\t").join("');")
          .split("%>").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');");

<% [[ >% ]]

str
          .replace(/[\r\t\n]/g, " ")
          .split("[[").join("\t")
          .replace(/((^|]])[^\t]*)'/g, "$1\r")
          .replace(/\t=(.*?)]]/g, "',$1,'")
          .split("\t").join("');")
          .split("]]").join("p.push('")
          .split("\r").join("\\'")
      + "');}return p.join('');"); 

Answer 2

CDATA.

Answer 3

Here's a version that uses arrays to concatenate strings (and checks if data is = null)

var _out = [];
// check if the data is null and create an empty object 
_out[_out.length] = ('if (typeof data === "undefined" || data == null){  data = {}; }   ');
_out[_out.length] = ('var out=[];');
_out[_out.length] = ("out[out.length] = ' " );
_out[_out.length] =   str.replace(/[\r\t\n]/g, " ")
   .replace(/'(?=[^%]*\]\])/g,"\t")
   .split("'").join("\\'")
   .split("\t").join("'")
   .replace(/\[\[=(.+?)\]\]/g, "'; out[out.length] = $1; out[out.length] = '")
   .split("\[\[").join("';")
   .split("\]\]").join("out[out.length] ='");

   _out[_out.length] = "'; return out.join('');";

var value = _out.join('');
return new Function("data", value );