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 -->