如何优化jQuery列表筛选功能，取消大小写敏感性？

嘿，这个问题太常见了！要让筛选功能不区分大小写，核心思路就是把用户输入的关键词和列表项的文本统一转换成相同的大小写（全小写或全大写）之后再做匹配，这样就能彻底忽略大小写差异了。

最稳妥的方案：统一转换大小写 #

这种方法简单直接，还能避免正则表达式可能带来的特殊字符问题，适合绝大多数场景。我们只需要修改筛选逻辑里的比较部分：

function filterList() {
  const input = document.getElementById("myInput");
  // 把用户输入转成小写
  const filter = input.value.toLowerCase();
  const ul = document.getElementById("myUL");
  const liItems = ul.getElementsByTagName("li");

  for (let i = 0; i < liItems.length; i++) {
    const itemText = liItems[i].textContent || liItems[i].innerText;
    // 把列表项的文本也转成小写，再判断是否包含关键词
    if (itemText.toLowerCase().includes(filter)) {
      liItems[i].style.display = "";
    } else {
      liItems[i].style.display = "none";
    }
  }
}

这里用toLowerCase()把用户输入和列表项文本都转成小写，再用includes()判断是否包含（你也可以继续用原来的indexOf() > -1，效果完全一致）。这样不管用户输入Item1、ITEM1还是item1，都能精准匹配到对应的列表项。

备选方案：使用正则表达式的忽略大小写标志 #

如果你更喜欢用正则实现匹配，也可以给正则加上i标志来忽略大小写，不过要注意先处理输入中的正则特殊字符（比如.、*这类），避免匹配出错：

function filterList() {
  const input = document.getElementById("myInput");
  // 先转义正则特殊字符，再创建忽略大小写的正则实例
  const escapedFilter = input.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
  const regex = new RegExp(escapedFilter, 'i');
  const ul = document.getElementById("myUL");
  const liItems = ul.getElementsByTagName("li");

  for (let i = 0; i < liItems.length; i++) {
    const itemText = liItems[i].textContent || liItems[i].innerText;
    if (regex.test(itemText)) {
      liItems[i].style.display = "";
    } else {
      liItems[i].style.display = "none";
    }
  }
}

这个方案的好处是支持更灵活的匹配规则，但如果只是做简单的“包含匹配”，第一种统一转大小写的方法会更省心，不用额外处理特殊字符的问题。

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