javascript CSS选择器,用于按属性名称start匹配元素

06odsfpq  于 2023-04-19  发布在  Java
关注(0)|答案(3)|浏览(117)

是否有任何CSS选择器来匹配这些元素?(我需要它的adblocker配置,看了W3C selectors文档-没有找到提示。通用解决方案需要,因为部分后data-d-得到随机的网站)。

<div data-d-9y3x>
<div data-d-m01>
<div data-d-whatever>
fd3cxomn

fd3cxomn1#

不可以,目前无法根据名称为 * starting with * 某个值的属性的存在来选择元素。* starts with * 选择仅适用于属性值。
这样的选择器在CSS选择器4级规范中也没有提到,所以它看起来不会很快可用。
您有以下选择:

  • 使用一组选择器,所有可能的属性名称值都采用element[attribute-name]。但当确切的属性名称不固定/未知时,此选项不可行。
  • 使用JavaScript(或您喜欢的其他脚本库)。下面是一个非常快速的粗略示例,以供将来的访问者使用。
var el = document.getElementsByTagName('div');

for (var i = 0; i < el.length; i++) {
  var attr = el[i].attributes; /* get all attributes on the element */
  for (var j = 0; j < attr.length; j++) {
    if (attr[j].name.indexOf('data-') == 0) { /* if element has an attribute whose name has data- */
      el[i].style.color = 'red';
      break;
    }
  }
}
<div data-d-9y3x>Some</div>
<div data-d-m01>text</div>
<div data-d-whatever>content</div>
<div test-data-d-whatever>and</div>
<div d-whatever>more</div>
<div testdata-d-whatever>...</div>
oaxa6hgo

oaxa6hgo2#

使用ES6+,你可以使用spread操作符(...),然后过滤那些属性名称以data-d-开头的元素:

var res = [...document.querySelectorAll("*")]
    .filter(t => [...t.attributes]
                 .filter(({ name }) => name.startsWith("data-d-")).length > 0)

console.log(res);
<div data-d-9y3x>Some</div>
<div data-d-m01>text</div>
<div data-d-whatever>content</div>
<div test-data-d-whatever>and</div>
<div d-whatever>more</div>
<div testdata-d-whatever>...</div>
xxhby3vn

xxhby3vn3#

@Alireza_Ahmadi的答案非常棒,可以扩展为使用主节点选择器来精确定位合格属性......
具有用于专用属性的jQ的标准选择器将是:jQuery('[role="field-form"]')

var res = [...(jQuery('[role="field-form"]').get())]
    .filter(t => [...t.attributes]
                 .filter(({ name }) => name.startsWith("formula_")).length > 0)

相关问题