文本节点的 jQuery 自定义选择器

Question

我想使用 jQuery 自定义选择器从 DOM 元素中提取文本。它应该只选择没有标记同级的文本节点（很像 XPath 中的 /text()）。

背景：我正在开发一个 Firefox 扩展，它可以在非常不同的网站上提取一些特定信息（例如用户名）。现在我希望我的用户能够通过尽可能简单的表单动态添加新网站的路径定义：

添加新网站：

网址：________________（例如“http://stackoverflow.com/questions/”）

路径：________________（例如“.user-details>a:eq(0)”代表提出问题的用户的姓名）

例如，在 stackoverflow 上，$(path).text() 将以文本形式返回用户名。但在其他一些网站上，用户名只能作为带有标记同级的文本节点使用，如下例所示：

<div id="person">
    johndoe <span id="age">(57)</span>
    <span id="description">Lorem ipsum dolor sit amet…</span>
</div>

由于 jQuery 不提供文本节点选择器（如 XPath 中的 /text()），我希望找到解决方案创建自定义选择器。

我知道如何以“非选择器”方式获取文本节点：

var textNode = $('#person').contents().filter(function(){
    return this.nodeType == 3;
}).text();

alert(textNode); // gives me "johndoe"

如何将其转换为自定义选择器？以下显然不起作用，因为只要元素的一部分是文本节点，它总是返回完整的元素（正如 @VinayC 在他的回答中解释的那样）：

$.extend($.expr[':'],{
    getText: function(element){
        return $(element).contents().filter(function() {return this.nodeType == 3;}).text();
    }
});

alert($('#person:getText')); //returns the whole DIV element

请参阅我的 jsfiddle

也许无法使用 jQuery 自定义选择器来做到这一点。这就是为什么我正在考虑“回到”XPath，因为它看起来更通用。

感谢您的帮助。

Answer 1

您正在做的是创建一个 jquery 选择器，选择器函数应该返回布尔值以指示传递的节点是否匹配。因此，您当前的函数为“#person”div 返回“true”（（实际返回值是 div 中的文本，它非空，因此被视为 true），因此您得到 div 元素作为结果。

您可以尝试 getText: function(node){ return node.nodeType == 3;} 但这仅适用于 jquery 引擎通过选择器函数传递所有文档节点，包括文本节点（我不知道它是否有效）。另一种方法是创建一个辅助函数而不是自定义选择器

：扩展 jquery 对象怎么样？

$.fn.extend({
    getText: function() {
        return this.contents().filter(function() {return this.nodeType == 3;}).text();
    }
});

alert($('#person').getText());