如何用原生JS查询包含指定值的数组型data属性DOM元素

当然可以用原生JS实现这个需求！下面给你几种实用的方案，适配你当前的data-tags格式：

方案1：解析数组后精准判断（推荐） #

这种方法会把data-tags的字符串值解析成真实的数组，然后用includes()方法判断是否包含目标标签，准确性最高：

// 第一步：获取所有带有data-tags属性的元素
const allTagElements = document.querySelectorAll('[data-tags]');

// 第二步：过滤出包含'foo'的元素
const elementsWithFoo = Array.from(allTagElements).filter(element => {
  // 处理属性值：把单引号替换为双引号，符合JSON解析要求
  const tagString = element.dataset.tags.replace(/'/g, '"');
  try {
    const tags = JSON.parse(tagString);
    // 确保解析结果是数组，并且包含目标标签
    return Array.isArray(tags) && tags.includes('foo');
  } catch (error) {
    // 如果属性值格式有误，直接跳过该元素
    return false;
  }
});

为什么推荐这个方案？ #

• 能准确处理数组结构，避免字符串匹配可能出现的误判（比如不会把'foobar'当成包含'foo'）
• 兼容各种合法的数组格式（比如元素间的空格差异）

方案2：正则字符串匹配（无需解析数组） #

如果不想解析数组，也可以用正则表达式直接匹配属性值，只要保证匹配的是独立的标签：

const elementsWithFoo = Array.from(document.querySelectorAll('[data-tags]')).filter(element => {
  const tagContent = element.dataset.tags;
  // 正则规则：匹配被引号包裹的'foo'，且前后是数组的边界/分隔符
  return /(^|\s|,)'foo'(\s|,|$)/.test(tagContent);
});

注意事项 #

• 这个方法依赖data-tags的格式稳定，如果标签里包含特殊字符（比如逗号、引号），正则需要调整
• 相比方案1，误判风险稍高，比如如果格式不规范就可能出问题

优化建议（可选） #

如果你能控制data-tags的格式，建议改成空格分隔的字符串，比如：

<li data-tags="foo bar baz">...</li>

这样就能直接用原生的属性选择器，一步到位：

const elementsWithFoo = document.querySelectorAll('[data-tags~="foo"]');

~=选择器专门用来匹配空格分隔的属性值中的某个独立项，非常方便！

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