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

【问题标题】：Change the color of one character using JQuery without changing HTML tags使用 JQuery 更改一个字符的颜色而不更改 HTML 标签
【发布时间】：2017-04-09 03:12:25
【问题描述】：

我正在尝试使用 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() 对我不起作用

【问题讨论】：

所以只要你所有的文本都写在标签之间（不是一些奇怪的属性或css），你就可以遍历所有的文本节点并替换它们的内容。

标签： javascript jquery html dom dom-manipulation

【解决方案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/

【讨论】：