周围添加文本内容的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>