How to get each hashtag inside the element and hide it?-CodePudding

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

CodePudding user response：

Use replaceAll

EDIT replaces all #words

var element = $('#product-nav-description');
var rgxp = new RegExp(/#[a-z]*/, 'gmi');
var hashtag = '#';
var repl = '<span >'   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>

CodePudding user response：

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