I was in a need for an HTML beautifier, so I was searching around, but did not find one that came in a jQuery plugin package, so I used some script I found on the net, and made one. This is how you can use it:
$("#Textarea_id").htmlBeautifier ("<div> some text </div>
");
Or you can pre-process an HTML that comes from the server in the JSON as a string, let's say when you want to put it in a textarea and edit it.
$("#Textarea_id").htmlBeautifier (myJson.html);
Finally, here is the plugin:
(function($){
var level=0,
lSize=100,
finishTabifier = function(code, targetElm) {
code=code.replace(/\n\s*\n/g, '\n'); //blank lines
code=code.replace(/^[\s\n]*/, ''); //leading space
code=code.replace(/[\s\n]*$/, ''); //trailing space
targetElm.val(code);
level=0;
},
cleanHTML = function(code, targetElm) {
var i=0;
function cleanAsync() {
var iStart=i;
for (; i'!=code.charAt(point)) point++;
tag=code.substr(start, point-start);
i=point;
//if this is a special tag, deal with it!
if ('!--'==tag.substr(1,3)) {
if (!tag.match(/--$/)) {
while ('-->'!=code.substr(point, 3)) point++;
point+=2;
tag=code.substr(start, point-start);
i=point;
}
if ('\n'!=out.charAt(out.length-1)) out+='\n';
out+=tabs();
out+=tag+'>\n';
} else if ('!'==tag[1]) {
out=placeTag(tag+'>', out);
} else if ('?'==tag[1]) {
out+=tag+'>\n';
} else if (t=tag.match(/^<(script|style)/i)) {
t[1]=t[1].toLowerCase();
tag=cleanTag(tag);
out=placeTag(tag, out);
end=String(code.substr(i+1)).toLowerCase().indexOf('');
return tag;
},
ownLine=['area', 'body', 'head', 'hr', 'i?frame', 'link', 'meta', 'noscript', 'style', 'table', 'tbody', 'thead', 'tfoot'],
contOwnLine=['li', 'dt', 'dt', 'h[1-6]', 'option', 'script'],
lineBefore = new RegExp(
'^<(/?'+ownLine.join('|/?')+'|'+contOwnLine.join('|')+')[ >]'
),
lineAfter=new RegExp('^<(br|/?'+ownLine.join('|/?')+'|/'+contOwnLine.join('|/')+')[ >]'),
newLevel=['blockquote', 'div', 'dl', 'fieldset', 'form', 'frameset','map', 'ol', 'p', 'pre', 'select', 'td', 'th', 'tr', 'ul'],
newLevel=new RegExp('^]'),
placeTag = function(tag, out) {
var nl=tag.match(newLevel);
if (tag.match(lineBefore) || nl) {
out=out.replace(/\s*$/, '');
out+="\n";
}
if (nl && '/'==tag.charAt(1)) level--;
if ('\n'==out.charAt(out.length-1)) out+=tabs();
if (nl && '/'!=tag.charAt(1)) level++;
out+=tag;
if (tag.match(lineAfter) || tag.match(newLevel)) {
out=out.replace(/ *$/, '');
out+="\n";
}
return out;
};
// plugin definition
$.fn.htmlBeautifier = function(code, settings) {
// iterate and reformat each matched element
return this.each(function() {
cleanHTML(code, $(this));
});
};
})(jQuery);