so I have a div containing a description of the item in which there is a hashtag. I want to get every existing hashtag and want to hide all existing hashtags so that they have a hidden class. How can I do that?
var element = $('#product-nav-description');
var rgxp = new RegExp(/^#\!/, 'g');
var hashtag = '#';
var repl = '<span class="hidden">' + hashtag + '</span>';
element.html(element.html().replace(hashtag, repl));.hidden {
background-color: yellow;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product-nav-description">
<p>
Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum #machine #vendingmachine #mach #tech
</p>
</div>You can use regex I change. You can run code to test
var element = $('#product-nav-description');
var rgxp = new RegExp(/([#])\w+/g);
//var hashtag = '#';
//var repl = '<span class="hidden">' + hashtag + '</span>';
var str_content_origin = String(element.get(0).outerHTML);
var str_content = str_content_origin.match(rgxp);
$.each(str_content, function(i,v){
var hashtag = v.trim();
var repl = '<span class="hidden">' + v + '</span>';
//console.log(element.html());
element.html(element.html().replace(hashtag, repl));
}).hidden {
background-color: yellow;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product-nav-description">
<p>
Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum #machine #vendingmachine #math #tech
</p>
</div>Use replaceAll
EDIT replaces all #words
var element = $('#product-nav-description');
var rgxp = new RegExp(/#[a-z]*/, 'gmi');
var hashtag = '#';
var repl = '<span class="hidden">' + hashtag + '</span>';
element.html(element.html().replaceAll(rgxp, repl));.hidden {
background-color: yellow;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product-nav-description">
<p>
Dummy Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum #machine #vendingmachine #mach #tech
</p>
</div>