javascript - 如何使用 jQuery 选择特定字符后段落内的所有文本

Question

我想使用 jQuery 来查找特定字符，在本例中是一个或多个段落中的“#”，删除该字符，然后将所有内容包装在 span 标记中。

这是 HTML 示例:

<p>Lorem ipsum dolor sit amet # consectetur adipiscing elit<p>

jQuery 应该将上面的代码转换成这样:

<p>Lorem ipsum dolor sit amet <span>consectetur adipiscing elit</span></p>

我已经在这上面花了几个小时，我知道解决方案应该相对简单，但我找不到。是否有任何 jQuery 专家愿意提供帮助？谢谢!

Answer 1

这是一个 working jsFiddle demo :

HTML:

<p>Lorem ipsum dolor sit amet # consectetur adipiscing elit</p>

jQuery:

$("p:contains('#')").each(function() {

   var $this = $(this),
       splitText = $this.text().split("#"),
       formattedText = splitText[0] + "<span>" + splitText[1] + "</span>";

   $this.html(formattedText);

});

-- 如果您想为多次出现保留嵌套跨度:--

使用这个 working jsFiddle demo :

HTML:

<p>Lorem ip#sum dolor sit amet # consectetur adip#iscing elit</p>

jQuery:

$("p:contains('#')").each(function() {

   var $this = $(this),
       thisText = $this.text(),
       numberOfOccurrences = thisText.split("#").length,
       formattedText = thisText.replace(/\#/g, "<span>");

    for (var i = 1; i < numberOfOccurrences; i++) { formattedText += "</span>"; }

    $this.html(formattedText);

});

更新说明:

• 多次出现 jsFiddle 已更新以删除多余的 var splitText，因为它是不必要的。
• 移动了多次出现的 jsFiddle 并更新了 css 以直观地显示跨度。