使用jQuery排除子元素的功能函数

Question

使用以下代码：

<p>Red red red red <a href="http://www.google.com"> this should be red alone</a> red red</p>

如何将所有的“红色”改为“黄色”，但不包括“a”标签中的“红色”？

我已经做到了这一步：

$("p").html(function(i,event){
    return event.replace(/(red)/g,'yellow');
});

...将所有内容都变成黄色。我猜想需要添加一个if语句，大致如下：

if (event.target.tagName === "a")
{return false}

但我已经尝试了stackoverflow上找到的许多方法，但都没有效果。有什么想法吗？

- JohnG

Answer 1

你可以使用 contents() 迭代文本节点。这不会像使用 html() 那样对内部元素上的任何事件监听器产生影响。

$('p').contents().each(function() {
  if (this.nodeType === 3) {
    this.textContent = this.textContent.replace(/red/gi, function(match) {
      return match === 'Red' ? 'Yellow' : 'yellow'
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Red red red red <a href="http://www.google.com">red</a> red red</p>

- charlietfl

---

谢谢，这正是我所要求的...但我担心在stackoverflow上为了简洁而简化我的问题并不总是明智的！我的实际问题涉及将<p>红色</p>转换为超链接：因此需要排除已经在超链接中的文本。使用textContent无效，因为它不再添加html...抱歉！不过你有什么想法吗？ - JohnG

谢谢Charlie - 我想我可以用那个！ - JohnG

Answer 2

这种方法很糟糕，因为它过于具体化，如果在<p>中有多个<a>，它就无法工作，但如果<p>中只有一个<a>，它可以工作。

最好的方法是找出正确的正则表达式。

var aContent = $('p > a')[0].outerHTML;

$('p').html(function(i,event) {
    var parts  = event.split(aContent);

    for (var i, l = parts.length; i<l; i++) {
        parts[i] = parts[i].replace(/red/ig, 'yellow');
    }

    return parts.join(aContent);
});

<p>Red red red red <a href="http://www.google.com">red</a> red red</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

- smarber

---

不错，但我过于简化了我的问题 - 链接中可能还有其他单词。我已经在上面更新了我的问题... - JohnG

@JohnG 这更像是一个 正则表达式 的问题，如果我的回答有帮助的话，我已经更新了它，否则我会更新你的帖子以通知那些有 正则表达式 经验的人。 - smarber

Answer 3

我选择了另一种方法：将要替换的子元素隔离出来，用随机文本代替原来的位置，在执行常规替换后再将这个随机字符串替换回我们的子元素代码。

var para = $("p");
var child = para.children()[0];
var text = child.outerHTML;

para.find(child).replaceWith("zzzz");

$(para).html(function(i,event){
    return event.replace(/(red)/gi,'yellow');
});

$(para).html(function(i,event){
   return event.replace("zzzz", text );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>Red red red red <a href="http://www.google.com"> this should be red alone</a> red red</p>

- Manuel Cheța