如何在文本内容周围添加HTML标签？

Question

我有一个包含2个或更多标签的段落：

<p>#tag1 #tag2</p>

现在我想找到所有标签并将它们包装成如下：

<p><span class="someClass">#tag1</span> <span class="someClass">#tag2</span></p>

Answer 1

您可以将.html()与传递当前值的回调一起使用并使用正则表达式：

#\w+\b

这意味着：匹配任何以＃开头的单词

$("p").html(function(index, html) { 
        return html.replace(/(\#\w+\b)/g, "<span>$1</span>") 
       });
            

span { color: orange }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>#tag1 #tag2</p>
<p>Here's another #tag3</p>

Answer 2

$('p:contains("#")').each(function() {
    var tags = $(this).text().split(' ');
    var wrapped_tags = '';

    tags.forEach(function(tag) {
      wrapped_tags += '<span class="someClass">'+tag+'</span> ';
    });

    $(this).html(wrapped_tags);
});

.someClass {
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>#tag1 #tag2</p>