Hello friends, today I am going to explain how you can create a website widget that can validate, beautify, or minify the XML content.
For validating the document we use DOMParser() and to beautify or minify we used a custom JS, VKBeautify.
The DOMParser processes a string and converts into a DOM document through its parseFromString() based on MIME type, example: text/xml.
Code Snippet
var dParser = new DOMParser();
var docDOM = dParser.
parseFromString(
"<root><students><student><name>Student 1</name></student><student><name>Student 2</name></student></students></root>"
, "text/xml");If the conversion fails, then it returns an error document with parsererror element.
Now let’s try to build a widget that can validate a document and if it is valid then able to minify and beautify the document.
Widget – Code
<!--
Author: Ankur Sachdeva
Organization: Hanumantey Software Solutions Private Limited
Website: https://hanumanteysoftwaresolutions.com
Author Thanks: VKBeautify
-->
<!--Script for validating XML and Displaying Errors-->
<script>
function validateXML(xML)
{
//Create DOM Parser Object
var dParser = new DOMParser();
//Parse the XML String
var docDOM = dParser
.parseFromString(xML,
"text/xml");
//Check if we have parsing errors
var err = (docDOM
.getElementsByTagName(
'parsererror').length ?
(new XMLSerializer())
.serializeToString(
docDOM) : "all good"
);
//If there is parsing errors then display it
if (err != "all good")
{
//Set flag to false
isValid = false;
//Get only the error information
//Skip rest of the document returned as parsing result
errTxt = (new DOMParser())
.parseFromString(err,
"text/xml")
.getElementsByTagName(
"parsererror")[0]
.innerText
.replace(
"Below is a rendering of the page up to the first error.",
"")
.replace(
"This page contains the following errors:",
"")
;
//Display the error message
document.getElementById(
"prettyXML")
.innerHTML ="<font size+=4>" + errTxt + "</font>";
}
}
</script>
<!--Referring VKBeautify-->
<script
src="https://hanumanteysoftwaresolutions.com/assets/js/vkbeautify.js">
</script>
<!--Creating a TextArea to take input from user-->
<textarea id="txtRawXML" placeholder="Input XML Text Here" name="txtRawXML" cols="50"
rows="7"></textarea>
<!--Button to Submit Details-->
<input type="button" onclick="beautify()" value="Do the Magic" />
<!--Section to display wether document is valid or not-->
<h3>Document is <span id="documentValid"></span></h3>
<br />
<!--Section to display Beautified version of the document-->
<h3>Beautified XML Document</h3>
<span id="prettyXML" name="prettyXML"></span>
<!--Section to display Minified version of the document-->
<br />
<h3>Minified XML Document</h3>
<span id="minifyXML" name="minifyXML"></span>
<!--Script for Button Call-->
<script>
//Defining Variables
var isValid;
var errTxt;
//Function to Beautify and Minify if
//the document is valid
function beautify()
{
//Let's assume the document is valid
isValid = true;
//Hold the input text in rawXML variable
var rawXML = document
.getElementById("txtRawXML")
.value;
//Calling the validate function
//Remember it will also set the
//isValid flag to fall if the document
//is not valid.
validateXML(rawXML);
//Let's get other elements into variable
var validDocElement = document
.getElementById(
"documentValid");
var prettyElement = document
.getElementById("prettyXML");
var minfyElement = document
.getElementById("minifyXML");
//If the document is valid
if (isValid)
{
//Display the beautified version
prettyElement.innerText =
vkbeautify.xml(rawXML);
//Display the minified version
minfyElement.innerText =
vkbeautify.xmlmin(rawXML);
//Tell the user the document is Valid
validDocElement.innerHTML =
"<font color=green>VALID</font>";
}
else
{
//No Beautified version
prettyElement.innerText = "";
//No Minified version
minfyElement.innerText = "";
//Tell the user the document is not valid
validDocElement.innerHTML =
"<font color=red>INVALID</font><br><strong>Error:</strong><br>" +
errTxt;
}
}
</script>
<!--
Author: Ankur Sachdeva
Organization: Hanumantey Software Solutions Private Limited
Website: https://hanumanteysoftwaresolutions.com
Author Thanks: VKBeautify
-->