Добавить 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>