Parsing XML in JavaScript

To parse XML in JavaScript, you can use DOMParser API, which converts XML strings into a structured Document Object Model (DOM). The DOM model enables easy traversal and manipulation of XML data. Additionally, you can use third-party libraries like jQuery or XML parsers, such as SAX, xml2js, and libxmljs. In this JavaScript Parse XML example, we use the parseFromString() method to parse an XML string. Below are additional examples of parsing XML in JavaScript with detailed descriptions. Click Execute to run the JavaScript Parse XML Example online and see the result.
Parsing XML in JavaScript Execute 
const xmlString = `
<Order>
  <Customer>Jack</Customer>
  <Rating>6.0</Rating>
</Order>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const customer = xmlDoc.querySelector("Customer").textContent;

console.log("Customer:", customer);
Updated: Viewed: 7560 times

What is JavaScript?

JavaScript is a scripting language used both on the client side (in browsers) and on the server side (NodeJs). JavaScript is the main programming language for the web, enabling you to create interactive web pages. It can modify HTML and CSS, send requests, and calculate and process data using JavaScript. JavaScript often uses the built-in DOMParser object to parse XML. This object allows you to parse XML data, creating a DOM structure for easy access to elements and attributes.

What is XML?

XML (Extensible Markup Language) is a flexible language for creating and manipulating documents for easy use in various digital domains, such as web development. XML is called extensible because it allows custom markup, and documents are composed of entities, elements, declarations, comments, and processing instructions.

XML Example
<Order>
  <Id>14</Id>
  <Customer>Jason</Customer>
  <Price>29.00</Price>
</Order>

JavaScript Parse XML Examples

The following are examples of XML parse in JavaScript:

Parse XML using DOMParser API

DOMParser is a JavaScript API introduced to parse XML or HTML, creating a DOM representation of the parsed document. The main method is parseFromString(), which takes a string of XML data and returns a DOM object representing the parsed document.

JavaScript Parse XML with DOMParser Example
const xmlString = `
<Request>
  <Login>Leo</Login>
  <Password>pass123</Password>
</Request>
`;

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, "text/xml");
const login = xmlDoc.querySelector("Login").textContent;

console.log("Login:", login);

// output: Login: Leo

Parse XML with attributes

The following is an example of parsing XML with nested elements using the DOMParser API. The getAttribute() method is used to get attribute values.

Parse XML with Attributes Example
const xmlData = '<fruit name="apple" color="red" taste="sweet" />';

const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlData, "text/xml");

const fruit = xmlDoc.getElementsByTagName("fruit")[0];
const name = fruit.getAttribute("name");
const color = fruit.getAttribute("color");
const taste = fruit.getAttribute("taste");

console.log(name);
console.log(color);
console.log(taste);

// output: 
// apple 
// red
// sweet

Parse XML with third-party libraries

Parsing XML with third-party libraries often provides more flexibility, ease of use, and additional features than using built-in XML parsers. Below is an example of parsing an XML string using the "fast-xml-parser" library:

Parse XML with fast-xml-parser Example
const parser = require('fast-xml-parser');

const xmlData = `
<Order>
  <Customer>Jack</Customer>
  <Rating>6.0</Rating>
</Order>
`;

const options = {
  ignoreAttributes: false,
  attributeNamePrefix: '@',
  textNodeName: '#text',
  trimValues: true,
};

const jsonObj = parser.parse(xmlData, options);

console.log(jsonObj.Order.Customer)

See also

JavaScript Parse XML Related API examples and articles