如何使用纯JavaScript基于标签数组实现输入自动补全最佳匹配

不要用整串正则匹配的思路，换成标签维度的匹配度打分机制就能实现需求，核心逻辑分三步：

• 预处理用户输入：按空格拆分出独立搜索词，统一转小写、过滤空字符串，消除多余空格、大小写差异带来的匹配误差
• 遍历索引条目算匹配分：逐个检查每个搜索词是否和条目下的标签匹配（默认支持前缀匹配，比如输入gov可命中governance标签），每命中1个搜索词给对应条目加1分
• 结果筛选排序：过滤掉分数低于阈值的条目，按匹配分从高到低排序后，提取对应的href属性返回即可

/**
 * 基于标签的匹配搜索函数
 * @param {Array} tagIndex 标签索引JSON数据
 * @param {string} userInput 用户输入内容
 * @param {number} [minMatchScore=1] 最低匹配分，低于该分数的结果不会返回
 * @returns {Array<string>} 匹配到的页面href列表，按匹配度从高到低排序
 */
function searchByTags(tagIndex, userInput, minMatchScore = 1) {
  // 拆分并标准化用户输入的搜索词
  const keywords = userInput.trim().toLowerCase().split(/\s+/).filter(Boolean);
  if (keywords.length === 0) return [];

  const matchResults = [];

  // 遍历所有条目计算匹配分
  for (const item of tagIndex) {
    // 适配当前索引结构：每个条目为单key对象
    const entryKey = Object.keys(item)[0];
    const entry = item[entryKey];
    const normalizedTags = entry.tags.map(tag => tag.toLowerCase());
    let score = 0;

    // 逐关键词计算命中情况
    for (const kw of keywords) {
      // 前缀匹配逻辑，需要精确匹配就换成 normalizedTags.includes(kw)
      const hit = normalizedTags.some(tag => tag.startsWith(kw));
      if (hit) score++;
    }

    if (score >= minMatchScore) {
      matchResults.push({
        href: entry.href,
        score
      });
    }
  }

  // 按匹配度倒序排列，提取href返回
  return matchResults.sort((a, b) => b.score - a.score).map(res => res.href);
}

用提供的索引数据做测试：

const pageIndex = [
  {
    "data-governance": {
      "tags": ["data", "governance"],
      "href": "data-governance.html"
    }
  },
  {
    "data-quality": {
      "tags": ["data", "quality"],
      "href": "data-quality.html"
    }
  }
];

// 测试1：输入"data"，默认阈值1，两个条目都命中data标签
console.log(searchByTags(pageIndex, "data"));
// 返回值：["data-governance.html", "data-quality.html"]

// 测试2：输入"data gov"，设置阈值为2（要求2个关键词全命中）
console.log(searchByTags(pageIndex, "data gov", 2));
// 返回值：["data-governance.html"]

匹配严格度可以通过第三个参数调整：如果要宽松匹配（只要命中任意一个关键词就返回）就保持默认值1，如果要所有输入关键词都命中才返回，就把阈值设为拆分后的关键词长度即可。如果不需要前缀模糊匹配，把代码里的tag.startsWith(kw)换成tag === kw就能实现标签精确匹配。

• 如果需要容错拼写错误，可以把前缀匹配换成编辑距离算法，计算搜索词和标签的相似度，相似度高于阈值就算命中
• 可以给标签设置权重，核心标签命中时加更高的分数，优化排序结果
• 更长的搜索词命中时可以加额外权重，减少短关键词带来的误匹配

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