如何在不指定属性名时选取属性值含指定字符串的节点？

嘿，这个需求用纯CSS确实搞不定哦——因为CSS的属性选择器必须明确指定属性名称，你试的[**="word"]或者[*="word"]都是无效的语法，自然不会生效。不过用JavaScript可以轻松实现这个需求，给你几个实用的思路：

1. 遍历所有元素，检查每个元素的属性值 #

这是最通用的方案，通过JavaScript遍历页面上的元素，逐个检查它们的所有属性值是否包含目标字符串：

const targetString = "word"; // 你要匹配的目标字符串
const allElements = document.querySelectorAll('*'); // 获取页面所有元素

allElements.forEach(element => {
  // 将元素的属性集合转为数组，方便遍历
  Array.from(element.attributes).forEach(attribute => {
    // 检查当前属性值是否包含目标字符串
    if (attribute.value.includes(targetString)) {
      console.log("找到匹配的元素：", element);
      // 这里可以添加你需要的操作，比如给元素加样式类
      element.classList.add('matched-element');
    }
  });
});

2. 缩小遍历范围提升性能 #

如果不需要检查页面上的所有元素，可以把遍历范围限定在特定类型的元素里，比如只检查div、a、p这些标签，这样能提升代码运行效率：

const targetString = "word";
// 只遍历指定类型的元素
const targetElements = document.querySelectorAll('div, a, p');

targetElements.forEach(element => {
  Array.from(element.attributes).forEach(attribute => {
    if (attribute.value.includes(targetString)) {
      // 执行你的操作
      element.style.border = "2px solid red";
    }
  });
});

3. 框架场景下的适配（比如React/Vue） #

如果你是在前端框架里开发，比如React，可以在组件挂载完成后（比如useEffect钩子）执行类似的逻辑；如果是Vue，可以在mounted生命周期里处理，核心逻辑和上面的原生JS一致，只是需要结合框架的DOM操作方式。

补充说明 #

目前CSS原生并没有支持“任意属性值包含指定字符串”的选择器，所以必须借助JavaScript来实现这个需求。上面的方案可以根据你的实际场景调整，比如区分大小写（用toLowerCase()统一转小写后再匹配）、精确匹配（用===代替includes()）等。

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