jquery中有文本选择器吗？答案

【问题标题】：Are there any text selector in jquery?jquery中有文本选择器吗？
【发布时间】：2011-04-26 13:39:52
【问题描述】：

jquery 中有文本选择器吗？

我的代码

<anything>Hello World! Hello World!</anything>

Reslut 应该是（使用 Jquery）

<anything>Hello <span>World</span>! Hello <span>World</span>!</anything>

【问题讨论】：

不。部分文本节点不是有效的 DOM 元素。
查看jQuery "highlight" plugin

标签： javascript jquery html text jquery-selectors

【解决方案1】：

没有。 jQuery 主要与元素一起工作，几乎没有为您提供处理文本。

要对文本进行查找和替换，您需要分别检查每个文本节点并执行 DOM splitText 操作以在找到匹配项时将其拆开。例如：

function findText(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            var tag= child.tagName.toLowerCase();
            if (tag!=='script' && tag!=='style' && tag!=='textarea')
                findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

findText(element, /\bWorld\b/g, function(node, match) {
    var span= document.createElement('span');
    node.splitText(match.index+match[0].length);
    span.appendChild(node.splitText(match.index));
    node.parentNode.insertBefore(span, node.nextSibling);
});

【讨论】：

我建议在 if、for 和 while 等复合语句中使用块。

【解决方案2】：

$('anything').html(function(i, v) {
    return v.replace(/(World)/g, '<span>$1</span>');
});

上面的 sn-p 使用了 jQuery 1.4 中添加的功能。

注意：此解决方案对于仅包含原始文本（且无子元素）的元素是安全的。

【讨论】：

@bobince 不错。代替 text()，必须使用 html() 方法......但是，现在我们必须小心，正则表达式不会破坏 innerHMTL 字符串中的标签
是的（哎呀！我移动了评论）。以上是危险的，因为它会很高兴地匹配非文本内容。而且一般来说，字符串也不可靠，因为浏览器会决定哪些字符要进行 HTML 转义（对于字母 World 来说不是问题，但对于其他字符串来说可能是问题）。它还会销毁并重新创建所有包含的元素，这将消除任何不可序列化的属性，例如表单值或事件处理程序。它使用正则表达式破解 HTML，对于仅包含文本的简单元素，您可能会逃脱惩罚，但所有常见问题都潜伏在那里。
我选择删除我的答案，因为所有可能有问题的都是错误的。
@bobince 是的，我的解决方案仅适用于纯文本字符串。因此，这是一个有限的解决方案。但是，如果 OP 的情况是他只处理原始文本，那么他应该没问题。我个人更喜欢更精细的解决方案（比如你提出的解决方案）。
确实如此。我想澄清这一点，以免下一个 Google 员工出现并开始在更复杂的情况下使用 html() 替换，例如在具有子元素内容的元素上。不幸的是，这很常见，并且在这种情况下通常会导致错误和安全漏洞。

【解决方案3】：

您可以为您的简单案例进行正则表达式替换等，但要获得更一般的答案：否。

jQuery 在处理文本节点时并没有提供太多帮助，它主要用于处理元素节点类型 (nodeType == 1)，而不是文本节点类型 (nodeType == 3)...所以是的，您可以使用它在哪里有帮助（例如 .contents() 和 .filter()），但这不会经常发生，因为它不是图书馆的主要目的。

【讨论】：

错字：noteType 应该是nodeType