使用 jQuery 在跨度中查找并包装文本字符的每个实例答案

【问题标题】：find and wrap every instance of a text character in a span using jQuery使用 jQuery 在跨度中查找并包装文本字符的每个实例
【发布时间】：2013-05-29 00:40:01
【问题描述】：

我们想在页面上找到一个字符的每个实例（特别是•），然后将它包装在一个跨度中，以便我们可以设置它们的样式。它们可能存在于各种元素中，多次出现在 DOM 中：<nav/>、<h1/>、<p/> 等。

我们已经尝试了这里找到的一种方法，该方法与匹配字符串并围绕它包装一个跨度有关，但它似乎只匹配并包装任何给定元素中的第一个实例，而忽略同一元素中的任何后续实例。例如，对于<p>•</p> <p>•</p>，两者都被匹配和包装，但<p>blah • blah • blah • blah</p>，只有第一个被匹配和包装。

这是我们尝试过的：

$('*:contains("•")').each(function() {
   if($(this).children().length < 1)
      $(this).html($(this).text().replace('•','<span class="bullets">•</span>'))
});

不确定它是否与if 行有关...这是我们唯一模糊的部分。然而，并没有特别投入这种方法，所以如果有更清洁的东西，让我们听听！

【问题讨论】：

标签： jquery string text

【解决方案1】：

这个怎么样：-

Demo

$('body:contains("•")').contents().each(function () {
    if (this.nodeType == 3) {
        $(this).parent().html(function (_, oldValue) {
            return oldValue.replace(/•/g, "<span class='bullets'>$&</span>")
        })
    }
});

尽量避免使用*。甚至可能是body。尽量使用最外层的容器。

这也应该有效

Demo

$('body:contains("•")').contents().each(function () {
    if (this.nodeType == 1) { //Look for only element Nodes
        $(this).html(function (_, oldValue) {
            return oldValue.replace(/•/g, "<span class='bullets'>$&</span>")
        })
    }

Node Types

【讨论】：

确实，它们都有效。谢谢！出于某种原因，一个比另一个更可取吗？当你建议避免使用“*”时......我认为这是为了尽量减少不必要的 DOM 分支？
我可能会建议您使用第二个，因为它避免了 parent() 选择器。还要尽量避免使用*，因为这将是一项昂贵的操作，因为您正在查看 DOM 中的所有元素，包括头部等中的脚本标签等。相反，您可以将其缩小为包含您想要的元素的父元素有这些字符被替换。

【解决方案2】：

$("*").each(function() { 
    if($(this).children().length==0) { 
        $(this).html($(this).html().replace(/•/g, '<span class="bullets">•</span>')); 
    } 
});

此答案基于this question

Js Fiddle Example

【讨论】：