Targetting dynamic text inside paragraph
<p>I have some contact information, in which I wish to wrap the telephone number in a <code>&lt;a&gt;</code>, with the number in the href, for smartphone support.</p>

<p>The initial markup:</p>

<pre><code>&lt;p class="myClass"&gt;
    &lt;a href="mailto:mail@mail.com"&gt;mail@mail.com&lt;/a&gt;&lt;br /&gt;
    Phone: 88 88 88 88&lt;br /&gt;
    Fax: 88 88 88 87&lt;br /&gt;
&lt;/p&gt;
</code></pre>

<p>Now, the markup will remain the same, however the numbers and addresses will change. Therefore, my first idea was to start an anchor after "Phone", and close it before the second break tag, then get that value and stick it in the href. Sadly, it doesn't work that way, as the tag is closed immediately.</p>

<pre><code>$("p.myClass:contains('Phone')").each(function(){
    var org = "Phone: ";
    var rep = "Phone: &lt;a&gt;";

    $(this).html( $(this).html().replace(org, rep) );
    $("&lt;/a&gt;").insertBefore("p.myClass:contains('Phone') br:nth-child(3)");
});
</code></pre>

<p>So what I really want to end up with, is to have the phone number wrapped, like so:</p>

<p><code>Phone: &lt;a href="tel:{number}"&gt;{number}&lt;/a&gt;</code></p>

<p>,where {number} is a dynamic value, and the rest of the markup remains the same. I'm looking for a solution that actually works, and which preferably cleaner than the mess I made above. :) Any ideas?</p>
