如果任何属性包含值，则jQuery查找元素答案

【问题标题】：jQuery Find Elements if any of the attributes contains a value如果任何属性包含值，则jQuery查找元素
【发布时间】：2021-05-01 22:25:06
【问题描述】：

选择 any 属性包含特定字符串的元素的最佳方法是什么？

如果我知道属性名称，我知道以下工作：

// Select any element where data-test attribute contains rbl-value
var items = $("*[data-test*='rbl-value']");

但我可以在任何属性中包含rbl-value，并且我希望能够处理这些元素/属性。

<div class="rbl-value:itemClass">
   <p>Don't process me...</p>
   <p data-inputname="rbl-value:inputName">data-inputname should be processed.</p>
</div>

假设有聪明的解决方案，它的性能如何？

【问题讨论】：

部分属性名称没有通配符选择器。见How to select value by attribute name starts with。如果你不能缩小容器、类或标记名的范围，性能就不会很好，否则你需要遍历整个 DOM 并检查每个元素的属性
我害怕那个。
没有 "any attribute's value" 选择器。所以你运气不好。如果您不了解您的选择器 - 在构建该应用程序时似乎没有系统化。或者是 XY problem.
另外，“处理那些元素/属性”是什么意思？
想想像 angular/react/vue 这样的东西，他们可以在属性中添加像 {{expression}} 这样的东西。我假设这些是元素/属性组合的固定列表？

标签： jquery

【解决方案1】：

使用"*" 选择器或更确切地说"body *"（如@cars10m 建议）循环（昂贵地）所有元素以跳过head 子元素。
使用Element.attributes 及其.name 和.value 属性：

const ELS_all = document.querySelectorAll("*");

ELS_all.forEach(EL => {
  [...EL.attributes].forEach((a) => {
    if (/rbl-value:/.test(a.value)) {
      console.log(a.name, a.value);
    }
  })
});

<div class="rbl-value:itemClass">
   <p>Don't process me...</p>
   <p data-inputname="rbl-value:inputName">data-inputname should be processed.</p>
</div>

然后要提取特定的rbl-value:<THIS STUFF HERE>，你可以使用这个small Regular Expression：

/(?<=rbl-value:)\w+\b/g

const a = { // Just to imitate the returned El.attributes entry object 
  value: "asd123 ghjkasd rbl-value:inputName hjlqwezuo rbl-value:something asd"
};

const rblValues = a.value.match(/(?<=rbl-value:)\w+\b/g);
console.log(rblValues)

【讨论】：

非常好！！如果您对文档顶部的标题、样式和脚本部分不感兴趣，可以将第一个选择器更改为 "body *"。

【解决方案2】：

好的，因为“所有属性”不仅包括以“data-”开头的所有属性，还包括 DOM 元素可能具有的所有其他“可能”属性，因此解决方案并不那么简单。

专注于“通常的嫌疑人”怎么样？ IE。查看每个元素的特定属性列表怎么样？

也许以下可以作为起点？

$("body *").not("script").each(function(){
  console.log(JSON.stringify(Object.entries({tag:this.tagName,dataset:this.dataset,id:this.id,name:this.name,href:this.href,class:this.className})));
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="rbl-value:itemClass">
   <p>Don't process me...</p>
   <p data-inputname="rbl-value:inputName">data-inputname should be processed.</p>
</div>

显然，这需要进一步的工作，并不是一个“完整的答案”。但也许这是朝着正确方向迈出的一步？

【讨论】：

我需要任何元素和任何属性。即<div class="rbl-value:itemClass">.