Ignoring case sensitiveness in querySelectorAll

Question

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?

Dendy

*= means that it contains the text, for example in jQuery docs: api.jquery.com/attribute-contains-selector – Stentorian

The querySelector* methods respect/use the CSS selectors: developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors – Backstitch

Answer 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>

Backstitch

This answer would make sense a few years from now, but not today, unless the asker intends to support only Chrome and Firefox for some reason (which, judging by this follow-up question, doesn't seem to be the case - but then that doesn't explain why they accepted this answer). – Elboa

@Elboa I accepted it soon after testing in only Chrome, and came to know only after 15 days that it doesn't work in IE/Edge. Will make an edit in the answer now referring the answer in the follow-up question. – Dendy

@Elboa The case-insensitivity qualifier is supported on Edge as of version 79 (2020-01) and Safari as of version 9 (2015-09). The answer you linked does not work on IE anyway, since IE does not support document.querySelectorAll(). – Garris

@zrhoffman: As foretold. (I didn't mention Safari because neither did Andreas, but fair.) Edge didn't even need to implement the feature on its own - it gained it by switching to Chromium. The feature never made it to EdgeHTML. As discussed in the linked question, querySelectorAll() is not the issue - it has been supported since IE8. – Elboa

Answer 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>

Lerma

Wow. This work much better when I have to exclude all only-javascript iframes :) Thanks! – Dendy

You are welcome, sir. :not comes in handy, but that one from Andreas is definitely one to write down and remember. – Lerma