2

我发现我需要完全支持 DOMtextNode的选择器，而 jQuery 没有提供。

jQuery 忽略文本节点，可能是因为大多数页面在标签之间有大量不相关的空白节点，各种浏览器可以区别对待。

关于文本节点的 jQuery 问题的大多数答案归结为使用.contents()返回所选项目的所有子节点的函数，包括文本节点 - 所有其他 jQuery API 都忽略文本节点。

通常你不需要一些不容易建立的东西，.contents()但我发现自己处于这种情况。

我的用例是我想在我无法控制的第 3 方网页中定位并包装任意运行的文本。（想想浏览器扩展或用户脚本。）

到目前为止，我很高兴在 DOM 中查找所有文本节点，或者找到一个包含我感兴趣的所有文本节点并用于.contents()迭代它们的包装元素。

但是现在我发现有时我需要 jQuery/sizzle 选择器的全部功能来将我的注意力缩小到类中类的某些可能性等。

我考虑了使用textNode选择器扩展 jQuery 的方法，但这似乎是不可能的，因为忽略文本节点的普遍规则会在调用我的扩展之前过滤掉其中的许多节点。

因此，我正在寻找其他一些 JavaScript 工具，它提供类似选择器的功能，但允许选择在其选择器表达式语法中任意混合的文本节点。

这是我可能需要做的一个例子：

$('.ii:even > div > TXT, .ii:even > div > div.im > TXT')

这是一个我个人还不需要但很容易想象的例子：

$('#something .somethingElse TXT')

当您可以寻址（选择）文本节点的直接父级时，迭代它们.contents()很容易，而不是当您只能识别某个任意祖先但想要其下方的所有文本节点时，这对于元素节点来说当然是微不足道的.

4

1 回答 1

4

这是您可以做的事情：

jQuery.fn.getTextNodes = function(val,_case) {
    var nodes = [],
        noVal = typeof val === "undefined",
        regExp = !noVal && jQuery.type(val) === "regexp",
        nodeType, nodeValue;
    if (!noVal && _case && !regExp) val = val.toLowerCase();
    this.each(function() {
        if ((nodeType = this.nodeType) !== 3 && nodeType !== 8) {
            jQuery.each(this.childNodes, function() {
                if (this.nodeType === 3) {
                    nodeValue = _case ? this.nodeValue.toLowerCase() : this.nodeValue;
                    if (noVal || (regExp ? val.test(nodeValue) : nodeValue === val)) nodes.push(this);
                }
            });
        }
    });
    return this.pushStack(nodes, "getTextNodes", val || "");
};

然后你可以使用以下内容：

$("selector").getTextNodes("selector");

这是一个JSFiddle。

工作原理.getTextNodes()非常简单。如果您不传递参数，它将返回所有文本节点。如果您将字符串传递给它，它会返回具有完全相同的文本节点nodeValue。如果您要传递一个字符串，请将第二个参数设置为真值以进行不区分大小写的检查。第一个参数也可以nodeValue是匹配的正则表达式。

希望这可以帮助。

编辑：请注意，您也可以使用$("selector").getNodes("selector").end()，因为它使用.pushStack().

于 2012-12-12T00:46:14.957 回答