Question

我们希望在页面上找到角色的每个实例（特别是•），然后将其包装在一个范围中，以便我们可以设置它们的样式。它们可以在各种元素中，多次，以及整个DOM：<nav/>，<h1/>，<p/>等。

我们尝试过这里找到的一个方法，它涉及匹配一个字符串并在其周围包裹一个span，但它似乎只匹配并包装任何给定元素中的第一个实例，并忽略同一元素中的任何后续实例。例如，对于<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行有关...这是我们唯一模糊的部分。然而，并没有特别投入这种方法，所以如果有更清洁的东西，那就听听吧！

Answer 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

Answer 2

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

此答案基于this question

Js Fiddle Example

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

2 个答案:

Demo

Demo