title: How do I merge two adjacent <span> together if they have the same class?
body: <p>Currently I have a <code>&lt;p&gt;</code> with processed matched word that are wrapped by <code>&lt;span class="matched"&gt;</code>. </p>
  
  <blockquote>
    <p>Hello, how is your day today?</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.matched{
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Hello, &lt;span class="matched"&gt;how&lt;/span&gt; is your &lt;span class="matched"&gt;day&lt;/span&gt;&lt;span class="matched"&gt; today&lt;/span&gt;?&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>to </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-css lang-css prettyprint-override"><code>.matched{
    font-weight: bold;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;Hello, 
  &lt;span class="matched"&gt;how&lt;/span&gt; is your &lt;span class="matched"&gt;day today&lt;/span&gt;?&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The word <strong>how</strong>, <strong>day</strong>, and <strong>today</strong> are the matched word that are wrapped in <code>&lt;span class="matched"&gt;</code> and how do I merge a <code>&lt;span class="matched"&gt;</code> tag when its next html element also has a <code>&lt;span class="matched"&gt;</code> into one single ''? </p>
  
  <p>Thank you very much guys~ =) </p>
  
  <p>Edit: <em>This doesn't change the result but I want my source to look better.</em></p>