Table of Contents

URL: https://www.progressiverobot.com/js-domparser/

I was playing with the WP Rest API plugin to access content from a WordPress blog into an Ionic 2 app. The WP Rest API returns an HTML string for the content of posts, which can make it hard to deal with. Fortunately though, the <^>DOMParser<^> Web API makes it easy to parse html strings into a fully formed DOM.

First you instantiate a new DOMParser instance and pass it your HTML string using <^>parseFromString()<^>. For this example, let's say that we stored the HTML string in a variable called htmlContent:

				
					
let parser = new DOMParser();

let parsedHtml = parser.parseFromString(htmlContent, 'text/html');

And now <^>parsedHtml<^> is a DOM object that can be interacted with. Let's extract a few things from it:

				
					
// The src of the first image:

let firstImg = parsedHtml.images[0].src;



// The li elements of the second ul element:

let liElements = parsedHtml.getElementsByTagName("ul")[1].children;

Taking the second example with <^>li<^> elements, let's go a bit further and populate an array with the inner HTML of each element:

				
					
let rawLiElements = parsedHtml.getElementsByTagName("ul")[1].children;

let liElements = [];

👉 DOMParser is still experimental, so its implementation is subject to change and support can be limited.