排除从功能的子元素使用jQuery

与下面的代码：排除从功能的子元素使用jQuery

<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 (event.target.tagName === "a") 
{return false}

但我已经试过几十个事情我已经在计算器中发现，没有效果。有任何想法吗？

来源

2017-02-16 JohnG

肮脏的方式，因为太具体，不会工作，如果很多<a>在<p>例如，但工程如果在<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>

来源

2017-02-16 14:19:10 smarber

不错，但我过分简单化我的问题 - 链接可以有换句话说我已经更新上面我的问题... – JohnG

@JohnG它更是一个'regex'问题，更新我的答案，如果它是任何帮助，否则我更新你的帖子，包括通知'正规表'有经验的人 – smarber

可以使用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>

来源

2017-02-16 14:21:59 charlietfl

谢谢，这正是我问....我害怕我学习，简化我的问题，在stackoverflow简洁并不总是明智的！我的实际问题涉及将

红色

变成超链接：因此需要排除已经在超链接中的文本。使用textContent不起作用，因为它不再加入html ...对不起！任何想法虽然？ – JohnG

可以使用'replaceWith（）'https://jsfiddle.net/nLddwdz9/ – charlietfl

谢谢查理 - 认为我可以使用它！ – JohnG

我又路线的方式：隔离的孩子，用随机文本取代它的位置，执行我们的照常替换，然后再用我们的子代码替换那个随机字符串。

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>

来源

2017-02-16 15:23:03

排除从功能的子元素使用jQuery

回答

相关问题