javascript - Javascript（jQuery）...过滤选择器内文本中的字符？

Question

什么是最好的解决方案，你会怎么做。

我的网站上有这个……</p>

<div class="desc">
   <p>
   Some text that is set via a CMS and is completely dynamic. 
   It contains sometimes a character like this § in the middle of the text.
   It could also contain another one §, you see!
   </p>
</div>

我想知道如何为字符过滤此文本并将其§包装在跨度内。

<span class="symbol">§</span>

有什么想法吗？这样做时，我不想在我的网站上降低很多性能。

提前谢谢你，马特

Answer 1

findAndReplaceDOMText是一个很棒的库，用于执行此操作以及更多功能（如果您需要该功能）。

findAndReplaceDOMText 在 DOM 节点中搜索正则表达式匹配项，并使用指定元素包装所有匹配项（以及由节点边界分隔的部分匹配项）。

Github：https
://github.com/padolsey/findAndReplaceDOMText 演示： http: //padolsey.github.com/findAndReplaceDOMText/demo.html

它使用正则表达式匹配字符串，它会自动为分布在多个节点上的字符串工作：

<p id="t">
   123 456 99<span>9 foo</span>
</p>

findAndReplaceDOMText(/9+/, document.getElementById('t'), 'em');

这将导致：

<p id="t">
   123 456 <em>99</em><span><em>9</em> foo</span>
</p>

（来自https://github.com/padolsey/findAndReplaceDOMText/blob/master/readme.md的示例）

Answer 2

我会找到包含该§符号的所有段落（无需匹配每个段落），包装该符号的每次出现

$(".desc p:contains('§')").each(function() {
   $(this).html($(this).text().replace(/§/g, '<span class="symbol">§</span>'));   
})

Answer 3

尝试这个：

$(".desc p").each(function() {
    $(this).html($(this).text().replace(/§/g, "<span class=\"symbol\">§</span>"))
});

示例小提琴

Answer 4

见演示

$('p').each(function () {
  $(this).html($(this).text().replace(/\$/g, '<span>$</span>'));
});​