It is possible to redirect HTML anchors using JavaScript/jQuery?

Question

I am currently working on a site that has a number of legacy shortlink formats. One of them is particularly problematic because it links to HTML anchors that no longer exist (specifically paragraph numbers using id without leading zeros). The new format has paragraph numbers with leading zeros; whereas this makes things predictable, it also breaks old shortlinks.

---

Example

Old Shortlink: https://example.org/?AC_I_1

Intended Target: https://example.com/augsburg-confession/article-i/#ac-i-0001

---

Redirecting from the old format to the new is relatively trivial, but regex will take one only so far. In this case, the issue lies in the fact that anchor values are not sent to the server, and so cannot be rewritten/redirected. Instead, a client-side solution (e.g., JavaScript) is clearly needed.

Goal

The goal, then, is to have all paragraph numbers (i.e., HTML id's) with fewer than four digits redirected to their four-digit equivalents (e.g., /#1 >> #0001).

---

In searching for a way to accomplish this, I came across this answer that seems like a good start, but I'm uncertain how to alter it to account for the paragraph numbers.

Answer 1

You can change a number to have leading zeroes like this:

("0000" + number).slice(-4)

Then you can get the number in the old href and add the leading zeroes:

("0000" + oldLink.href.replace("https://example.org/?AC_I_", "")).slice(-4)

In order to change to the new format, the new href should be something like this:

"https://example.com/augsburg-confession/article-i/#ac-i-" + ("0000" + oldLink.href.replace("https://example.org/?AC_I_", "")).slice(-4) 

So, to change all the old anchors, get them after they are loaded with a query selector:

let oldLinks = document.querySelectorAll("a[href^='https://example.org/?AC_I_']");

And use forEach to change the href:

oldLinks.forEach(function (oldLink) {
  oldLink.href = "https://example.com/augsburg-confession/article-i/#ac-i-" + ("0000" + oldLink.href.replace("https://example.org/?AC_I_", "")).slice(-4) 
})

With some links as an example:

let oldLinks = document.querySelectorAll("a[href^='https://example.org/?AC_I_']");
console.log("anchors before change:", oldLinks)
oldLinks.forEach(function (oldLink) {
  oldLink.href = "https://example.com/augsburg-confession/article-i/#ac-i-" + ("0000" + oldLink.href.replace("https://example.org/?AC_I_", "")).slice(-4) 
})
console.log("anchors after change:", oldLinks)

<p><a href="https://example.org/?AC_I_1" rel="nofollow noreferrer">https://example.org/?AC_I_1</a><p/>
<p><a href="https://example.org/?AC_I_2" rel="nofollow noreferrer">https://example.org/?AC_I_2</a><p/>
<p><a href="https://example.org/?AC_I_3" rel="nofollow noreferrer">https://example.org/?AC_I_3</a><p/>
<p><a href="https://example.org/?AC_I_4" rel="nofollow noreferrer">https://example.org/?AC_I_4</a><p/>
<p><a href="https://example.org/?AC_I_5" rel="nofollow noreferrer">https://example.org/?AC_I_5</a><p/>
<p><a href="https://example.org/?AC_I_10" rel="nofollow noreferrer">https://example.org/?AC_I_10</a><p/>
<p><a href="https://example.org/?AC_I_50" rel="nofollow noreferrer">https://example.org/?AC_I_50</a><p/>
<p><a href="https://example.org/?AC_I_213" rel="nofollow noreferrer">https://example.org/?AC_I_213</a><p/>
<p><a href="https://example.org/?AC_I_3204" rel="nofollow noreferrer">https://example.org/?AC_I_3204</a><p/>

I hope this helps!