2018 年更新
由于这是一个非常受欢迎的答案,我决定通过将 textnode 选择器作为插件添加到 jQuery 来更新和美化它。
在下面的代码片段中,您可以看到我定义了一个新的 jQuery 函数,该函数获取所有(且仅)textNode。您也可以将此函数与例如first()
函数链接起来。我对文本节点进行修剪并检查修剪后它是否不为空,因为空格、制表符、新行等也被识别为文本节点。如果你也需要这些节点,那么简单地从 jQuery 函数的 if 语句中删除它。
我添加了一个示例,如何替换第一个文本节点以及如何替换所有文本节点。
这种方法使代码更易于阅读,并且更易于多次使用并用于不同目的。
将更新2017年(adrach)如果你喜欢的应该仍然正常工作。
作为 jQuery 扩展
//Add a jQuery extension so it can be used on any jQuery object
jQuery.fn.textNodes = function() {
return this.contents().filter(function() {
return (this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== "");
});
}
//Use the jQuery extension
$(document).ready(function(){
$('#replaceAll').on('click', () => {
$('#testSubject').textNodes().replaceWith('Replaced');
});
$('#replaceFirst').on('click', () => {
$('#testSubject').textNodes().first().replaceWith('Replaced First');
});
});
p {
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
**text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**also text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>
Javascript (ES) 等效
//Add a new function to the HTMLElement object so it cna be used on any HTMLElement
HTMLElement.prototype.textNodes = function() {
return [...this.childNodes].filter((node) => {
return (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() !== "");
});
}
//Use the new HTMLElement function
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#replaceAll').addEventListener('click', () => {
document.querySelector('#testSubject').textNodes().forEach((node) => {
node.textContent = 'Replaced';
});
});
document.querySelector('#replaceFirst').addEventListener('click', function() {
document.querySelector('#testSubject').textNodes()[0].textContent = 'Replaced First';
});
});
p {
margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="testSubject">
**text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**also text to change**
<p>text that should not change</p>
<p>text that should not change</p>
**last text to change**
</div>
<button id="replaceFirst">Replace First</button>
<button id="replaceAll">Replace All</button>
2017 年更新(adrach):
自发布以来,似乎有几件事发生了变化。这是一个更新的版本
$("div").contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("change text");
原始答案(不适用于当前版本)
$("div").contents().filter(function(){ return this.nodeType == 3; })
.filter(':first').text("change text");
来源:http : //api.jquery.com/contents/