周圍添加文本內容的HTML標籤

Question

我有2個或多個標記段落：

<p>#tag1 #tag2</p> 

現在我想找到的所有的標籤和包裝他們是這樣的：

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

Answer 1

$('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>

Answer 2

您可以使用.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>