使用jQuery查找所有包含特定文本的元素

Question

如何最好地扫描整个DOM，查找任何具有文本的元素并将其包装在span类中？谢谢。

- Mircea

---

我认为你需要明确你所说的“任何具有文本的元素”的含义。你是指包含除空格以外的文本，但不包括子元素中的文本吗？ - Peter Jaric

Answer 1

将包含除空格以外内容的所有文本节点进行包装：

$('body *').contents().filter(function() { 
    return (this.nodeType == 3) && this.nodeValue.match(/\S/); 
}).wrap("<span />")

为了包装所有文本节点，包括那些只包含空格的节点：

$('body *').contents().filter(function() { 
    return (this.nodeType == 3) && this.nodeValue.length > 0; 
}).wrap("<span />")

- Mario Menger

---

在此处查看代码演示：http://jsbin.com/oquhu3/3（带有空格的那个）。 - Peter Jaric

谢谢，它有效！我尝试添加一个类但没有成功。 $(function() { $('body *').contents().filter(function() { return (this.nodeType == 3) && this.nodeValue.length > 0; }).addClass("someclass"); });有什么想法吗？ 再次感谢。 - Mircea

你不能向文本节点添加类。请尝试使用带有类的 span 包装它：$('body *').contents().filter(function() { return (this.nodeType == 3) && this.nodeValue.length > 0; }).wrap("<span class='someclass' />") - Mario Menger

嗯，我还是通过创建一个变量并添加一个父类来完成了它。谢谢大家。 - Mircea

Answer 2

您可以使用.each 迭代遍历所有元素：

$('*').each(function(){
    if($(this).text())
    {
        $(this).wrapInner('<span />');
    }
})

我没有测试过那段代码，但它非常简单。你需要学习的只有.each、wrapInner和*选择器。jQuery文档在这里非常有帮助。

- dzida

---

尝试将$(document).ready();添加到您的代码中：$(document).ready(function(){ $('*').each(function{}( if($(this).text()) { $(this).wrapInner('<span />'); } ))}) - dzida

我认为这将为所有 HTML 元素添加类，无论它们是否有实际文本。 - Mircea

@Dzida：是的，我太傻了。但你的代码还有其他错误，在匿名函数中，你把{}和()搞反了...当这个问题被修复后，它似乎可以工作了。 - Peter Jaric

@Mircea 看起来是正确的（我测试过了）...使用这种方法会向 DOM 添加许多跨度。 - Peter Jaric