使用JQuery更改一个字符的颜色而不更改HTML标记

我想通过使用jQuery来遍历DOM，并且想要更改每个字母m的实例的颜色。这是我到目前为止有：使用JQuery更改一个字符的颜色而不更改HTML标记

$(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（）对我无效

来源

2016-11-24 Feras

所以只要你所有的文字标签之间的书面（而不是一些奇怪的属性或CSS），你可以通过你所有的textNodes迭代，只需更换他们的内容。 – Syntac

要实现你想要的，你需要有一个递归功能。在那个函数中，你必须检查元素是否是文本节点。一旦你有了一个文本节点，你就可以替换它的内容。否则，您需要使用新元素调用相同的函数。

这里说的功能：

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/

来源

2016-11-24 18:50:54

使用JQuery更改一个字符的颜色而不更改HTML标记

回答

相关问题