HTMLbeautifier for AJAX
a common JavaScript problem is, if you always work with runtime generated HTML (which is normal in AJAX) you have no real control over it. so handgestrickt made a layer that shows the documents HTML (document.body.innerHTML). for better overview and readability we wanted it indented and colourized like in a source code editor. this is why we wrote HTMLbeautifier. it needs Prototype.js' String.escapeHTML() function and uses our splitFix() function we posted earlier.
<html>
<head>
<title>HTMLbeautifier example</title>
<script type="text/javascript" src="prototype.js"></script>
<style type="text/css">
#debug {
position: fixed;
bottom: 0px;
right: 0px;
margin: 0px;
padding: 0px;
display: block;
width: 50%;
height: 300px;
overflow: auto;
border: 1px solid red;
background-color: white;
z-index: 1000;
font-size: 13px;
line-height: 17px;
}
#debug .tag {
color: blue;
}
#debug .attribute {
color: red;
}
#debug .comment {
color: #00aaaa;
}
</style>
<script type="text/javascript">
var foo = {
showDebug: function() {
$('debug').innerHTML = this.HTMLbeautify(document.body.innerHTML,'debug');
$('debug').style.display = 'block';
},
HTMLbeautify: function(HTML,id) {
var result = '';
HTML = HTML.replace(/\r?\n/g,'');
HTML = HTML.replace(/\s+</g,'<');
HTML = HTML.replace(/>\s+/g,'>');
eval("HTML = HTML.replace(/<pre[^>]+id=[\\"\']?"+id+"[\\"\']?.*?<\/pre>/i,'');");
var pieces = this.splitFix(HTML,/(<[^>]+>)/);
var indent = 0;
for(var a=0;a<pieces.length;a++) {
if(pieces[a].search(/<\/\w/) != -1) indent--;
if(pieces[a] != '') {
var piece = pieces[a].escapeHTML();
if(piece.search(/<\w/) != -1) {
piece = piece.replace(/(\s)(\w+=)([\"\'\w])/g,'<span class="attribute"></span>');
piece = piece.replace(/(<\w+)/g,'<span class="tag"></span>');
piece = piece.replace(/(\/?>)/g,'<span class="tag"></span>');
}
else if(piece.search(/<\/\w/) != -1) piece = '<span class="tag">'+piece+'</span>';
else if(piece.search(/<!--.*-->/) != -1) piece = '<span class="comment">'+piece+'</span>';
result += ((indent > 0) ? this.str_repeat(' ',indent) : '')+piece+"<br />";
}
if(
pieces[a].search(/<[a-zA-Z]/) != -1 &&
pieces[a].search(/<(?:and|area|atop|audioscope|base|basefont|bgsound|br|choose|col|embed|frame|hr|img|input|isindex|keygen|left|limittext|link|meta|nextid|of|over|param|range|right|spacer|spot|tab|wbr)\W/i) == -1
) indent++;
}
return result;
},
splitFix: function(string,regexp) {
var matches = [];
if(!document.all || window.opera) matches = string.split(regexp);
else {
var delim = '<#%fuckIE!>'; //lol
var prnth = String(regexp).replace(/\(\?/g,'');
prnth = prnth.replace(/[^\(]+/g,'').length;
var repl = delim;
for(var a=0;a<prnth;a++) repl += '$<span>'</span>+(a+1)+delim;
eval("string = string.replace("+regexp+"g,repl);");
matches = string.split(delim);
}
return matches;
},
str_repeat: function(string,length) {
var result = '';
for(var a=0;a<length;a++) result += string;
return result;
}
}
</script>
</head>
<body onload="foo.showDebug();">
<!--...Your HTML here...-->
<pre id="debug"><!--show debug information here...--></pre>
</body>
</html>