可以使用 JavaScript/jQuery 重定向 HTML 锚点吗？

Question

我目前正在一个拥有多种传统短链接格式的网站上工作。 其中之一特别成问题，因为它链接到不再存在的 HTML 锚点（特别是使用没有前导零的id段落编号）。 新格式的段落编号带有前导零； 虽然这使事情变得可预测，但它也打破了旧的短链接。

---

例子

旧短链接： https ://example.org/ ? AC_I_1

预期目标： https : //example.com/augsburg-confession/article-i/#ac-i-0001

---

从旧格式重定向到新格式相对简单，但 regex 到目前为止只需要一个。 在这种情况下，问题在于锚值不会发送到服务器，因此无法重写/重定向。 相反，显然需要一个客户端解决方案（例如，JavaScript）。

目标

然后，目标是将所有少于四位数的段落编号（即 HTML id ）重定向到它们的四位数等价物（例如， /#1 >> #0001 ）。

---

在寻找实现此目的的方法时，我遇到了这个似乎是一个好的开始的答案，但我不确定如何更改它以说明段落编号。

Answer 1

您可以将数字更改为具有前导零，如下所示：

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

然后，您可以获取旧 href 中的数字并添加前导零：

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

为了更改为新格式，新的 href 应该是这样的：

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

因此，要更改所有旧锚点，请在使用查询选择器加载它们后获取它们：

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

并使用 forEach 更改 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) 
})

以一些链接为例：

 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/>

我希望这有帮助！