如何获取元素内的每个主题标签并将其隐藏？

Question

所以我有一个 div，其中包含对包含主题标签的项目的描述。我想获取每个现有的主题标签并希望隐藏所有现有的主题标签，以便它们具有隐藏类。我该怎么做？

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>

Answer 1

您可以使用我更改的正则表达式。你可以运行代码来测试

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>

Answer 2

使用replaceAll

EDIT 替换所有#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>