title: Wrap bold/strong tags around first occurrence of keyword inside content fragment?
body: <p>I'm looking for the simplest way to wrap bold tags around the first appearance of a predefined keyword phrase, when that phrase does not appear in a heading tag or as an html attribute value. After the first match is found, exits the routine.</p>
  
  <p>For example, if the keyword is "blue widgets", and the content was:</p>
  
  <pre><code>blue widgets and accessories for blue widgets can be found here
  </code></pre>
  
  <p>Then after the routine filters the content, it would return:</p>
  
  <pre><code>&lt;b&gt;blue widgets&lt;/b&gt; and accessories for blue widgets can be found here
  </code></pre>
  
  <p>However, if the first occurrence of the word "blue widgets" were in an attribute or a heading tag, it would skip over those and go to the next one. For example,</p>
  
  <pre><code>&lt;img src="foo.png" title="A site about blue widgets" alt="blue-widget" /&gt;
  &lt;h2&gt;This is a site about blue widgets&lt;/h2&gt;
  &lt;p&gt;We've got lots of blue widgets and blue widget accessories...
  </code></pre>
  
  <p>In the above content, only the appearance of the keyword in the sentence "We've got lots of <strong>blue widgets</strong> and blue widget accessories"... would be bolded.</p>
  
  <p>Can someone give me an example of how this can be done?</p>