I searched all over for a simple solution to pretty print xml with JavaScript. I saw several answers in StackOverflow, but I just wanted a straight answer that I could just paste on my page and voila! but no. I couldn't find one.
Some people suggested using Google Prettify and is fine but prettify does not handle indentation and I had to escape the < > characters in my xml, and I just wanted to embed the xml in the page and have javascript handle the rest.
For the indentation some people recommended another javascript called vkBeautify but I just wanted a quick snipped of how to do it, well in the end my friend Joseph and I just put together a quick sample.
It was very simple but I tought there should be a lot of people with something like that already done.
We embed our xml like this:
<script type="text/xml" id="xml2"><data><test>10</test><test>20</test></data></script>
Indentation is handled with the vkBeautity.
var text = textToHtml(vkbeautify.xml(document.getElementById('xml2').innerHTML));Then we needed a function to do the escaping for us:
var pr_amp = /&/g;
var pr_lt = /</g;
var pr_gt = />/g;
var pr_quot = /\"/g;
/** escapest html special characters to html. */
function textToHtml(str) {
return str.replace(pr_amp, '&')
.replace(pr_lt, '<')
.replace(pr_gt, '>');
};And the rest is just using the google prettify:
<body onload="updateText(),prettyPrint()" bgcolor="white">
<pre class="prettyprint" id="xml">
</pre>
</body>
NOTE: this solution still has a problem with carriage returns. So indentation is yet to be fixed
UPDATE: I have fixed the issue. For some reason the IE gets rid of the '\n' in the string. So your have to change them for a <BR>
function updateText() {
var text = textToHtml(vkbeautify.xml(document.getElementById('xml2').innerHTML));
var expr = new RegExp("\n","g")
document.getElementById('xml').innerHTML=text.replace(expr,'<br>');
}UPDATE2:
For IE you might need to add this after the doctype:
<!doctype html><meta http-equiv="X-UA-Compatible" content="IE=Edge">