JavaScript表格过滤优化：重音匹配、忽略HTML标签及指定列

针对你提出的三个表格过滤需求，这里给出修改后的完整实现代码，并逐一说明解决思路：

修改后的完整代码 #

JavaScript #

// 定义法语重音字符映射，键是基础字符，值是对应的重音变体
const accentMap = {
  'a': '[àáâãäå]',
  'c': '[ç]',
  'e': '[èéêë]',
  'i': '[ìíîï]',
  'o': '[òóôõö]',
  'u': '[ùúûü]',
  'y': '[ýÿ]'
};

// 生成支持重音匹配的正则模式
const buildAccentInsensitiveRegex = (filter) => {
  // 把过滤词中的每个字符替换成包含重音变体的字符集
  const pattern = filter.split('').map(char => {
    return accentMap[char.toLowerCase()] || char;
  }).join('');
  // 不区分大小写
  return new RegExp(pattern, 'i');
};

const myFunction = () => {
  // 配置：需要忽略的列索引（从0开始计数，比如忽略第3列就是索引2）
  const ignoredColumns = [2];
  const trs = document.querySelectorAll('#myTable tr:not(.header)');
  const filter = document.querySelector('#myInput').value.trim();
  
  // 如果过滤词为空，显示所有行
  if (!filter) {
    trs.forEach(tr => tr.style.display = '');
    return;
  }
  
  const regex = buildAccentInsensitiveRegex(filter);
  
  // 检查单个单元格是否匹配：使用textContent获取纯文本，忽略HTML标签内容
  const isFoundInTd = td => regex.test(td.textContent.trim());
  
  // 检查一行中是否有符合条件的单元格（排除指定列）
  const isFound = (tds) => tds.some(isFoundInTd);
  
  const setTrStyleDisplay = (tr) => {
    // 过滤掉需要忽略的列，只保留要检查的td
    const validTds = Array.from(tr.children).filter((_, idx) => !ignoredColumns.includes(idx));
    tr.style.display = isFound(validTds) ? '' : 'none';
  };
  
  trs.forEach(setTrStyleDisplay);
};

HTML #

<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="搜索.." 
  title="输入关键词搜索">
<br>

<div align="center">
    <table border="1" id="myTable" >
        <!-- 表头可以加上.header类，避免被过滤 -->
        <tr class="header">
            <th>词汇</th>
            <th>说明</th>
            <th>忽略列示例</th>
        </tr>
        <tr>
            <td>cédille</td>
            <td><a href="google.com">book</a></td>
            <td>这列不会被搜索</td>
        </tr>
        <tr>
            <td>Le tréma</td>
            <td>accent </td>
            <td>测试内容</td>
        </tr>
        <tr>
            <td>garçon </td>
            <td>accept</td>
            <td>忽略列</td>
        </tr>
    </table>
</div>

解决方案说明 #

1. 法语重音字符匹配 #

• 定义accentMap对象，把每个基础字符映射到包含其所有重音变体的正则字符集
• 编写buildAccentInsensitiveRegex函数，将用户输入的过滤词转换成支持重音匹配的正则模式，比如输入e会变成[èéêëe]，这样就能匹配所有带重音的e和普通e
• 正则使用i标志，保证不区分大小写

2. 忽略HTML标签内容 #

• 把原代码中的td.innerHTML替换成td.textContent.trim()，textContent会提取单元格的纯文本内容，完全忽略HTML标签及其中的属性（比如href里的链接地址、class样式等），只匹配用户可见的文本

3. 忽略指定整列 #

• 添加ignoredColumns配置数组，填入需要忽略的列索引（注意索引从0开始计数，比如要忽略第3列，就写[2]）
• 在处理每行的单元格时，通过filter方法过滤掉这些索引对应的td，只对剩余列进行匹配检查

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