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

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

fyi：我不会像示例中那样只选择Paragraph，我也会选择所有标题和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）

Answer 2

没有jQuery就足够了：

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

或者使用ES2015语法：

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

Answer 3

这里有jsfiddle。我使用.click来触发事件

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

jQuery - 用HTML替换文本（标语）（徽标）

3 个答案: