jquery - jQuery找到最内在的内容

Question

我想找到位于 DOM 末尾的每个元素的内部内容或文本，并将其替换为<span class="red">content</span>

这就是我正在使用的

regex = new RegExp("\\b"+word+"\\b", "gi");

$(this).find("*:not(:has(*))").each(function(){
    this.innerHTML = this.innerHTML.replace(
        regex, function(matched) {
            return "<span class=\"" + className + "\">" + matched + "</span>";});
});

但这里的问题是，如果结构是<div>one two</div>，在 wordone被替换到<div><span class="red">one</span> two<div>现在我的选择器找不到第二个two

请查看此处的jsFiddletwo未突出显示

Answer 1

你需要的是

var words = ['one', 'two'];
var regex = new RegExp("\\b(" + words.join('|') + ")\\b", "gi");
$('#outer').find(":not(:has(*))").html(function (idx, html) {
    return html.replace(regex, '<span class="red">$1</span>');
});

演示：小提琴

问题是，一旦执行循环，该myId元素将有一个 span 元素作为子元素，因为one替换为<span class="red">one</span>它会导致选择器*:not(:has(*))失败

Answer 2

试试这个：

var words = ['one','two'];
regex = new RegExp("\\b("+words.join('|')+")\\b", "gi");
$('#outer').find("*:not(:has(*))").each(function(){
     this.innerHTML = this.innerHTML.replace(regex, function(matched) {
          return "<span class=\"red\">" + matched + "</span>";
     });
});

演示：http: //jsfiddle.net/jpWaw/1/