如何检测元素classList是否部分包含指定字符串片段？

API 探路者

2026-8-29

实现说明

classList.contains() 本身只支持完整类名的精确匹配，没有内置的部分/片段匹配能力，要实现类名包含指定片段的匹配效果，用原生JS可以选下面两种常用方案：

方案1：遍历类列表做片段校验

逻辑很直接：拿到每个元素的所有类名，逐个检查是否包含目标关键词，只要有一个类名命中就匹配，逻辑灵活可自定义：

const all = document.querySelectorAll('div');
let variable = 'fruits'; // 该变量可被其他逻辑动态修改

all.forEach((item) => {
  // 将classList转为数组，判断是否存在包含目标片段的类名
  const hasMatch = Array.from(item.classList).some(className => className.includes(variable));
  if (hasMatch) {
    item.style.backgroundColor = 'red';
  }
});

这个方案的灵活性很高，如果你需要更严谨的匹配规则（比如只匹配类名完全等于关键词、或者以关键词-为前缀的BEM风格类名，避免误匹配citrus-fruits这类中间包含关键词的类名），可以直接修改判断条件：

// 示例：仅匹配fruits本身、以及fruits-开头的类名
const hasMatch = Array.from(item.classList).some(className => 
  className === variable || className.startsWith(`${variable}-`)
);

方案2：动态构造属性选择器查询

利用CSS属性选择器[class*="xxx"]（匹配class属性包含xxx片段的元素），把动态关键词拼入选择器直接查询目标元素，不需要先获取所有div再遍历过滤，代码更简洁：

let variable = 'fruits';
// 直接查询所有class包含目标片段的div元素
const matchedEls = document.querySelectorAll(`div[class*="${variable}"]`);
matchedEls.forEach(item => {
  item.style.backgroundColor = 'red';
});