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

Groups > comp.infosystems.www.authoring.stylesheets > #8357

Re: case insensitive flag

Cross-posted to 2 groups.

Followups directed to: comp.lang.javascript

Show all headers | View raw

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.

Back to comp.infosystems.www.authoring.stylesheets | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

case insensitive flag Andrew Poulos <ap_prog@hotmail.com> - 2021-03-02 17:48 +1100
  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

csiph-web