javascriptdomqueryselectorfragment-identifier

How can I find the element that would have been targeted by a given fragment identifier?


When a browser navigates to an URL like http://example.com/#foo, it scrolls to the element identified by #foo; this element of the URI is called a fragment identifier. Suppose I have a fragment identifier for an element on the current page, which I have not yet navigated to. How can I find out which DOM node would have been targeted by it?

Is there a reliable way to find which DOM node would have been targeted by fragment identifier that catches all cases? If the solution uses querySelector, I would of course like it to be robust against unusual characters found within identifiers, however deprecated they may be.


Solution

  • A selector is the easiest way to say "An element with an ID or an a element with a name".

    CSS.escape will handle special characters for you.

    const fragment_id = `fdfd""fewf"`; // The test string I used for this
    const escaped_fragment_id = CSS.escape(fragment_id);
    const element = document.querySelector(`#${escaped_fragment_id}, a[name="${escaped_fragment_id}"`)
    

    Note that you might also need to use decodeURIComponent if the source of fragment_id has been escaped.