如何只使用HTML中的jQuery获取没有标签的直接文本

Question

我有一个HTML：

<strong>1)</strong>TEXT THAT I ONLY NEED<p>some par</p><ul>..</ul>

我只需要“我只需要的文本”，这不在他的HTML中的任何标签内，我怎样才能用jQuery获取它？

Answer 1

最好的方法是.clone()你的对象，.remove()所有的.children()，然后使用.end()回到对象，最后得到.text()。

该方法在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

Answer 2

这很棘手，因为文本在文本节点中，而jQuery不支持文本节点，只支持元素。此外，因为不同的浏览器以不同的方式处理HTML代码中的空格，所以最终在不同的浏览器中使用不同的节点集。您不仅可以获取节点，还可以依赖于所需的文本节点始终处于同一索引。

您可以使用jQuery来定位元素，并使用DOM来获取其中的所有节点。

示例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>

使用jQuery查找div，使用[0]从jQuery对象中获取DOM元素，使用childNodes属性获取其子元素：

var nodes = $('#test')[0].childNodes;

然后你可以使用jQuery循环遍历节点来找到strong元素的节点：

var index;
$.each(nodes, function(i,e){
  if (e.tagName == 'STRONG') {
    index = i;
    return false;
  }
});

现在，您可以使用DOM从下一个节点获取文本值：

var text = nodes[index + 1].nodeValue;

Answer 3

好吧，如果你使用jQuery，你会这样做

$('.selector').text();

more info and examples here

编辑：我刚看到你想要的文本不在任何标签中 - 这不是直接可能的（事实是，html文档中的每个文本都在一些HTML标签内。）

在这种情况下，我会尝试更改标记（最简单的方法），因此所需的文本在html标记内。如果这是不可能的，你使用上面提到的text()方法从父元素中获取整个文本，并在你必须减去你不想要的部分之后。

请参阅http://jsfiddle.net/3SSAR/1/以获取如何减去字符串的示例..

只记得使用substr而不是-来减去javascript中的字符串

Answer 4

这段代码适合我：

var el = $("<div/>");
el.html(text).children().remove();
return el.text();

Answer 5

var name = $($(YourElementOuterHTML)).children().remove().end().text();

例：-

var name = $($(li).find("a").get(0).outerHTML).children().remove().end().text(); 

Answer 6

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>

小提琴：https://jsfiddle.net/2b5dh4xc/

Answer 7

你的加价并不是最好的。如果您使用跨度包装所需的文本，例如：

<span class="gettext">TEXT THAT I NEED</span>

你可以在jQuery中使用$('.gettext').text();。