title: jQuery: replace text inside link but not in tags
body: <p>I've got a html:</p>
  
  <pre><code>&lt;div class="sth-key"&gt;
      &lt;p&gt;
          key here &lt;span class="keyify"&gt;and here a key&lt;/span&gt;
          &lt;a href="/key-anything" title="dont change that key"&gt;and a key&lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;
          and the final &lt;strong&gt;key&lt;/strong&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and I want to replace word 'key' that is not inside attributes, with 'pencil', so the output would look like this:</p>
  
  <pre><code>&lt;div class="sth-key"&gt;
      &lt;p&gt;
          pencil here &lt;span class="keyify"&gt;and here a pencil&lt;/span&gt;
          &lt;a href="/key-anything" title="dont change that key"&gt;and a pencil&lt;/a&gt;
      &lt;/p&gt;
      &lt;p&gt;
          and the final &lt;strong&gt;pencil&lt;/strong&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried to do this with</p>
  
  <pre><code>$('.sth-key p').each(function(){
      $(this).html($(this).html().replace('key','pencil'));
  });
  </code></pre>
  
  <p>or with text()... but it doesn't work.</p>