使用JavaScript实现过滤搜索：重音字符与普通字符等效匹配

当然可以做到！在JavaScript里处理这类搜索需求，核心思路就是把带重音的字符标准化为对应的普通字符，再进行匹配逻辑。下面给你几种实用的实现方案：

方法一：使用Unicode标准化+正则替换（推荐） #

这是最通用的方案，基于Unicode标准处理重音字符，不需要手动维护字符映射表，兼容性也很好（现代浏览器和Node.js都支持）。

原理是：用String.normalize("NFD")把带重音的字符分解成「基础字符+重音标记」的组合（比如é会被拆成e+重音符号），再用正则把所有重音标记替换掉，最后转成统一大小写做匹配。

代码示例：

// 标准化字符串，移除重音标记
function normalizeString(str) {
  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

// 搜索过滤示例
const searchQuery = "cafe";
const items = ["Café", "Cafe", "Cafè", "Café au Lait"];

const filteredItems = items.filter(item => 
  normalizeString(item.toLowerCase()).includes(normalizeString(searchQuery.toLowerCase()))
);

console.log(filteredItems); // 输出：["Café", "Cafe", "Cafè", "Café au Lait"]

方法二：手动维护字符映射表 #

如果你需要自定义某些特殊字符的匹配规则（比如某些罕见重音字符标准化处理不到的情况），可以手动创建一个重音字符到普通字符的映射表，逐个替换字符串中的字符。

代码示例：

// 自定义重音字符映射表
const accentMap = {
  'á': 'a', 'é': 'e', 'í': 'i', 'ó': 'o', 'ú': 'u',
  'à': 'a', 'è': 'e', 'ì': 'i', 'ò': 'o', 'ù': 'u',
  'â': 'a', 'ê': 'e', 'î': 'i', 'ô': 'o', 'û': 'u',
  // 可根据需求添加更多字符
};

// 移除重音字符
function removeAccents(str) {
  return str.split('').map(char => accentMap[char] || char).join('');
}

// 搜索过滤示例
const searchQuery = "cafe";
const items = ["Café", "Cafe", "Cafè"];

const filteredItems = items.filter(item => 
  removeAccents(item.toLowerCase()).includes(removeAccents(searchQuery.toLowerCase()))
);

console.log(filteredItems); // 输出：["Café", "Cafe", "Cafè"]

这个方法的好处是完全可控，但缺点是需要手动维护映射表，字符覆盖不全的话可能会有遗漏。

方法三：使用Intl.Collator进行多语言匹配 #

如果你的搜索需要支持多语言的特殊重音规则，可以用Intl.Collator——它是JavaScript内置的国际化比较器，能根据不同语言的规则处理字符匹配。

设置sensitivity: 'base'时，会忽略重音和大小写，把相同基础字符视为等价（比如é和e会被判定为相同）。不过它更适合完全匹配或排序场景，做包含匹配的话，还是结合第一种方法更灵活。

代码示例：

const searchQuery = "cafe";
const items = ["Café", "Cafe", "Cafè", "Café au Lait"];

// 创建国际化比较器，忽略重音和大小写
const collator = new Intl.Collator('en', { sensitivity: 'base' });

// 结合标准化的包含匹配
const filteredItems = items.filter(item => 
  normalizeString(item.toLowerCase()).includes(normalizeString(searchQuery.toLowerCase()))
);

console.log(filteredItems); // 输出：["Café", "Cafe", "Cafè", "Café au Lait"]

总结 #

• 优先推荐方法一：基于Unicode标准，无需手动维护，兼容性好，能覆盖绝大多数重音字符场景。
• 若需自定义规则，选择方法二。
• 多语言场景可以结合方法三的国际化能力。

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