Elegant XML Pretty Printing with XSLT and Client-Side JavaScript

Introduction

In web development, displaying XML data in a human-readable format often requires pretty printing, which involves adding indentation and line breaks to compact XML strings. This article delves into a robust method using XSLT transformations implemented with native JavaScript APIs, based on reorganizing and refining insights from online Q&A data.

Core Method: XSLT Transformation

XSLT (Extensible Stylesheet Language Transformations) provides a standard way to process XML documents. For pretty printing, an identity transformation can be employed, which copies all nodes and attributes, combined with the <xsl:output indent="yes"/> instruction to automatically indent the output. This method relies on the standard features of XML and XSLT, capable of handling complex structures effectively.

The key XSLT stylesheet is as follows:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>
    <xsl:template match="node()|@*">
      <xsl:copy>
        <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>
</xsl:stylesheet>

JavaScript Implementation

In client-side JavaScript, this can be implemented using the DOMParser, XSLTProcessor, and XMLSerializer APIs. Below is a sample function rewritten based on core concepts:

function prettifyXml(sourceXml) {
    // Parse the XML string
    var xmlDoc = new DOMParser().parseFromString(sourceXml, 'application/xml');
    
    // Define the XSLT stylesheet as a string
    var xsltString = [
        '<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">',
        '  <xsl:output omit-xml-declaration="yes" indent="yes"/>',
        '  <xsl:template match="node()|@*">',
        '    <xsl:copy><xsl:apply-templates select="node()|@*"/></xsl:copy>',
        '  </xsl:template>',
        '</xsl:stylesheet>'
    ].join('\n');
    
    // Parse the XSLT
    var xsltDoc = new DOMParser().parseFromString(xsltString, 'application/xml');
    
    // Create and apply the XSLT processor
    var xsltProcessor = new XSLTProcessor();
    xsltProcessor.importStylesheet(xsltDoc);
    var resultDoc = xsltProcessor.transformToDocument(xmlDoc);
    
    // Serialize back to string
    return new XMLSerializer().serializeToString(resultDoc);
}

Usage example:

console.log(prettifyXml('<root><node/></root>'));
// Outputs: <root>\n  <node/>\n</root>

Cross-Browser Considerations

It's important to note that the indent="yes" attribute in <xsl:output> may not be supported in all browsers, particularly Firefox. In such cases, alternative methods or polyfills can be considered to address compatibility issues, such as adding fallbacks or using plain JavaScript functions.

Alternative Approaches

Other techniques include custom JavaScript functions using regular expressions (as seen in some answers) or third-party libraries like Google Code-Prettify. However, the XSLT method is more standards-compliant and better handles complex XML. These alternatives can serve as supplementary references, but the primary recommendation is to use XSLT for stability and completeness.

Conclusion

For client-side XML pretty printing, leveraging XSLT with JavaScript's native APIs offers a reliable and efficient solution, though browser compatibility should be tested. This approach ensures clean, readable XML output in web applications, enhancing developer workflows and user experience.