如何在文本內容周圍添加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>