如何在原生JS结合Mixitup.js中添加正则实现前缀匹配文本过滤？

我明白你现在的需求啦——想要让Mixitup的过滤只匹配元素类名的开头，而不是任意位置的子串。当前输入“reen”会带出“green”，就是因为默认的包含式匹配逻辑，咱们用正则就能轻松修正这个问题。

核心思路 #

要实现精准的前缀匹配，我们需要：

• 用正则的^锚定类名的起始位置
• 同时处理元素有多个类名的情况（比如<div class="item green">），所以要匹配「字符串开头+输入值」或者「空格+输入值」的模式，确保是完整类名的前缀

具体代码修改 #

假设你原本的过滤逻辑是这样的：

const container = document.querySelector('.container');
const searchInput = document.querySelector('.search-input');

// 初始化Mixitup
const mixer = mixitup(container);

// 输入框监听事件
searchInput.addEventListener('input', function() {
  const query = this.value.toLowerCase();
  
  // 原来的包含式过滤
  mixer.filter(function() {
    return this.classList.value.toLowerCase().includes(query);
  });
});

现在把过滤逻辑改成正则前缀匹配：

const container = document.querySelector('.container');
const searchInput = document.querySelector('.search-input');

const mixer = mixitup(container);

// 辅助函数：转义正则特殊字符（避免输入.、*等字符导致正则出错）
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

searchInput.addEventListener('input', function() {
  let query = this.value.trim().toLowerCase();
  
  // 输入为空时显示所有元素
  if (!query) {
    mixer.filter('all');
    return;
  }

  // 创建前缀匹配正则：匹配以query开头的完整类名
  const escapedQuery = escapeRegExp(query);
  const regex = new RegExp(`(^|\\s)${escapedQuery}`, 'i');

  // 应用过滤
  mixer.filter(function() {
    return regex.test(this.classList.value);
  });
});

代码细节解释 #

1. escapeRegExp函数：处理用户输入中的正则特殊字符（比如.、*），避免这些字符被当作正则语法解析，导致匹配逻辑出错
2. 正则表达式(^|\\s)${escapedQuery}：
   • (^|\\s)：匹配字符串开头或者空格，确保我们匹配的是一个完整类名的起始位置（不会误匹配类名中间的子串）
   • ${escapedQuery}：转义后的用户输入值，保证正则语法安全
   • 'i'标志：忽略大小写，让过滤更友好（比如输入“Blue”也能匹配“blue”类）
3. regex.test(this.classList.value)：检查当前元素的类列表字符串是否符合前缀匹配规则

这样修改后，输入“blue”只会匹配类名以blue开头的元素，输入“reen”就不会再匹配“green”啦～

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