title: jQuery - Replacing partial text inside of a link
body: <p>I am trying to replace the first 5 letters in all links on that page that contain <code>#OFN#</code> in the first 5 letters of the link with an image to replace <code>#OFN#</code> text, but want to retain the rest of the link text.</p>
  
  <p>Here's what I'm using so far...</p>
  
  <pre><code>$(document).ready(function() {
      $("a:contains('#OFN#')").each(function() {
          var calSubject = $(this).text().substring(5);
          $(this).replaceWith("&lt;img src='/images/ofn_bullet.gif' width='10' height='10' style='width: 10px; height: 10px; border: none;' /&gt;" + calSubject);
      });
  });
  </code></pre>
  
  <p>But this approach removes the <code>&lt;a&gt; tag</code> completely from the text.  How can I do this without removing the <code>&lt;a&gt; tags</code></p>
  
  <p>Here's an example HTML of the link:</p>
  
  <pre><code>&lt;a href="#" onclick="eventDisplay('980','4/18/2013')"&gt;#OFN# 2013 Midwest Regional Meeting&lt;/a&gt;
  </code></pre>
  
  <p>I tried using <code>.children()</code> but that doesn't seem to work either.  What am I doing wrong here?</p>