多表格JS内容过滤优化：阿拉伯字母归一化与多实例适配

核心修改思路 #

• 多表格独立适配：通过自定义属性建立搜索框与目标表格的关联，摆脱固定ID限制，支持任意数量的独立表格。
• 异形字母等效匹配：新增字符映射表，对异形字符做归一化处理，让语义相同的异形字符（如阿拉伯语أ、آ、ا、إ）在匹配时视为同一字符。

完整实现代码 #

JavaScript 部分

// 异形字符映射表：键为需替换的字符，值为统一基准字符
const charMap = new Map([
  ['أ', 'ا'],
  ['آ', 'ا'],
  ['إ', 'ا'],
  // 可扩展其他语言的异形字符，例如：
  // ['é', 'e'],
  // ['è', 'e']
]);

// 字符串归一化：移除变音符号 + 替换异形字符
const normalizeString = str => {
  // 先移除变音符号
  let normalized = str.normalize("NFD").replace(/\p{Diacritic}/gu, "");
  // 替换所有异形字符为基准字符
  charMap.forEach((target, source) => {
    normalized = normalized.replace(new RegExp(source, 'gu'), target);
  });
  return normalized.toLowerCase();
};

// 表格过滤函数，通过事件参数定位当前操作的搜索框与表格
const filterTable = (event) => {
  const input = event.target;
  const tableId = input.dataset.tableTarget;
  if (!tableId) return;

  const trs = document.querySelectorAll(`#${tableId} tr:not(.header)`);
  const filterText = normalizeString(input.value);
  const regex = new RegExp(filterText, 'i');
  
  // 判断单元格是否匹配归一化后的内容
  const isMatch = td => regex.test(normalizeString(td.innerText));
  // 判断行内是否有匹配的单元格
  const rowHasMatch = childrenArr => [...childrenArr].some(isMatch);
  
  // 设置行的显示状态
  trs.forEach(tr => {
    tr.style.display = rowHasMatch(tr.children) ? '' : 'none';
  });
};

HTML 部分

<!-- 第一个表格及对应搜索框 -->
<input 
  type="text" 
  id="searchInput1" 
  onkeyup="filterTable(event)" 
  data-table-target="table1"
  placeholder="搜索表格1.." 
  title="搜索表格1">
<br>

<div align="center">
    <table border="1" id="table1">
        <tr class="header">
            <th>列1</th>
            <th>列2</th>
        </tr>
        <tr>
            <td>cédille</td>
            <td><a href="#">book</a></td>
        </tr>
        <tr>
            <td>Le tréma</td>
            <td>أكتب</td>
        </tr>
        <tr>
            <td>اكتب </td>
            <td>accept</td>
        </tr>
    </table>
</div>

<br>

<!-- 第二个表格及对应搜索框 -->
<input 
  type="text" 
  id="searchInput2" 
  onkeyup="filterTable(event)" 
  data-table-target="table2"
  placeholder="搜索表格2.." 
  title="搜索表格2">
<br>

<div align="center">
    <table border="1" id="table2">
        <tr class="header">
            <th>列1</th>
            <th>列2</th>
        </tr>
        <tr>
            <td>text2</td>
            <td><a href="#">book</a></td>
        </tr>
        <tr>
            <td>different text</td>
            <td>words </td>
        </tr>
        <tr>
            <td>garçon </td>
            <td>more</td>
        </tr>
    </table>
</div>

关键改动说明 #

1. 多表格适配

   • 每个搜索框通过data-table-target属性绑定对应表格的ID，实现搜索框与表格的一一对应。
   • 过滤函数通过event.target获取当前触发输入的搜索框，动态获取目标表格，不再依赖固定ID，支持无限扩展表格数量。

2. 异形字母匹配

   • charMap映射表可灵活添加不同语言的异形字符对，便于后续扩展。
   • normalizeString函数先移除字符的变音符号，再将所有异形字符替换为基准字符，确保搜索文本和表格内容都经过归一化处理后再做正则匹配，实现等效字符的精准匹配。

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