使用RegEx和jQuery实现匹配完整单词或提取含匹配片段的完整单词

1. 核心逻辑说明 #

我们通过正则匹配规则实现「只要单词包含目标搜索片段，就返回完整单词」的需求，核心正则逻辑如下：

• 用\b匹配单词边界，确保最终返回结果是完整单词
• 用\w*匹配搜索片段前后可能存在的0个或多个字符，既可以匹配完整相同的单词，也可以匹配包含片段的长单词
• 全局匹配模式g可以一次性拿到所有符合条件的结果
• 额外增加正则特殊字符转义逻辑，避免搜索关键词包含.+*?等正则保留字符时出现匹配错误

2. 完整代码示例 #

工具函数与核心搜索逻辑 #

// 转义正则特殊字符，避免匹配异常
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

/**
 * 搜索包含目标片段的完整单词
 * @param {string} keyword 搜索关键词
 * @param {string} targetStr 待检索的文本字符串
 * @returns {Array} 匹配到的所有完整单词数组
 */
function searchMatchWords(keyword, targetStr) {
  if (!keyword.trim()) return [];
  const escapedKeyword = escapeRegExp(keyword);
  // 正则末尾的i表示大小写不敏感，不需要可删除
  const reg = new RegExp(`\\b\\w*${escapedKeyword}\\w*\\b`, 'gi');
  return targetStr.match(reg) || [];
}

结合jQuery的页面交互示例 #

$(function() {
  // 监听搜索框输入事件
  $('#search-input').on('input', function() {
    const keyword = $(this).val().trim();
    // 从页面元素获取待检索的纯文本内容
    const targetStr = $('#search-content').text();
    // 拿到匹配结果
    const result = searchMatchWords(keyword, targetStr);
    // 自定义结果渲染逻辑，示例为直接输出到页面
    $('#match-result').text('匹配结果：' + result.join('、'));
  });
});

3. 效果验证 #

用你提供的示例测试：

待匹配关键词：great，待检索字符串：great greater.
调用searchMatchWords('great', 'great greater.')，返回结果为["great", "greater"]，完全符合需求。

4. 自定义调整说明 #

• 如果需要支持带连字符-、撇号'等特殊字符的单词（比如mother-in-law、don't），可以把正则里的\w替换成[a-zA-Z0-9'-]这类你需要支持的字符集
• 如果不需要大小写不敏感匹配，删除正则参数里的i即可
• 待检索文本如果包含HTML标签，请使用.text()获取纯文本内容再匹配，避免匹配到标签内的字符

内容的提问来源于stack exchange，提问作者letsforum