javascript - jQuery - 用 HTML( Logo )替换文本(口号)

Question

我想通过 jQuery 在每个页面上用图像(HTML)替换特定的口号(文本)，电子邮件地址中的口号除外。

首先我尝试了这个，但问题是它输出的是文本而不是 HTML

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

其次，我尝试了以下代码，但它也替换了现有元素的 alt="Slogan" 并破坏了网站:

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

现在我使用这个代码，但是当其他人填写内容时，它并没有真正保存使用，而且我担心它不会按我想要的方式工作。

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">');
 })
});

有没有适当且保存的方式来存档我想做的事情？

仅供引用:我不像示例中那样只选择段落，我还选择所有标题和ankertags。

在请求的 HTML 示例中遇到了一些问题，希望这有帮助并且足够了:

<!--- 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

这可能有效:

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 );

} );

(感谢:https://stackoverflow.com/a/11867485/275501)