JavaScript搜索栏优化：拼写容错匹配与当前窗口打开结果

一、解决「当前窗口打开搜索结果」的问题 #

你之前用window.open()默认会打开新窗口，换成window.location.href直接赋值就能在当前窗口跳转，把原来的window.open("xxx.html")改成：

window.location.href = "files/aaroncarter.html";

如果需要禁止浏览器后退（可选），也可以用window.location.replace("files/aaroncarter.html")，常规场景用前者即可。

二、实现拼写容错匹配 #

200个页面还写一堆if不仅维护麻烦，也没法做容错，直接重构代码：

1. 统一管理名人页面映射 #

把所有名人的名称和对应页面地址整理成数组，后续维护更方便：

// 把200个名人信息都按这个格式加到数组里
const celebrityPages = [
  { name: "Aaron Carter", url: "files/aaroncarter.html" },
  { name: "Albert Einstein", url: "files/alberteinstein.html" },
  { name: "Corey Haim", url: "files/coreyhaim.html" },
  // ... 剩余197条数据补充在这里
];

2. 实现拼写相似度计算（编辑距离算法） #

用Levenshtein距离计算两个字符串的差异程度，数值越小代表相似度越高，以下是轻量实现：

function calculateEditDistance(a, b) {
  const aLower = a.toLowerCase().trim();
  const bLower = b.toLowerCase().trim();
  const matrix = Array.from({ length: aLower.length + 1 }, () => 
    Array(bLower.length + 1).fill(0)
  );

  for (let i = 0; i <= aLower.length; i++) matrix[i][0] = i;
  for (let j = 0; j <= bLower.length; j++) matrix[0][j] = j;

  for (let i = 1; i <= aLower.length; i++) {
    for (let j = 1; j <= bLower.length; j++) {
      const cost = aLower[i - 1] === bLower[j - 1] ? 0 : 1;
      matrix[i][j] = Math.min(
        matrix[i - 1][j] + 1,    // 删除字符
        matrix[i][j - 1] + 1,    // 插入字符
        matrix[i - 1][j - 1] + cost // 替换字符
      );
    }
  }
  return matrix[aLower.length][bLower.length];
}

3. 重构搜索逻辑，匹配最相似结果 #

修改openPage函数，遍历数组找到最匹配的结果：

function openPage() {
  const inputVal = document.getElementById("search").value.trim();
  if (!inputVal) return; // 空输入直接返回

  let bestMatch = null;
  let minDistance = Infinity;

  celebrityPages.forEach(celebrity => {
    const distance = calculateEditDistance(inputVal, celebrity.name);
    if (distance < minDistance) {
      minDistance = distance;
      bestMatch = celebrity;
    }
  });

  // 设定容错阈值，比如差异字符<=2就算匹配成功（可根据需求调整）
  if (bestMatch && minDistance <= 2) {
    window.location.href = bestMatch.url; // 当前窗口跳转
  } else {
    // 无匹配结果时的处理，比如弹出提示
    alert("未找到相关名人页面");
  }
}

补充说明 #

• 阈值<=2可以根据需求调整，像你举例的Cory haim和Corey haim编辑距离为1，完全符合匹配条件；
• 处理输入时用了trim()和转小写，避免空格、大小写差异影响匹配结果。

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