JavaScript图片搜索功能大小写不敏感问题求助

问题出在你只对其中一方做了大小写转换——要实现大小写不敏感的搜索，必须把搜索输入文本和图片的标签数据都转换成相同的大小写格式（比如全小写）再进行匹配。

修改后的完整代码如下：

function search(){
  // 将输入的搜索文本转为全小写
  var searchText = document.getElementById("searchInput").value.toLowerCase();
  var images = document.querySelectorAll(".image_container > img");
  
  if(searchText.length > 0){
    images.forEach((image) => {
      image.classList.add("hide");
      // 同时将图片的tags数据转为全小写后再匹配
      if(image.dataset.tags.toLowerCase().indexOf(searchText) > -1){
        image.classList.remove("hide");
      }
    });
  }else{
    images.forEach((image) => {
        image.classList.remove("hide");
    });
  }
}

关键修改点： #

• 对输入的searchText调用toLowerCase()，统一转为小写
• 匹配时对image.dataset.tags也调用toLowerCase()，确保两边的字符串大小写完全一致

这样不管你输入"josh"、"JOsh"还是"Josh"，都会转换成小写的"josh"去匹配标签内容，就能解决大小写不匹配的问题了。

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