title: Get string, extract id, and wrap text
body: <p>If I have the HTML below:</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-html lang-html prettyprint-override"><code>&lt;p&gt; some random text :) video?v=E_LkHrerwe4lnhhnrCbo another video?v=567ghf564_-56e&lt;/p&gt;
  &lt;p&gt; some2 random2 text2 video?v=rt5y5yvbn5y&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Using jQuery how can I get the ID which is 8 characters after <code>video?v=</code> so for the first one the id will be <code>E_LkHrer</code>, then wrap the string with a <code>&lt;span id="'+8charID+'"&gt;&lt;/span&gt;</code>? Thus, for the HTML above it will return</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-html lang-html prettyprint-override"><code>&lt;p&gt; some random text :) &lt;span id="E_LkHrer"&gt;video?v=E_LkHrerwe4lnhhnrCbo&lt;/span&gt; another &lt;span id="567ghf56"&gt;video?v=567ghf564_-56e&lt;/span&gt;&lt;/p&gt;​
  &lt;p&gt; some2 random2 text2 &lt;span id="rt5y5yvb"&gt;video?v=rt5y5yvbn5y&lt;/span&gt; &lt;/p&gt;​</code></pre>
  </div>
  </div>
  </p>
  
  <p>ATM I have <a href="http://jsfiddle.net/SNkv8/" rel="nofollow noreferrer">this</a>, but I don't know where to go from there
  and I know the jQuery doesn't have much to do with what I need I was just testing if I could try stripping an id from one <code>video?v=</code></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>$("p").each(function() {
    var content = $(this).html();
    var getwatch = content.split('video?v=');
    $(this).after(getwatch[1].substring(0, 8));
  });​</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt; some random text :) video?v=E_LkHrerwe4lnhhnrCbo another video?v=567ghf564_-56e&lt;/p&gt;
  &lt;p&gt; some2 random2 text2 video?v=rt5y5yvbn5y&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>