Search code examples
javascripthtmlplaintext

Javascript how to split plain text html elements into an array?

If I have a string containing html elements, what would be an efficient way of creating an array of the sibling html elements?

Trying to use indexOf with the first letter of the opening tag " <" and the last one of the closing tag becomes complicated since there can be child elements.

Simple example:

<p>Hello there</p>

<h1>Thank you</h1>

Thanks in advance!

Solution

  • Using regex with js split method we can extract.

    Check my code

    let a = `<p>Hello there</p><p>How r you?</p>

<h1>Thank you</h1>`
let b = a.split(/<[a-zA-Z0-9]*>([^<.*>;]*)<\/[a-zA-Z0-9]*>/gmi).filter(x=>x.trim() !== '')
console.log(b) //['Hello there', 'How r you?', 'Thank you']