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

Posted 2023-05-09

【中文标题】使用 JQuery 更改一个字符的颜色而不更改 HTML 标签

【英文标题】：Change the color of one character using JQuery without changing HTML tags

【发布时间】：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），你就可以遍历所有的文本节点并替换它们的内容。

【参考方案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/