基于alt属性实时筛选图片：支持特殊字符转换与大小写不敏感

Hey Rodrigo，我来帮你把这个动态图片匹配的功能补全！结合你提到的需求——输入文本时根据图片alt属性动态筛选，还要处理特殊字符和大小写不敏感——我整理了一套完整的实现方案，直接就能套进你现有代码里。

核心思路梳理 #

我们需要搞定这几个关键环节：

• 实时监听输入框的输入内容
• 把用户输入的带特殊字符的文本转换成纯ASCII格式（比如coração转成coracao）
• 对用户输入和图片alt属性做大小写不敏感的归一化匹配
• 动态控制图片的显示/隐藏，只保留匹配成功的

完整代码实现与说明 #

1. 先写核心的特殊字符归一化函数 #

这一步是匹配的关键，因为你提到图片的alt属性不含特殊字符。我们用JavaScript的字符归一化API来处理：

function normalizeText(text) {
  // 先统一转小写，再拆分重音字符，最后移除重音符号
  return text.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

举个例子：

• 输入CORAÇÃO → 归一化后变成coracao
• 输入ÉxAmPlE → 归一化后变成example
  完全能匹配到你那些不含特殊字符的alt属性。

2. 输入监听与匹配逻辑 #

假设你的HTML结构是这样的（可以根据你现有代码调整标签和类名）：

<input type="text" id="imageSearch" placeholder="输入关键词找图片...">
<div class="gallery">
  <img src="heart.jpg" alt="coracao">
  <img src="demo.jpg" alt="example">
  <img src="sample.jpg" alt="test">
</div>

然后是JavaScript部分，实现实时筛选：

const searchInput = document.getElementById('imageSearch');
const galleryImages = document.querySelectorAll('.gallery img');

// 监听输入事件，实时筛选
searchInput.addEventListener('input', function() {
  const userInput = this.value.trim();
  const normalizedInput = normalizeText(userInput);

  galleryImages.forEach(img => {
    // 对图片的alt属性也做归一化处理
    const normalizedAlt = normalizeText(img.alt);
    // 匹配规则：空输入显示所有图片，否则检查alt是否包含归一化后的输入
    const isMatched = userInput === '' || normalizedAlt.includes(normalizedInput);
    
    // 控制图片显示状态
    img.style.display = isMatched ? 'inline-block' : 'none';
  });
});

3. 关键细节解释 #

• 大小写不敏感：通过先把输入和alt都转成小写，不管用户输入大写、混合大小写都能精准匹配。
• 特殊字符兼容：normalize("NFD")会把带重音的字符拆成基础字符+重音标记，再用正则去掉标记，完美解决带重音字符的匹配问题。
• 空输入处理：当用户清空输入框时，所有图片自动恢复显示，符合常规搜索的交互逻辑。

4. 可选优化：防抖提升性能 #

如果你的图片数量很多，频繁输入会触发大量DOM操作，建议加个防抖函数减少触发频率：

// 防抖工具函数
function debounce(func, delay = 200) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 用防抖包装筛选逻辑
searchInput.addEventListener('input', debounce(function() {
  const userInput = this.value.trim();
  const normalizedInput = normalizeText(userInput);

  galleryImages.forEach(img => {
    const normalizedAlt = normalizeText(img.alt);
    const isMatched = userInput === '' || normalizedAlt.includes(normalizedInput);
    img.style.display = isMatched ? 'inline-block' : 'none';
  });
}));

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