如何简化JavaScript程序？优化PDF检索重复变量与if else逻辑

核心优化思路 #

• 抽离重复的检索逻辑为独立工具函数，避免重复代码
• 用数组批量存储所有PDF的检索结果，无需单独定义几十个变量
• 支持自动识别页面内的PDF元素，新增PDF无需修改JS代码

优化后完整代码 #

// 独立检索逻辑函数，传入待检索文本和关键词，返回检索结果
function getSearchResult(content, searchStr) {
  const strLen = searchStr.length;
  const maxCount = 10;
  let gefunden = 0;
  let count = 0;
  let currentPos = 0;
  const contentLen = content.length;
  while (currentPos <= contentLen) {
    const hitPos = content.indexOf(searchStr, currentPos);
    if (hitPos === -1) break;
    gefunden = 1;
    count++;
    if (count > maxCount) {
      count = "Mehr als 10";
      break;
    }
    currentPos = hitPos + strLen;
  }
  return { gefunden, count };
}
function Suche(str) {
  // 自动获取所有id以pdf开头的元素，新增PDF只要id符合规则即可自动纳入检索
  const pdfElements = document.querySelectorAll('[id^="pdf"]');
  // 按pdf序号排序，避免选择器返回顺序错乱
  const sortedPdfs = Array.from(pdfElements).sort((a, b) => {
    const numA = parseInt(a.id.replace('pdf', ''));
    const numB = parseInt(b.id.replace('pdf', ''));
    return numA - numB;
  });
  // 检索结果存储数组，索引对应PDF序号-1，比如results[0]对应pdf1的结果
  const results = sortedPdfs.map(pdfEl => {
    return getSearchResult(pdfEl.innerHTML, str);
  });
  /* 后续使用结果的示例：
  要拿pdf3的gefunden值：results[2].gefunden
  要拿pdf5的count值：results[4].count
  要遍历所有结果：results.forEach((res, index) => {
    const pdfNum = index + 1;
    console.log(`pdf${pdfNum} 是否命中：${res.gefunden}，命中次数：${res.count}`);
  })
  */
  // 如果你需要保留原来的全局变量赋值（兼容旧代码后续逻辑），可以加下面这段：
  // results.forEach((res, index) => {
  //   const num = index + 1;
  //   window[`p${num}`] = sortedPdfs[index].innerHTML;
  //   window[`gefunden${num}`] = res.gefunden;
  //   window[`count${num}`] = res.count;
  // })
}

优化说明 #

• 替换了原代码里重复17次的检索逻辑，检索规则修改只需调整getSearchResult函数即可
• 无需手动维护p、gefunden、count三个系列的几十个变量，全部结果存在results数组里统一管理
• 新增PDF时只需在页面新增id为pdf[序号]的元素，不需要修改JS代码就能自动纳入检索范围
• 修复了原代码pdf2检索逻辑中误写count1的隐性bug

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