使用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

要實現你想要的，你需要有一個遞歸功能。在那個函數中，你必須檢查元素是否是文本節點。一旦你有了一個文本節點，你就可以替換它的內容。否則，您需要使用新元素調用相同的函數。

這裏說的功能：

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/