Friday, November 6, 2009

JavaScript HTML to XHTML Converter for Yahoo's YUI 2 Rich Text Editor

The other day after installing Yahoo's Rich Text Editor, I noticed that the output of the editor was badly formed HTML that wouldn't validate on my XHTML site. So, since I'm a bit anal, I wondered if there was a way to convert the output. After only finding a few convoluted and licenced solutions, I figured it wouldn't be too hard to do it myself. So here it is in JavaScript.


function convertToXHTML(html){

var raw1 = html.split("<"); var xhtml = ""; var tags = ""; //Make Tags Lower Case and make sure that the tags are properly closed for(var i in raw1){ if(raw1[i].indexOf(">") != -1){
var raw2 = raw1[i].split(">");
var tagName = (raw2[0].indexOf(" ") > -1) ? raw2[0].split(" ")[0] : raw2[0];
tagName = tagName.replace(/\//g, "");
var endSlash = (html.indexOf("/" + tagName) == -1 ) ? " /" : "";
raw2[1] = (raw2[1]) ? raw2[1] : "";

if(raw2[0] != "" && raw2[0]){
var begin = "<" + raw2[0].replace(eval("/" + tagName + "/"), tagName.toLowerCase()); xhtml += begin + endSlash + ">" + raw2[1];
}
}
else{
xhtml += raw1[i];
}
}

//Make sure that the attributes listed below use quotes
xhtml = xhtml.replace(/align=center/gi, 'align="center"');
xhtml = xhtml.replace(/align=left/gi, 'align="left"');
xhtml = xhtml.replace(/align=right/gi, 'align="right"');

//Make sure the attributes are separated by a space
var arr = xhtml.match(/"[a-z]+="/gi);
for(var i in arr){
if(!isNaN(i)){
xhtml = xhtml.replace(eval("/" + arr[i] + "/gi"), '" ' + arr[i].slice(1));
}
}
return xhtml;

}



Unfortunately, this isn't a 100% fix. The Yahoo Editor sometimes nests the tags in an invalid way, and I have yet to correct for that. I also haven't tested this too much yet; so, there could be quite a few other things that this isn't designed to fix.

This is specifically to convert the output of Yahoo's text tool. This function fixes glitches that only this tool creates, and does not account for errors that you or another program might export.