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?

回答1:

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>

回答2:

Use :not pseudoselector and target all anchors that don't have the word http. This way you collect only the JS links. There's some normal anchors in the Snippet mixed in and they've been filtered out.

SNIPPET

var NodeList = document.querySelectorAll('a:not([href*="http"]');

console.log(NodeList);

<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="http://example.com/">Click</a>
<a href="javaSCRIPT:alert('something1')">Click</a>
<a href="JaVaScRIPt:prompt('something2')">Click</a>

<a href="https://google.com">Click</a>
<a href="JAVAscrIPt:prompt('something4')">Click</a>