jQuery - Ersetzen Sie Text (Slogan) mit HTML (Logo)

Question

Ich möchte einen bestimmten Slogan (Text) durch ein Bild (HTML) über jQuery auf jeder Seite, außer dem Slogan in der E-Mail-Adresse ersetzen.

Zuerst habe ich versucht, diese, aber das Problem war es Text wurde outputing und nicht HTML

jQuery("p").text(function() { 
    return jQuery(this).text().replace("Slogan", '<img src="/wp-content/uploads/Slogan-logo.svg" alt="Slogan">'); 
}); 

Zweite ich diesen folgenden Code versucht, aber es ersetzt auch alt="Slogan" bestehender Elemente und brach auf der Website:

jQuery(function($){ 
$("p").html(function(i,o) { 
    return o.replace('Slogan','<img class="script-logo" src="/wp-content/uploads/logo.svg" alt="Slogan">'); 
}) 
}); 

Jetzt benutze ich diesen Code, aber es ist nicht wirklich sicher zu verwenden, wenn eine andere Person den Inhalt füllt, und ich habe Angst, dass es nicht wie gewünscht funktioniert.

jQuery(function($){ 

$('p:contains("Slogan")').html(function(i,o) { 
    return o.replace('Slogan','<img class="script-logo" src="/wp-content/uploads/Slogan-logo.svg" alt="Slogan">'); 
}) 
}); 

Gibt es eine richtige und sichere Möglichkeit zu archivieren, was ich tun möchte?

fyi: ich wähle nicht nur den Absatz wie im Beispiel, ich wähle auch alle Überschriften und ankertags.

hatten einige Probleme mit dem HTML-Beispiel angefordert, hoffentlich hilft und ist genug:

<!--- Nav example ---> 

<div class="wpb_raw_code wpb_content_element wpb_raw_html"> 
     <div class="wpb_wrapper"> 
      <div class="vc_btn3-container menuButton vc_btn3-inline"> 
<a class="scroll vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-default" href="/live/" title="" data-hover="/wp-content/uploads/menu-Slogan-video3.jpg">Slogan 0-5A Bearbeitung</a> 
</div> 
     </div> 
    </div> 

<!--- Content Example ---> 
<div class="wpb_raw_code wpb_content_element wpb_raw_html"> 
     <div class="wpb_wrapper"> 
      <div class="vc_btn3-container menuButton vc_btn3-inline"> 
<a class="scroll vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-square vc_btn3-style-flat vc_btn3-color-default" href="/live-zerspanung/" title="" data-hover="/wp-content/uploads/menu-Slogan-video3.jpg">Slogan UE110-5A Simultan Bearbeitung</a> 
</div> 
     </div> 
    </div> 

<!--- Footer Example ---> 

<div class="column one-fourth"><aside id="text-2" class="widget widget_text">   <div class="textwidget"><div class="image_frame image_item no_link scale-with-grid alignnone no_border"><div class="image_wrapper"><img class="scale-with-grid" src="http://www1.Slogan.at.5.your-server.de/wp-content/uploads/Slogan-logo.svg" alt="Slogan-logo"></div></div> 

<hr class="no_line" style="margin: 0 auto 20px;"> 

<h5>Unternehmen der Slogan GmbH</h5> 
<p class="big&quot;" style="margin: 0px 0px 5px 0px;"></p> 
<p class="big&quot;" style="margin: 0px 0px 5px 0px;">E-Mail: <a href="mailto:holding@Slogan.eu">holding@Slogan.eu</a></p></div> 
     </aside></div> 


<div class="copyright"> 
     <p>© 2016 <img class="script-logo-Slogan" src="/wp-content/uploads/Slogan-logo-white.svg" alt="Slogan"> Slogan Gmbh - Lorem | <a href="/impressum">Impressum</a> | <a href="/datenschutz">Datenschutz</a></p> 
</div> 

Answer 1

Diese funktionieren könnte:

jQuery(function($) { 

    var sloganHTML = '<img class="script-logo" src="/wp-content/uploads/logo.svg" alt="Slogan">'; 
    function onlyTextNodes() { 

     return this.nodeType === 3; 

    } 
    function replaceSloganWithImage() { 

     this.html(this.html().replace("Slogan", sloganHTML)); 

    } 
    $("p").contents() 
     .filter(onlyTextNodes) 
     .each(replaceSloganWithImage); 

}); 

(Danke: https://stackoverflow.com/a/11867485/275501)

Answer 2

Hier finden Sie eine jsfiddle dafür. Ich benutze .click die Veranstaltung

$('p').html(function (index, text) { 
     this.innerHTML = text.replace('Slogan', "<img src='$1.png'>") 
    }); 

Answer 3

Leicht genug ohne jQuery auslösen:

Array.toArray(document.querySelectorAll('p')) 
    .forEach(function(el) { 
    el.innerHTML = el.innerHTML.replace(
     'Slogan', 
     '<img class="script-logo" src="/wp-content/uploads/Slogan-logo.svg" alt="Slogan">' 
    ); 
    }); 

Oder mit ES2015 Syntax:

[...document.querySelectorAll('p')] 
    .forEach(el => 
    el.innerHTML = el.innerHTML.replace(
     'Slogan', 
     '<img class="script-logo" src="/wp-content/uploads/Slogan-logo.svg" alt="Slogan">' 
    ) 
);