How To Format Xml In Javascript

by

Parsing and formatting XML data can be a common task when working with web APIs and other data sources. In this blog post, we will dive into how to parse, manipulate, and format XML using JavaScript.

Parsing XML with JavaScript

Before we can format an XML string, we have to parse it. JavaScript has a built-in method called DOMParser that we can use to parse an XML string into an XML DOM object.

First, let’s create an XML string:

const xmlString = `
<books>
  <book>
    <title>Book Title 1</title>
    <author>Author Name 1</author>
  </book>
  <book>
    <title>Book Title 2</title>
    <author>Author Name 2</author>
  </book>
</books>
`;

Now, let’s parse the XML string:

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "application/xml");

The xmlDoc variable now contains an XML DOM object that we can manipulate and query using JavaScript.

Formatting XML in JavaScript

JavaScript doesn’t have a built-in method to format XML as a string, but we can create a custom function to achieve that. The following function formatXml() takes an XML DOM object and formats it into a pretty-printed string:

function formatXml(xml, indent = 2) {
  const reg = /(&gt;)(&lt;)(\/*)/g;
  const pad = " ".repeat(indent);

  let result = xml.replace(reg, "$1\r\n$2$3");
  let formatted = "";

  let padCount = 0;
  result.split("\r\n").forEach(line =&gt; {
    let indentCount;
    if (line.match(/.+&lt;\/\w[^&gt;]*&gt;$/)) {
      indentCount = 0;
    } else if (line.match(/^&lt;\/\w/)) {
      padCount -= indent;
      indentCount = 0;
    } else if (line.match(/^&lt;\w([^&gt;]*[^\/])?&gt;.*$/)) {
      indentCount = 1;
    } else {
      indentCount = 0;
    }

    formatted += pad.repeat(padCount) + line + "\r\n";
    padCount += indent * indentCount;
  });

  return formatted.trim();
}

To use the formatXml() function, simply pass an XML string as the first argument:

const formattedXml = formatXml(xmlString);
console.log(formattedXml);

The output will be a formatted version of the input XML string, with each level of nesting indented by two spaces:

<books>
  <book>
    <title>Book Title 1</title>
    <author>Author Name 1</author>
  </book>
  <book>
    <title>Book Title 2</title>
    <author>Author Name 2</author>
  </book>
</books>

And that’s it! Now you know how to parse and format XML strings using JavaScript.