How to make Resig's micro-templates XHTML compliant?

Question

I have been experimenting with John Resig's micro-template, which works great. However, the mark-up will not pass the XHTML 1.0 Transitional validation test. (Among other things, id attributes yield errors.)

Replacing tags identifiers <, > with [[,]], passes validation. Thus, I created a js script which at load time (jQuery document ready) converts the square brackets back to regular markers. This works fine in FF, but not in IE, Chrome, etc.

Scripts embedded within CDATA tags validate as well.

Question: Is there a way to insert micro-template in a script and still pass XHTML validation? My idea was to remove the CDATA tags once the page has been loaded. But there are probably smarter ways. (Note: I'd prefer not to inject HTML via js since the mark-up will be difficult to maintain.)

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

TIA for any hints.

Answer 1

Why are you going through the trouble of changing all the methods that use the micro-template, rather than changing the micro-template itself? It seems like a waste of processing to load everything a certain way, and then change it all just so it's compatible with the script.

Why not modify the original script to use [[ tags instead of the <% tags originally provided?

This is how it identifies the templates

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('');");

Now change the <% to [[ and >% to ]]

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('');");