How to select an element based on an attribute containing a specific word

Question

I am trying to target an img from a mutation like so:

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

The problem is, when an image has multiple alt values it's not being detected. It matches an image only if it contains "Text" only so not "Demo Text".

I want to target images like this one:

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

and

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

Answer 1

You are missing a tilde in your selector:

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

The tilde means it will match the element if the value provided is one of a space-separated list of values contained in that attribute. So the above will match <img alt="alt Text here" /> but not <img alt="TextA" />. If you do want to match a substring like in the second case, [attr*=val] is the way to go - https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors