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

Question

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

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')

当您可以寻址(选择)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().