Question

使用HTML，如：

<div class="items">
    "Items Description"
    <ul>
        <li>1. One</li>
        <li>2. Two</li>
        <li>3. Three</li>
    </ul>
</div>

我如何使用jQuery将文本"Items Description"作为String变量，或者可能是Object变量我可以从中提取String？

我不确定要开始。我知道$('.items')将获得<div>元素，但如何获取内部的文本节点？

Answer 1

您无法使用选择器选择它，因为它是一个文本节点。

尝试

$('.items')[0].firstChild.nodeValue

演示：Fiddle

Answer 2

因为它是div.items的第一个节点，所以你可以这样做：

$('.items').contents()[0]

Answer 3

var text = $('.items').contents().filter(function(){
    return this.nodeType === 3
}).text();  // text = "Items Description"

Answer 4

从以前的一些答案中可以看出，有几种不同的方法可以解决这个问题。为了给您提供更多信息，您选择的是“文本节点”，因此没有“普通”jQuery对象（如$("#divID")）。但是，它是可访问的，并且可以这样使用。

首先是选择过程。使用jQuery有两种简单的方法可以解决这个问题，或者是您自己的偏好并提供相同的结果。首先选择你的div元素，然后在其中获取文本节点。

var textNode = $('.items')[0].firstChild;
//  is the exact same as
var textNode = $('.items').contents()[0];

第一种方法使用Vanilla JS获取firstChild，而第二种方法使用jQuery的.contents()方法。

如上所示，由于我们知道Text节点是div元素中的第一个项目，因此我们可以使用基于0的索引来使用[0]选择第一个项目。但如果它不是第一个呢？然后，我们可以将.contents与.filter结合使用。

var textNodes = $('.items').contents().filter(function(i) { return this.nodeType === 3; });

您将在此类调用中看到的一个重大区别是，此处返回文本节点的jQuery对象。您还会注意到它将返回new line breaks作为jQuery对象的元素对象。因此，您正在寻找的可能不是第一项。如果您选择使用过滤器，可以使用几条路径来消除问题。

首先，你可以简单地过滤掉空白回报。

var textNodes = $('.items').contents().filter(function(i) { return this.nodeType === 3  &&  $.trim(this.wholeText); }); // if `$.trim(this.wholeText)` is '', then its the same as return `false`

| 或者 |您可以使用以下内容明确过滤您要查找的文本：

var textNodes = $('.items').contents().filter(function(i) { return this.nodeType === 3  &&  $.trim(this.wholeText) == '"Items Description"'; });

无论哪种方式，您的对象都将作为jQuery对象返回，这意味着获取文本就像textNodes.text()一样简单，或者，如果找到多个文本节点，则$(textNodes[0]).text()。当然，您仍然希望使用.trim来消除任何“空格”或“新换行符”。

现在，关于获取该文本。正如我之前提到的，jQuery的.trim()方法将是消除文本死区空间的最佳选择。

回过头来看我们的前两个例子，你可以得到没有多余空间的文字，简单如下：

var txt = $.trim(textNode.wholeText);
// or as one complete line call
var txt = $.trim($('.items')[0].firstChild.wholeText);
var txt = $.trim($('.items').contents()[0].wholeText);

或者，如果你想得到幻想（出于任何疯狂的原因）你可以转换你以前的元素对象调用并使它们实际上是jQuery对象，然后从中获取文本：

var jText = $(textNode);
var txt = $.trim(jText.text());

如果您想对文本元素执行更多操作（例如.wrap），这可能很有用。

最后，对于我们的最后一个例子，如果我们知道只返回了一个文本节点，那么我们将调用类似于前一个：

var txt = $.trim(textNodes.text());

但是，如果它只是返回的几个节点之一，那么我们需要知道索引。例如，以下内容将返回jQuery Object列表中的第一个文本节点。

var txt = $.trim(textNodes[0].wholeText);

这几乎是每一个简单的方法。虽然，没有“正确”或“错误”的方式，因为只有“多种方式”可以做任何你需要的事情。举一个例子，以下内容也会给我一些文字"Items Description"：

var txt = $('.items').clone().filter(function(i){ $(this).children().remove(); $(this).text($.trim($(this).text())); return i == 0; }).text();

之前，虽然过度扩展，但在克隆之后检查仅作为选择器的第一个的文本节点，并用trim版本替换它们的文本以及删除子节点并最终仅返回文本本身。正如你所看到的，它可能很疯狂，但是由于对JS的了解很少，以及对jQuery Lib的访问，你几乎可以用你选择的任何方式完成你能想到的任何事情！

从所选元素中选择特定文本节点

4 个答案: