JavaScript如何将花式文本转为普通文本实现搜索正常匹配

匹配失效由Unicode同形异码问题导致：页面中的花式文本不属于普通ASCII英文字符，是Unicode数学粗体字母区段的特殊装饰字符，和键盘输入的普通英文字母编码完全不同，直接用indexOf()做精确字符串匹配时，视觉效果一致的字符因编码差异无法命中。
举例：普通大写字母Y的Unicode编码为U+0059，花式粗体𝗬的Unicode编码为U+1D5EC，二者是完全独立的字符。

核心逻辑是对搜索关键词、待匹配条目文本先做Unicode兼容归一化，把所有装饰类花式字符统一转换为对应的普通基础字符，再执行匹配，同时统一大小写避免大小写差异导致的匹配遗漏。
修复后的完整JavaScript代码如下：

// 文本归一化：转换花式字符、统一小写、去除首尾多余空格
const formatText = (text) => text.normalize('NFKD').toLowerCase().trim();

document.getElementById("search").addEventListener("keyup", function(evt) {
  const keyword = formatText(evt.target.value);
  document.querySelectorAll(".subjects .subject").forEach(subject => {
    const content = formatText(subject.textContent);
    subject.classList.toggle("hide", content.indexOf(keyword) === -1);
  });
}, false);

• normalize('NFKD')会执行Unicode兼容范式分解，自动将各类花式装饰字符（粗体/斜体/全角/带圈等同形字母）转换为对应的普通基础字符，从编码层解决同形字匹配问题
• 统一转小写后，输入you、YOU、You都可以正常命中目标内容
• 用classList.toggle简化原有if/else类名切换逻辑，代码更简洁
• 原有HTML中<input id="search"></input>写法不规范，input是自闭合标签，建议修改为<input id="search" />，不修改也不会影响核心搜索功能

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