Widget – Validate and Minify / Beautify XML

Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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

Code in Action

Document is


Beautified XML Document


Minified XML Document


Share the knowledge with others
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *