Javascript 使用jquery仅替换div内的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11867269/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replace only text inside a div using jquery
提问by manojadams
I have a div like:
我有一个像：
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>
I am trying to change only the text from "Hi I am text" to "Hi I am replace" using jquery. This might be easy but I am not able to do it.
我正在尝试使用 jquery 仅将文本从“嗨，我是文本”更改为“嗨，我是替换”。这可能很容易，但我无法做到。
Using $('#one').text('')just empties the whole #Onediv.
使用$('#one').text('')只是清空整个#Onediv。
回答by Brian Ustas
Text shouldn't be on its own. Put it into a spanelement.
文本不应单独存在。将其放入一个span元素中。
Change it to this:
改成这样：
<div id="one">
<div class="first"></div>
<span>"Hi I am text"</span>
<div class="second"></div>
<div class="third"></div>
</div>
$('#one span').text('Hi I am replace');
回答by Jamiec
Find the text nodes (nodeType==3) and replace the textContent:
找到文本节点 ( nodeType==3) 并替换textContent：
$('#one').contents().filter(function() {
return this.nodeType == 3
}).each(function(){
this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});
Live example: http://jsfiddle.net/VgFwS/
现场示例：http: //jsfiddle.net/VgFwS/
回答by gcochard
You need to set the text to something other than an empty string. In addition, the .html() function should do it while preserving the HTML structure of the div.
您需要将文本设置为空字符串以外的内容。此外，.html() 函数应该在保留 div 的 HTML 结构的同时执行此操作。
$('#one').html($('#one').html().replace('text','replace'));
回答by Musa
If you actually know the text you are going to replace you could use
如果您确实知道要替换的文本，则可以使用
$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';
Or
或者
$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';
$('#one').contents(':not(*)')selects non-element child nodes in this case text nodes and the second node is the one we want to replace.
$('#one').contents(':not(*)')在这种情况下选择非元素子节点文本节点，第二个节点是我们要替换的节点。
回答by onmyway133
Another approach is keep that element, change the text, then append that element back
另一种方法是保留该元素，更改文本，然后将该元素追加回来
const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
回答by ReturnTable
Just in case if you can't change HTML. Very primitive but short & works. (It will empty the parent div hence the child divs will be removed)
以防万一，如果您无法更改 HTML。非常原始但简短且有效。（它将清空父 div，因此将删除子 div）
$('#one').text('Hi I am replace');<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div class="first"></div>
"Hi I am text"
<div class="second"></div>
<div class="third"></div>
</div>