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/

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

1 个答案: