咨询多页面HTML表格全局搜索方案：游戏Mod目录优化需求

针对你拆分多页面HTML表格后需要单位置搜索的需求，以下是几个适合非专业开发者的简单可行方案，均无需后端服务：

方案1：静态搜索索引+锚点跳转（最易实现） #

这是门槛最低的方案，仅需基础HTML和少量JS：

• 给每个表格行添加全局唯一的id，比如<tr id="mod-00123">，确保所有页面的行id不重复
• 制作一个单独的搜索页：
  1. 放置一个简单的搜索输入框：<input type="text" id="searchInput" placeholder="搜索Mod...">
  2. 提前整理所有Mod的搜索列内容和对应跳转链接（格式如page3.html#mod-00123），可以用Excel整理后转成HTML列表或JSON数组。手动维护的话用HTML列表更简单：

     <ul id="searchResults"></ul>
     

  3. 加一段极简JS实现搜索过滤：

     const searchInput = document.getElementById('searchInput');
     const resultsList = document.getElementById('searchResults');
     // 提前把所有条目存在数组里
     const modEntries = [
       { name: "XXX Mod", url: "page1.html#mod-00001" },
       { name: "YYY Mod", url: "page2.html#mod-00002" }
       // 所有条目依次添加
     ];
     
     searchInput.addEventListener('input', function() {
       const keyword = this.value.toLowerCase();
       resultsList.innerHTML = '';
       const matches = modEntries.filter(item => item.name.toLowerCase().includes(keyword));
       matches.forEach(item => {
         const li = document.createElement('li');
         li.innerHTML = `<a href="${item.url}">${item.name}</a>`;
         resultsList.appendChild(li);
       });
     });
     

• 在每个表格页面添加行高亮脚本，跳转后自动定位并高亮：

  window.addEventListener('load', () => {
    const targetId = window.location.hash.slice(1);
    const targetRow = document.getElementById(targetId);
    if (targetRow) {
      targetRow.style.backgroundColor = '#fff3cd'; // 自定义高亮色
      targetRow.scrollIntoView({ behavior: 'smooth' });
    }
  });
  

方案2：轻量前端搜索库（更快更精准） #

如果条目数量极多，用纯前端搜索库lunr.js提升搜索效率：

• 提前生成一个JSON格式的搜索索引文件（比如search-index.json），每条包含搜索字段、页面URL和行id：

  [
    { "id": "mod-00001", "name": "XXX Mod", "url": "page1.html#mod-00001" },
    { "id": "mod-00002", "name": "YYY Mod", "url": "page2.html#mod-00002" }
  ]
  

• 在搜索页引入lunr.js并实现搜索：

  <script src="https://cdn.jsdelivr.net/npm/lunr@2.3.9/lunr.min.js"></script>
  <input type="text" id="searchInput">
  <div id="results"></div>
  
  <script>
    let modIndex;
    // 加载索引文件并初始化搜索
    fetch('search-index.json')
      .then(res => res.json())
      .then(data => {
        modIndex = lunr(function () {
          this.field('name');
          this.ref('id');
          data.forEach(item => this.add(item));
        });
        // 监听搜索输入
        document.getElementById('searchInput').addEventListener('input', function() {
          const keyword = this.value;
          const results = modIndex.search(keyword);
          const resultHtml = results.map(result => {
            const item = data.find(i => i.id === result.ref);
            return `<p><a href="${item.url}">${item.name}</a></p>`;
          }).join('');
          document.getElementById('results').innerHTML = resultHtml;
        });
      });
  </script>
  

• 同样添加方案1中的页面高亮脚本，实现跳转后高亮。

方案3：浏览器端跨页面实时搜索（无需提前生成索引） #

如果不想提前维护索引，可通过JS实时加载各页面内容进行搜索，适合条目数量适中的场景：

<input type="text" id="searchInput">
<div id="results"></div>

<script>
  const pageUrls = ['page1.html', 'page2.html', 'page3.html']; // 所有表格页面URL
  const searchInput = document.getElementById('searchInput');
  const resultsContainer = document.getElementById('results');

  searchInput.addEventListener('input', async function() {
    const keyword = this.value.toLowerCase();
    if (!keyword) {
      resultsContainer.innerHTML = '';
      return;
    }
    resultsContainer.innerHTML = '搜索中...';
    let allMatches = [];

    // 遍历所有页面加载内容
    for (const url of pageUrls) {
      try {
        const res = await fetch(url);
        const html = await res.text();
        const parser = new DOMParser();
        const doc = parser.parseFromString(html, 'text/html');
        // 假设搜索表格第一列，可根据实际调整选择器
        const rows = doc.querySelectorAll('table tr');
        rows.forEach(row => {
          const searchText = row.querySelector('td:first-child').textContent.toLowerCase();
          if (searchText.includes(keyword)) {
            const rowId = `mod-${encodeURIComponent(searchText.slice(0, 10))}`;
            row.id = rowId;
            allMatches.push({
              text: searchText,
              url: `${url}#${rowId}`
            });
          }
        });
      } catch (err) {
        console.error(`加载页面${url}失败:`, err);
      }
    }

    // 展示结果
    resultsContainer.innerHTML = allMatches.length 
      ? allMatches.map(m => `<p><a href="${m.url}">${m.text}</a></p>`).join('')
      : '无匹配结果';
  });
</script>

• 同样在各页面添加高亮脚本，确保跳转后定位到目标行。

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