Certain URL fragments cause javascript error

Problem/Motivation

When a page contains a form and a fragment with special characters is in the url, such as http://mysite.com/#badfragment=broken, a javascript error will be thrown: Uncaught Error: Syntax error, unrecognized expression: .error, #badfragment=broken.

This issue happens in form.js near line 300:

    const hash = url.hash.substring(1);
    if (hash) {
      const $target = $(`#${hash}`);

Notice that the anchor is being directly pulled from the URL and used in the selector. However, `#${hash}` will not yield a valid selector, resulting in an error being thrown (breaking all JS on the page).

Steps to reproduce

Add this link to a page <a href="#edit-contact/broken">This is an anchor link with a broken fragment</a> then click it, and the error will appear in the console.

Alternatively visit https://local.site/user/register#badfragment=broken on a site.

Proposed resolution

Provide a helper that converts a fragment into a safe ID that can be used for a jquery or other selector.

Remaining tasks

Need help writing tests that assert no console errors visiting form urls with complex fragments?
Review

User interface changes

n/a

API changes

n/a

Data model changes

n/a

Release notes snippet

n/a