如何在 HTML 中使用 jQuery 仅获取没有标签的直接文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8624592/
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
How to get only direct text without tags with jQuery in HTML
提问by WHITECOLOR
I've got an HTML:
我有一个 HTML：
<strong>1)</strong>TEXT THAT I ONLY NEED<p>some par</p><ul>..</ul>
I need only "TEXT THAT I ONLY NEED"that is not withing any tags in his HTML, how can I get it with jQuery?
我只需要“我只需要的文本”，在他的 HTML 中没有任何标签，我怎样才能用 jQuery 得到它？
回答by Delgan
The best way is to .clone()your object, .remove()all of its .children(), then go back to the object using .end()and finally get the .text().
最好的方法是.clone()你的对象，它的.remove()所有.children()，然后回到对象使用.end()，最后得到.text().
The method is described in this blog post.
此博客文章中描述了该方法。
$("strong")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text(); //get the text of element
回答by Guffa
This is tricky, because the text is in a text node, and jQuery doesn't support text nodes, only elements. Also because different browsers treat white space in HTML code differently, so you end up with different sets of nodes in different browsers. You can't just get the nodes and rely on that the text node that you want is at the same index all the time.
这很棘手，因为文本位于文本节点中，而 jQuery 不支持文本节点，仅支持元素。也因为不同的浏览器对 HTML 代码中的空白处的处理方式不同，所以你最终会在不同的浏览器中得到不同的节点集。您不能只获取节点并依赖于您想要的文本节点始终处于同一索引。
You can use jQuery to locate an element, and use the DOM to get all the nodes inside it.
您可以使用 jQuery 来定位一个元素，并使用 DOM 来获取其中的所有节点。
Example HTML:
示例 HTML：
<div id="test">
<strong>1)</strong>
TEXT THAT I ONLY NEED
<p>some par</p>
<ul>
<li>asdf</li>
<li>qwerty</li>
</ul>
</div>
Use jQuery to find the div, use [0]to get the DOM element out of the jQuery object, and the childNodesproperty to get its children:
使用jQuery查找div，使用[0]从jQuery对象中获取DOM元素，以及childNodes获取其子元素的属性：
var nodes = $('#test')[0].childNodes;
Then you can use jQuery to loop through the nodes to find the node that is the strongelement:
然后，您可以使用 jQuery 遍历节点以查找作为strong元素的节点：
var index;
$.each(nodes, function(i,e){
if (e.tagName == 'STRONG') {
index = i;
return false;
}
});
Now you can use the DOM to get the text value from the next node:
现在您可以使用 DOM 从下一个节点获取文本值：
var text = nodes[index + 1].nodeValue;
回答by tmaximini
well, if you use jQuery, you would do
好吧，如果你使用 jQuery，你会这样做
$('.selector').text();
edit: I just saw you want the text that is not in any tags - well this is not directly possible (fact is, that every text inside a html document is inside some HTML tags.)
编辑：我刚刚看到你想要不在任何标签中的文本 - 这不是直接可能的（事实上，html 文档中的每个文本都在一些 HTML 标签中。）
In this case I would try to change the markup (easiest way), so the desired text is within html tags.
If this is not possible, you use the above mentioned text()method to get the whole text from the parent element, and after you have to subtract the pieces you dont want.
在这种情况下，我会尝试更改标记（最简单的方法），因此所需的文本位于 html 标签内。如果这是不可能的，您可以使用上述text()方法从父元素获取整个文本，然后减去您不想要的部分。
see http://jsfiddle.net/3SSAR/1/for an example of how to subtract the strings..
有关如何减去字符串的示例，请参见http://jsfiddle.net/3SSAR/1/。
just remember to use substrand not -to subtract strings in javascript
只记得在javascript中使用substr而不是-减去字符串
回答by Ivan Lychkov
This code works for me:
这段代码对我有用：
var el = $("<div/>");
el.html(text).children().remove();
return el.text();
回答by Chris Athanasiadis
var element = $('#element');
var tags = element.find('*');
tags.remove();
var plainText = element.text().trim();
alert(plainText); // prints TEXT THAT I ONLY NEED<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- html -->
<div id='element'>
<strong>1)</strong>TEXT THAT I ONLY NEED
<p>some par</p>
<ul>..</ul>
</div>Fiddle: https://jsfiddle.net/2b5dh4xc/
回答by Md. Amirozzaman
Yet another approach With vanila/pureJavaScript
使用vanila/pureJavaScript 的另一种方法
const el = document.getElementById('element');
const elNodes = el.childNodes;
let plainText = "";
for(i=0;i<elNodes.length;i++){
if(elNodes[i].nodeName == '#text'){
plainText+=elNodes[i].textContent;
}
}
console.log(plainText); // prints TEXT THAT I ONLY NEED<!-- html -->
<div id='element'>
<strong>1)</strong>TEXT THAT I ONLY NEED
<p>some par</p>
<ul>..</ul>
</div>回答by Adel Mourad
var name = $($(YourElementOuterHTML)).children().remove().end().text();
example:-
例子：-
var name = $($(li).find("a").get(0).outerHTML).children().remove().end().text();
回答by isNaN1247
Your markup isn't the greatest for this. If you wrapped the text you want with a span such as:
你的标记不是最好的。如果你用一个跨度包裹你想要的文本，例如：
<span class="gettext">TEXT THAT I NEED</span>
You could use $('.gettext').text();in jQuery.
您可以$('.gettext').text();在 jQuery 中使用。
