How do I split HTML / XML with Regex for only siblings with JavaScript?

Question

I have some text:

<p>I hope that this works!</p> <p>Now that this is in, let's see!</p><p>I hope that bold <strong>works too</strong>!</p>
<p>Will this works</p><ol><li>First item</li><li>Second item</li><li>Third item</li></ol>

I want to split it into:

<p>I hope that this works!</p>

and

<p>Now that this is in, let's see!</p><p>I hope that bold <strong>works too</strong>!</p>

and

<ol><li>First item</li><li>Second item</li><li>Third item</li></ol>

I don't want to split on any of the child elements, just the siblings?

Answer 1

The preferred way to parse an X/HTML-alike string is by using the DOMParser API

const str = `<p>I hope that this works!</p>
  <p>Now that this is in, let's see!</p>
  <p>I hope that bold <strong>works too</strong>!</p>
  <p>Will this works</p>
  <ol><li>First item</li><li>Second item</li><li>Third item</li></ol>`;

const doc = new DOMParser().parseFromString(str, "text/html");

console.log(doc.body.children)

Or like this, to map the outerHTML as an Array of strings

const str = `<p>I hope that this works!</p>
  <p>Now that this is in, let's see!</p>
  <p>I hope that bold <strong>works too</strong>!</p>
  <p>Will this works</p>
  <ol><li>First item</li><li>Second item</li><li>Third item</li></ol>`;

const doc = new DOMParser().parseFromString(str, "text/html");
const children = doc.body.children;
const chStrArr = [...children].map(el => el.outerHTML);

console.log(chStrArr);

• https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
• RegEx match open tags except XHTML self-contained tags