javascript - 是否有 jQuery/sizzle 的替代方案支持 textNodes 作为选择器中的一等公民？

Question

我发现我需要完全支持 jQuery 不提供的 DOM textNode 的选择器。

jQuery 忽略文本节点，可能是因为大多数页面的标签之间有大量不相关的空白节点，不同的浏览器可以以不同的方式处理这些空白节点。

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

通常，您不需要一些无法轻松构建在 .contents() 上的东西，但我发现自己处于这种情况。

我的用例是，我想要定位并包装我无法控制的第三方网页中的任意文本。 (想想浏览器扩展或用户脚本。)

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

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

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

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

以下是我可能需要执行的操作的示例:

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

这是一个我个人还没有需要但可以轻松想象的示例:

$('#something .somethingElse TXT')

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

Answer 1

您可以执行以下操作:

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");

Here是一个 JSFiddle。

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

希望这有帮助。

---

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