unix_root unix_root - 4 months ago 7
HTML Question

Ignoring case sensitiveness in querySelectorAll

I have this code:

<a href="javascript:alert('something1')">Click</a>
<a href="javascript:prompt('something2')">Click</a>
<a href="javascript:alert('something3')">Click</a>
<a href="javascript:prompt('something4')">Click</a>


Now, using
console.log(document.querySelectorAll("a[href^='javascript:prompt('],a[href^='javascript:alert(']"));
would fetch all such elements as NodeList.

But, I have the HTML text given with different case of letters in
javascript
. That is, look at the following code:

<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="JaVaScRIPt:prompt('something2')">Click</a>
<a href="javaSCRIpt:alert('something3')">Click</a>
<a href="JAVAscrIPt:prompt('something4')">Click</a>


I referred this, but using
*=
instead of
^=
doesn't help. I know
^=
equates to 'starts with', but what does
*=
mean?

How can I write a generic
querySelectorAll
for all such permutations of
javascript
?

Answer

At least Chrome and Firefox support the case-insensitivity qualifier i in an selector (as defined in here: https://drafts.csswg.org/selectors-4/#overview)

var divs = document.querySelectorAll('div[class^="foo" i]');
console.log(divs.length);  // should be 3 :)
<div class="foobar">foobar</div>
<div class="Foobar">Foobar</div>
<div class="fOobar">fOobar</div>

Comments