Find a string after a special character, move it and wrap a div around it
<p>I have this HTML code, for example:</p>

<pre><code>&lt;div class="new"&gt;
 &lt;div class="in"&gt;&lt;/div&gt;
 &lt;label&gt;some text now watch this | the-thing&lt;/label&gt;
&lt;/div&gt;
</code></pre>

<p>I want to:</p>

<ol>
<li>find the text thats after the "|" charecter</li>
<li>move it outside the label</li>
<li>wrap a span tag around it</li>
</ol>

<p>i know how to do the 2nd and 3rd part, but i dont understand how to manipulate the string to begin with</p>

<p>thanks in advance</p>
