使用JQuery更改一個字符的顏色而無需更改HTML標簽

Question

我正在嘗試使用JQuery遍歷DOM，並且我想更改字母m的每個實例的顏色。 這是我到目前為止所擁有的：

$(document).ready(function(){
var m = "<span style='color: red;'>m</span>"

$("body").children().each(function() {
        $(this).html($(this).html().replace(/m/g, m));
   });
});

問題在於它還會修改html元素，例如<href>和<img>

我嘗試使用

if (!$(this).is("a")) { //replace }

但這沒用。 還使用.text（）而不是.html（）對我不起作用

Answer 1

要實現所需的功能，您需要具有遞歸功能。 在該函數中，您必須檢查元素是否為文本節點。 一旦有了文本節點，就可以替換其內容。 否則，您需要使用new元素調用相同的函數。

這里說的功能：

letterScanner( $('body'), 'm' )

function letterScanner( $el, letter ){
  $el.contents().each( function(){
    if( this.nodeType == 3 ){
      $( this ).replaceWith( this.textContent.replace( new RegExp( '('+letter+'+)', 'g' ), "<span style='color: red;'>$1</span>" ) );
    }else{
        letterScanner( $( this ), letter )
    }
  } );
}

當然，請更改最接近的父級的body選擇器以獲得更好的性能。

https://jsfiddle.net/ghb4p1p8/