Q:

Exclude child elements from functions with jquery

With the code below:
<p>Red red red red <a href="http://www.google.com"> this should be red alone</a> red red</p>

How would I change all 'red's to 'yellow's EXCEPT the one in the 'a' tag?
I've got this far:
$("p").html(function(i,event){
    return event.replace(/(red)/g,'yellow');
});

...which changes everything to yellow. I assume I need to add in an if clause saying something along the lines of:
if (event.target.tagName === "a")
{return false}

But I've tried dozens of things I've found on stackoverflow, to no effect. Any ideas?

A:

You can iterate the text nodes using contents(). This will not have any impact on any event listeners on the inner elements the way using html() would

$('p').contents().each(function() {
  if (this.nodeType === 3) {
    this.textContent = this.textContent.replace(/red/gi, function(match) {
      return match === 'Red' ? 'Yellow' : 'yellow'
    });
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Red red red red <a href="http://www.google.com">red</a> red red</p>

