Wykluczanie elementów dziecko od funkcji z jQuery

Question

W poniższym kodzie:

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

Jak bym zmienić wszystkie „Red do” żółtej, z wyjątkiem jednego w «a» tag?

mam tak daleko:

$("p").html(function(i,event){ 
    return event.replace(/(red)/g,'yellow'); 
}); 

... która wszystko zmienia się na żółty. Zakładam, że muszę dodać w klauzuli if mówi coś w rodzaju:

if (event.target.tagName === "a") 
{return false} 

Ale próbowałem dziesiątki rzeczy znalazłem na stackoverflow, bez skutku. Jakieś pomysły?

Answer 1

Brudny sposób specyficzny i dlatego też nie będzie działać, jeśli wielu <a> w <p> na przykład, ale jeśli działa w <p> istnieje tylko jeden <a>.

Najlepszym sposobem jest znalezienie właściwego wyrażenia regularnego.

var aContent = $('p > a')[0].outerHTML; 
 

 
$('p').html(function(i,event) { 
 
    var parts = event.split(aContent); 
 

 
    for (var i, l = parts.length; i<l; i++) { 
 
     parts[i] = parts[i].replace(/red/ig, 'yellow'); 
 
    } 
 

 
    return parts.join(aContent); 
 
});

<p>Red red red red <a href="http://www.google.com">red</a> red red</p> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

Można iteracyjne węzły tekstowe używając contents(). Nie będzie to miało żadnego wpływu na wszelkich detektorów zdarzeń na elementach wewnętrznych sposób korzystania html() byłoby

$('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>

Answer 3

wziąłem inną drogę: Separacja dziecka, wymienić swoje miejsce z tekstem losowej wykonywania naszych zamień jak zwykle, a następnie zastąp ten losowy ciąg naszym kodem potomnym.

var para = $("p"); 
 
var child = para.children()[0]; 
 
var text = child.outerHTML; 
 

 
para.find(child).replaceWith("zzzz"); 
 

 
$(para).html(function(i,event){ 
 
    return event.replace(/(red)/gi,'yellow'); 
 
}); 
 

 
$(para).html(function(i,event){ 
 
    return event.replace("zzzz", text); 
 
});

<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"> this should be red alone</a> red red</p>