Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #39568 > unrolled thread

Re: case insensitive flag

Back to article view | Back to comp.lang.javascript

This discussion starts older than the indexed window; earlier articles aren't shown. The article labeled Started by below is the oldest one visible, not the original post.

Contents

  Re: case insensitive flag Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-04 14:02 +0100
    Re: case insensitive flag Andrew Poulos <ap_prog@hotmail.com> - 2021-03-05 10:54 +1100
      Re: case insensitive flag Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-05 02:23 +0100
        Re: case insensitive flag Andrew Poulos <ap_prog@hotmail.com> - 2021-03-05 14:39 +1100
          Re: case insensitive flag Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-05 19:45 +0100
      Re: case insensitive flag "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2021-03-04 19:30 -0800
        Re: case insensitive flag Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2021-03-05 19:41 +0100

#39568 — Re: case insensitive flag

Andrew Poulos wrote:

> I had some code that looked like this
> 
>    document.querySelectorAll('a[href^="goto"]')
> 
> that failed because users were setting the href to cases different from
> the expected case.

The attribute name, or the attribute value?

> I was thinking that this was going to be a PIA to
> resolve till a search revealed that in modern browsers there's a flag to
> make an attribute selector case-insensitive.
> 
> So for those don't know here's the simple resolution:
> 
>    document.querySelectorAll('a[href^="goto" i]')

This is a relatively new feature:

<https://www.w3.org/TR/selectors-4/#attribute-case>
<https://caniuse.com/css-case-insensitive>

I would be wary to rely on it on the Internet at this point (the intranet 
might be a different case); I would use XPath instead (or as a fallback), 
which is better supported:

<https://dom.spec.whatwg.org/#xpathexpression>
(DOM Level 3 XPath is “retired”: <https://www.w3.org/TR/DOM-Level-3-XPath/>)

<https://caniuse.com/document-evaluate-xpath>

With WHATWG DOM and XPath 1.0 (assuming that you mean the attribute value):

  const xpathCaseInsensitive = function (name, v) {
    return `translate(${name}, '${v.toUpperCase()}', '${v.toLowerCase()}')`;
  };

  const s = 'goto';
  let snapshots = document.evaluate(
    `//a[starts-with(${xpathCaseInsensitive('@href', s)}, '${s}')]`,
    document.body,
    null,
    XPathResult.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
  );

  /* alternatively (more backwards-compatible):
   *
   * var snapshots = new Array(snapshots.snapshotLength).keys()
   *   .map((el, i) => snapshots.snapshotItem(i));
   */
  snapshots = [...new Array(snapshots.snapshotLength)].map(
    (el, i) => snapshots.snapshotItem(i)
  );

If at some point in the future XPath 2.0 will be supported sufficiently,
you can write simpler

  let snapshots = document.evaluate(
    "//a[starts-with(lower-case(@href), 'goto')]",
    document.body,
    null,
    XPathResult.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
  );

  snapshots = Array.from(
    new Array(snapshots.snapshotLength),
    (el, i) => snapshots.snapshotItem(i)
  );

I think this should be posted to <news:comp.lang.javascript> (as well). 
Adjust follow-ups if necessary.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [next] | [standalone]

#39575

On 5/03/2021 12:02 am, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> I had some code that looked like this
>>
>>     document.querySelectorAll('a[href^="goto"]')
>>
>> that failed because users were setting the href to cases different from
>> the expected case.
> 
> The attribute name, or the attribute value?
> 
>> I was thinking that this was going to be a PIA to
>> resolve till a search revealed that in modern browsers there's a flag to
>> make an attribute selector case-insensitive.
>>
>> So for those don't know here's the simple resolution:
>>
>>     document.querySelectorAll('a[href^="goto" i]')
> 
> This is a relatively new feature:
> 
> <https://www.w3.org/TR/selectors-4/#attribute-case>
> <https://caniuse.com/css-case-insensitive>

This page indicates that it works in most places (except for IE)
<https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>

> I would be wary to rely on it on the Internet at this point (the intranet
> might be a different case); I would use XPath instead (or as a fallback),
> which is better supported:
> 
> <https://dom.spec.whatwg.org/#xpathexpression>
> (DOM Level 3 XPath is “retired”: <https://www.w3.org/TR/DOM-Level-3-XPath/>)
> 
> <https://caniuse.com/document-evaluate-xpath>
> 
> With WHATWG DOM and XPath 1.0 (assuming that you mean the attribute value):
> 
>    const xpathCaseInsensitive = function (name, v) {
>      return `translate(${name}, '${v.toUpperCase()}', '${v.toLowerCase()}')`;
>    };
> 
>    const s = 'goto';
>    let snapshots = document.evaluate(
>      `//a[starts-with(${xpathCaseInsensitive('@href', s)}, '${s}')]`,
>      document.body,
>      null,
>      XPathResult.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
>    );
> 
>    /* alternatively (more backwards-compatible):
>     *
>     * var snapshots = new Array(snapshots.snapshotLength).keys()
>     *   .map((el, i) => snapshots.snapshotItem(i));
>     */
>    snapshots = [...new Array(snapshots.snapshotLength)].map(
>      (el, i) => snapshots.snapshotItem(i)
>    );
> 
> If at some point in the future XPath 2.0 will be supported sufficiently,
> you can write simpler
> 
>    let snapshots = document.evaluate(
>      "//a[starts-with(lower-case(@href), 'goto')]",
>      document.body,
>      null,
>      XPathResult.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE
>    );
> 
>    snapshots = Array.from(
>      new Array(snapshots.snapshotLength),
>      (el, i) => snapshots.snapshotItem(i)
>    );
> 
> I think this should be posted to <news:comp.lang.javascript> (as well).
> Adjust follow-ups if necessary.

Thanks for the code.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#39577

Andrew Poulos wrote:

> On 5/03/2021 12:02 am, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>>     document.querySelectorAll('a[href^="goto"]')
>>>
>>> that failed because users were setting the href to cases different from
>>> the expected case.
>> 
>> The attribute name, or the attribute value?

Well?

>>>     document.querySelectorAll('a[href^="goto" i]')
>> This is a relatively new feature:
>> 
>> <https://www.w3.org/TR/selectors-4/#attribute-case>
>> <https://caniuse.com/css-case-insensitive>
> 
> This page indicates that it works in most places (except for IE)
> <https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>

When in doubt, probably trust caniuse.com more than MDN.

>> […] 
> Thanks for the code.

You’re welcome.  I learned a thing or two about the new Array-related 
features and XPath while writing it; so thank you for the question :)

F’up2 comp.lang.javascript

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39579

On 5/03/2021 12:23 pm, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
> 
>> On 5/03/2021 12:02 am, Thomas 'PointedEars' Lahn wrote:
>>> Andrew Poulos wrote:
>>>>      document.querySelectorAll('a[href^="goto"]')
>>>>
>>>> that failed because users were setting the href to cases different from
>>>> the expected case.
>>>
>>> The attribute name, or the attribute value?
> 
> Well?

The value which, in my case, starts "goto".

>>>>      document.querySelectorAll('a[href^="goto" i]')
>>> This is a relatively new feature:
>>>
>>> <https://www.w3.org/TR/selectors-4/#attribute-case>
>>> <https://caniuse.com/css-case-insensitive>
>>
>> This page indicates that it works in most places (except for IE)
>> <https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>
> 
> When in doubt, probably trust caniuse.com more than MDN.

Of the online resources I usually refer to MDN first. Good to know that 
in some things, other sites are more "trustworthy".

>>> […]
>> Thanks for the code.
> 
> You’re welcome.  I learned a thing or two about the new Array-related
> features and XPath while writing it; so thank you for the question :)

Well I'm all chuffed.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#39582

Andrew Poulos wrote:

> On 5/03/2021 12:23 pm, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>> On 5/03/2021 12:02 am, Thomas 'PointedEars' Lahn wrote:
>>>> Andrew Poulos wrote:
>>>>>      document.querySelectorAll('a[href^="goto"]')
>>>>>
>>>>> that failed because users were setting the href to cases different
>>>>> from the expected case.
>>>> The attribute name, or the attribute value?
>> Well?
> 
> The value which, in my case, starts "goto".

OK.
 
>>>>>      document.querySelectorAll('a[href^="goto" i]')
>>>> This is a relatively new feature:
>>>>
>>>> <https://www.w3.org/TR/selectors-4/#attribute-case>
>>>> <https://caniuse.com/css-case-insensitive>
>>> This page indicates that it works in most places (except for IE)
>>> <https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors>
>> When in doubt, probably trust caniuse.com more than MDN.
> 
> Of the online resources I usually refer to MDN first. Good to know that
> in some things, other sites are more "trustworthy".

I recommended caniuse.com over MDN *in this case* because both MDN and 
caniuse.com are community-supported projects, but the focus of caniuse.com 
is documenting compatibility while MDN provides documentation in general.

Now I can also see that caniuse.com features a last-modified date on the top 
of the site, and you can see that it was last modified on 2021-02-27, while 
the MDN page that you referred to was last modified on 2021-02-19.
 
>>>> […]
>>> Thanks for the code.
>> 
>> You’re welcome.  I learned a thing or two about the new Array-related
>> features and XPath while writing it; so thank you for the question :)
> 
> Well I'm all chuffed.

:)

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#39578

On Thursday, March 4, 2021 at 6:43:11 PM UTC-6, Thomas 'PointedEars' Lahn wrote:

> When in doubt, probably trust caniuse.com more than MDN. 

caniuse.com seemed to benefit more from MDN than vice-versa:

<https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/>

[toc] | [prev] | [next] | [standalone]

#39581

Michael Haufe (TNO) wrote:

> On Thursday, March 4, 2021 at 6:43:11 PM UTC-6, Thomas 'PointedEars' Lahn
> wrote:
>> When in doubt, probably trust caniuse.com more than MDN.
> 
> caniuse.com seemed to benefit more from MDN than vice-versa:
> 
> <https://hacks.mozilla.org/2019/09/caniuse-and-mdn-compat-data-collaboration/>

Note the date.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web