title: Extracting Partial Text (before the <br>) using getElementsByClassName
body: <p>I'm having trouble grabbing the specific piece of text out of the Class attribute. The text has both a name and an ID. Both are important to me, but I need them split and placed in separate arrays.</p>
  <pre><code>&lt;span class=&quot;locDescription&quot;&gt;&lt;b&gt;Name1&lt;/b&gt;&lt;br&gt; ID1&lt;/span&gt;
  &lt;span class=&quot;locDescription&quot;&gt;&lt;b&gt;Name2&lt;/b&gt;&lt;br&gt;ID2&lt;/span&gt;
  &lt;span class=&quot;locDescription&quot;&gt;&lt;b&gt;Name3&lt;/b&gt;&lt;br&gt; ID3&lt;/span&gt;
  </code></pre>
  <p>My first thought was to pop off the last item in each element (convert to string or list, delimit by a &quot; &quot; and pop off the last item). But, I realized that there is not always a space between the Name and ID so that doesn't work.</p>
  <p>My second thought was to use the OuterHTML and grab everything before the <code>&lt;br&gt;</code> then do the same with the ID after the <code>&lt;br&gt;</code>.</p>
  <p>However, this is what the returned text looks like which using outerHTML:</p>
  <pre><code>&quot;&amp;lt;span class=\&amp;quot;locDescription\&amp;quot;&amp;gt;&amp;lt;b&amp;gt;Name1&amp;lt;/b&amp;gt;&amp;lt;br&amp;gt;ID1&amp;lt;/span&amp;gt;&quot;
  </code></pre>
  <p>I could not find a way to simply grab before the <code>&lt;br&gt;</code>... that would seem like something one could do easily... maybe I'm missing it.</p>
  <p>In lieu of that, I attempted to use indexing to grab the text:</p>
  <pre><code>var product_name = []
  var elements = document.getElementsByClassName('locDescription');
  for(var i=0; i&lt;elements.length; i++) product_name.push(elements[i].outerHTML)
  
  test1 = product_name[0].indexOf('&amp;gt;&amp;lt;b&amp;gt;')
  
  console.log(test1)
  </code></pre>
  <p>That came back as -1 so it's not interpreting the garble in that text. Any idea of how I can accomplish this? I think I'm going down a rabbit hole at the moment.</p>