title: how to replace all matching plain text strings in string using javascript (but not tags or attributes)?
body: <p>imagine this html on a page</p>
  
  <pre><code>&lt;div id="hpl_content_wrap"&gt;
  &lt;p class="foobar"&gt;this is one word and then another word comes in foobar and then more words and then foobar again.&lt;/p&gt;
  &lt;p&gt;this is a &lt;a href="http://foobar.com" data-bitly-type="bitly_hover_card"&gt;link with foobar in an attribute&lt;/a&gt; but only the foobar inside of the link should be replaced.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>using javascript, how to change all 'foobar' words to 'herpderp' without changing any inside of html tags?</p>
  
  <p>ie. only plain text should be changed.</p>
  
  <p>so the successful html changed will be</p>
  
  <pre><code>&lt;div id="hpl_content_wrap"&gt;
  &lt;p class="foobar"&gt;this is one word and then another word comes in herpderp and then more words and then herpderp again.&lt;/p&gt;
  &lt;p&gt;this is a &lt;a href="http://foobar.com" data-bitly-type="bitly_hover_card"&gt;link with herpderp in an attribute&lt;/a&gt; but only the herpderp inside of the link should be replaced.    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>