使用 jquery 从函数中排除子元素答案

【问题标题】：Exclude child elements from functions with jquery使用 jquery 从函数中排除子元素
【发布时间】：2017-02-16 14:07:49
【问题描述】：

使用下面的代码：

<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 上发现的东西，但都没有效果。有什么想法吗？

【问题讨论】：

标签： javascript jquery regex

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

【讨论】：

谢谢，这正是我所要求的......我恐怕我正在学习为了简洁而简化我在stackoverflow上的问题并不总是明智的！我的实际问题涉及将
Red
变成超链接：因此需要排除超链接中已经存在的文本。使用 textContent 不起作用，因为它不再在 html 中添加......对不起！有什么想法吗？
谢谢查理——我想我可以用它！

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

【讨论】：

很好，但我的问题过于简单化了——链接中可能包含其他词语。我已经更新了我上面的问题...
@JohnG 这更像是一个regex 问题，如果有任何帮助，请更新我的答案，否则我会更新您的帖子以包含通知regex 有经验的人

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

【讨论】：