时间戳

首页 > 解决方案 > 如果单词包含特定字母的组合，则将整个单词包含在 span 元素中

javascript - 如果单词包含特定字母的组合，则将整个单词包含在 span 元素中

问题描述

我有下面的代码，可以在 span 元素中查找并包装这些单词，但只有它们。如果它包含这些词，我想包装一个完整的词。例如：GSHAA 或 GS​​H112

我的代码：

var words = ["GSHT","GSH","SHV"];

$('.list-icons a').html(function(_,html) {
    var reg = new RegExp('('+words.join('|')+')','gi');
    return html.replace(reg, '<span class="wrap">$1</span>', html)
});

标签： javascript

解决方案

为了使您的正则表达式匹配整个单词而不是仅匹配子字符串，您应该使用\b. 请参阅此解决方案：

var words = ["a", "b", "c"];

// To prevent errors when looking for words with special characters
const escapeRegex = (str) => str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

$('.list-icons a').html(function(_, html) {
  const query = words.map(escapeRegex).join('|');
  const regex = new RegExp(`(\\b\\w*(?:${query})\\w*\\b)`, 'gi');
  return html.replace(regex, '<span class="wrap">$1</span>')
});
.wrap {
  background: black;
  color: white
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-icons">
  <li><a>Apple pie ice</a></li>
  <li><a>Blueberry cake</a></li>
  <li><a>Honey</a></li>
</ul>

简化的(\\b\\w*word\\w*\\b)意思是“查找以单词边界（空格或换行符）开头的字符串，然后您的word后面和前面是任意数量的字母数字字符 ( \w*)，并再次以单词边界结尾”。

因为您将单词插入到正则表达式中，所以应该对它们进行转义，以便特殊字符（如 $ . 和 +）不会导致正则表达式解析错误。我接受并修改escapeRegex了这个答案。

推荐阅读