title: JavaScript Regex: How to split html string into array of html elements and text nodes?
body: <p>For example, this html string:</p>
  
  <pre class="lang-html prettyprint-override"><code>Lorem &lt;b&gt;ipsum&lt;/b&gt; dolor &lt;span class="abc"&gt;sit&lt;/span&gt; amet,&lt;br/&gt;consectetur &lt;input value="ok"/&gt; adipiscing elit.
  </code></pre>
  
  <p>into this array: </p>
  
  <pre class="lang-js prettyprint-override"><code>[ 
    'Lorem ',
    '&lt;b&gt;ipsum&lt;/b&gt;',
    ' dolor ', 
    '&lt;span class="abc"&gt;sit&lt;/span&gt;', 
    ' amet,', 
    '&lt;br/&gt;', 
    'consectetur ', 
    '&lt;input value="ok"/&gt;', 
    'adipiscing elit.' 
  ]
  </code></pre>
  
  <p>Here is the example of html elements match:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const pattern = /&lt;([A-Z][A-Z0-9]*)\b[^&gt;]*&gt;(.*?)&lt;\/\1&gt;|&lt;([A-Z][A-Z0-9]*).*?\/&gt;/gi;
  let html = 'Lorem &lt;b&gt;ipsum&lt;/b&gt; dolor &lt;span class="abc"&gt;sit&lt;/span&gt; amet,&lt;br/&gt;consectetur &lt;input value="ok"/&gt; adipiscing elit.'
  let nodes = html.match(pattern);
  
  console.log(nodes)</code></pre>
  </div>
  </div>
  </p>
  
  <p>How to add the text nodes as well?</p>