In innerem HTML ersetzen, ausgenommen einige Elemente

Question

Wie könnte ich foo zu bar in #wrapper Element ändern, aber es innerhalb pre > code nicht ändern?

Ich habe versucht, den unten gezeigten Code, aber es funktioniert nicht richtig: es ändert alle foo s, egal wo sie sich befinden.

$('#wrapper').children().not('pre > code').each(function() { 
 
    $(this).html($(this).html() 
 
     .replace(/foo/g, 'bar')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 

 
    <pre style="white-space: pre-line;"> 
 
     <code> 
 
      foo 
 
      foo 
 
      foo 
 
     </code> 
 
    </pre> 
 

 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 

 
    <pre style="white-space: pre-line;"> 
 
     <code> 
 
      foo 
 
      foo 
 
      foo 
 
     </code> 
 
    </pre> 
 
</div>

Answer 1

Das Problem ist, dass .not('pre > code') schließt <code> Elemente aber nicht <pre> Elemente nicht ausschließt. Die einfachste Lösung besteht darin, sowohl pre als auch pre > code auszuschließen. Anstatt Verwendung children().not(...) es ist einfacher, nur einen einzigen Selektor:

$('#wrapper :not(pre):not(pre > code)').each(function() { 
 
    $(this).html($(this).html() 
 
     .replace(/foo/g, 'bar')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 

 
    <pre style="white-space: pre-line;"> 
 
     <code> 
 
      foo 
 
      foo 
 
      foo 
 
     </code> 
 
    </pre> 
 

 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 

 
    <pre style="white-space: pre-line;"> 
 
     <code> 
 
      foo 
 
      foo 
 
      foo 
 
     </code> 
 
    </pre> 
 
</div>

Answer 2

Nun könnte man einfach überprüfen, ob das Element ein Pre ist.

$('#wrapper').children().each(function() { 
 
    if (!$(this).is('pre')) 
 
     $(this).html($(this).html().replace(/foo/g, 'bar')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 

 
    <pre style="white-space: pre-line;"> 
 
     <code> 
 
      foo 
 
      foo 
 
      foo 
 
     </code> 
 
    </pre> 
 

 
    <p>foo</p> 
 
    <p>foo</p> 
 
    <p>foo</p> 
 

 
    <pre style="white-space: pre-line;"> 
 
     <code> 
 
      foo 
 
      foo 
 
      foo 
 
     </code> 
 
    </pre> 
 
</div>

Answer 3

Ich denke, das Problem nur ein Selektor ist.

Ändern Sie die erste Zeile Ihres JavaScript:

$('#wrapper').children(':not(pre)').each(function() {