In any situation, the application receives HTML text as a string and programmatically we need to manipulate the HTML to get the values. There are many ways to parse HTML strings.
In this article, I am going to discuss how many different ways, we can parse HTML and get the correct value.
The DOMParser interface provides the ability to parse XML or HTML source code from a string into a DOM Document. DOMParser is very generic and you do not need to install any npm module to use it. You can check the referrance as well from here.
You can manipulate the HTML DOM by the runtime and create or modify values accordingly.
DOMParser will not work if you want to parse HTML without a window object. It requires the browser window object to initialize.
Using jQuery as wll you can parse and manipulate the HTML string. You can install JQuery as a CDN or using npm package and import it in your angular componet.
declare const $;
$ will have the jquery object and use parseHTML() Method in jQuery is used to parses a string into an array of DOM nodes.
But as with DOMParser, this JQuery approach can not be used where the browser window object is not present. You can use this approach on the client-side only.
Cheerio is one of the great libraries to parse your HTML or XML string with or without browser presence. Cheerio mostly used in NodeJS or serverside rendering (SSR) or prerendering scenario.
Many CMS created HTML, which can be manipulated and updated the page title or meta tag based on dynamic content, while creation of prerendering or static web content. To use Cheerio in an angular application you do need to install the following libraries.
npm i cheerio --save
npm i @types/cheerio --save
npm i stream --save
after installation, you can use the Cheerio in the following way.
Recurrsive way to get the text value from an HTML DOM.
You can use the code snippets to extract text from a particular HTML string. Hope you like the article and for any suggestion please comments below.