我想使用 jQuery 自定义选择器从 DOM 元素中提取文本。它应该只选择没有标记同级的文本节点(很像 XPath 中的 /text())。
背景:我正在开发一个 Firefox 扩展,它可以在非常不同的网站上提取一些特定信息(例如用户名)。现在我希望我的用户能够通过尽可能简单的表单动态添加新网站的路径定义:
添加新网站:
URL: ________________(例如“http://stackoverflow.com/questions/”)
Path: ________________(例如“.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
See my jsfiddle http://jsfiddle.net/vJJbs/
也许无法使用 jQuery 自定义选择器来做到这一点。这就是为什么我正在考虑“回到”XPath,因为它看起来更加通用。
感谢您的帮助。