如何根据包含特定单词的属性选择元素

【问题标题】：How to select an element based on an attribute containing a specific word如何根据包含特定单词的属性选择元素
【发布时间】：2018-03-16 01:01:16
【问题描述】：

我正在尝试从这样的突变中定位一个 img：

var image = mutation.parentElement.querySelector('img[alt="Text"]');

问题是，当图像具有多个 alt 值时，它不会被检测到。仅当图像仅包含“文本”而不包含“演示文本”时才匹配图像。

我想定位像这样的图像：

<img src="demo.jpg" alt="Apple-one Text" />

和

<img src="demo1.jpg" alt="Text" />

【问题讨论】：

img[alt~="Text"] 将匹配如果Text 是它自己的词。（请注意，您的实际问题是根据包含特定单词的属性选择元素）
使用img[alt*='Text']
已解决。非常感谢。 Chris 的解决方案有效。
Find an element in DOM based on an attribute value的可能重复

标签： javascript image selector alt

【解决方案1】：

您的选择器中缺少波浪号：

querySelector('img[alt~="Text"]')

波浪号表示如果提供的值是该属性中包含的以空格分隔的值列表之一，它将匹配该元素。所以上面将匹配<img alt="alt Text here" />，但不匹配<img alt="TextA" />。如果你确实想匹配第二种情况下的子字符串，[attr*=val] 是要走的路 - https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors

【讨论】：

鉴于 alt 属性的性质，我认为明确说明“您的选择器中缺少波浪号”考虑到该选择器背后的语义（当然，除非询问者是没有按预期使用 alt 属性，而是将其视为 class 属性或其他东西）。例如，如果替代文本以标点符号结尾，例如“Apple-one Text.”，这在alt文本中并不罕见，那么[alt~="Text"]将无法匹配。
作者没有分享他使用该特定属性的原因，所以我觉得我无法判断，限制我的帖子客观地回答问题“如何根据包含特定单词的属性”？