Question

假设我对内部的一些标题（H2，H3甚至H4）感到满意

我需要的是在我的html底部（正文之前）的一个简单的纯JavaScript，它可以包装指向内容中存在的每个标题的链接，并且href的值是id从每个标题开始。

<html>
<body>

<main>

<h2 id="foobar-link">FooBar Link</h2>
<p>Affogato +1 shaman, gochujang yr butcher organic blog hella glossier banh mi four loko tilde. Venmo beard pour-over activated charcoal health goth shoreditch banjo chicharrones blog yr helvetica hot chicken. Flexitarian succulents pinterest pug, vexillologist subway tile brunch synth edison bulb palo santo adaptogen PB</p>

<h3 id="foo">Foo</h3>
<p>Sartorial subway tile pork belly ennui salvia raclette intelligentsia waistcoat fanny pack before they sold out kogi cardigan photo booth. Biodiesel PBpoutine, post-ironic godard williamsburg pork belly skateboard fashion axe food</p>

<h4 id="bar">Bar</h4>
<p>Sartorial subway tile pork belly ennui salvia raclette intelligentsia waistcoat fanny pack before they sold out kogi cardigan photo booth. Biodiesel PBRpoutine, post-ironic godard williamsburg pork belly skateboard fashion axe food</p>


</main>

<script>
   //
</script>

</body>
</html>

输出

<html>
<body>

<main>

<h2 id="foobar-link">
<a href="/#foobar-link">FooBar Link</a>
</h2>
<p>Affogato +1 shaman, gochujang yr butcher organic blog hella glossier banh mi four loko tilde. Venmo beard pour-over activated charcoal health goth shoreditch banjo chicharrones blog yr helvetica hot chicken. Flexitarian succulents pinterest pug, vexillologist subway tile brunch synth edison bulb palo santo adaptogen PB</p>

<h3 id="foo">
<a href="/#foo">Foo</a>
</h3>
<p>Sartorial subway tile pork belly ennui salvia raclette intelligentsia waistcoat fanny pack before they sold out kogi cardigan photo booth. Biodiesel PBpoutine, post-ironic godard williamsburg pork belly skateboard fashion axe food</p>

<h4 id="bar">
<a href="/#bar">Bar</a>
</h4>
<p>Sartorial subway tile pork belly ennui salvia raclette intelligentsia waistcoat fanny pack before they sold out kogi cardigan photo booth. Biodiesel PBRpoutine, post-ironic godard williamsburg pork belly skateboard fashion axe food</p>


</main>

<script>
// the script here
</script>

</body>
</html>

任何帮助将不胜感激

Answer 1

const headers = document.querySelectorAll('h1,h2,h3,h4')

// replace "-" with space and capitalize words
function transformId(text) {
  return text.replace('-', ' ').replace(/\b./g, (x) => x.toUpperCase());
}

headers.forEach(header => {
  header.innerText = ''
  const anchor = document.createElement('a')
  anchor.innerText = transformId(header.id)
  anchor.href = `/#${header.id}`
  header.appendChild(anchor)
})

<h2 id="foobar-link">FooBar Link</h2>
<p>Affogato +1 shaman, gochujang yr butcher organic blog hella glossier banh mi four loko tilde. Venmo beard pour-over activated charcoal health goth shoreditch banjo chicharrones blog yr helvetica hot chicken. Flexitarian succulents pinterest pug, vexillologist
  subway tile brunch synth edison bulb palo santo adaptogen PB</p>

<h3 id="foo">Foo</h3>
<p>Sartorial subway tile pork belly ennui salvia raclette intelligentsia waistcoat fanny pack before they sold out kogi cardigan photo booth. Biodiesel PBpoutine, post-ironic godard williamsburg pork belly skateboard fashion axe food</p>

<h4 id="bar">Bar</h4>
<p>Sartorial subway tile pork belly ennui salvia raclette intelligentsia waistcoat fanny pack before they sold out kogi cardigan photo booth. Biodiesel PBRpoutine, post-ironic godard williamsburg pork belly skateboard fashion axe food</p>

Answer 2

尝试一下：

var headingsArr = Array.from(document.querySelectorAll('h1, h2, h3, h4'));

headingsArr.forEach(h => {
  var id = h.getAttribute('id');
  var link = document.createElement('a');
  link.setAttribute('href', '/#' + id);
  link.innerHTML = h.innerHTML;
  h.innerHTML = link.outerHTML;
});

Answer 3

var headings = document.querySelectorAll('h1,h2,h3,h4,h5,h6');

headings.forEach(node => {
    var anchor = document.createElement('a');
    anchor.innerText = node.id;
    anchor.href = '/' + node.id;
    node.insertElement(anchor);
});

Answer 4

document.querySelectorAll('h2, h3, h4').forEach(item=>{
    item.children[0].href=item.id
})

用纯JavaScript包装指向标题文本的链接

4 个答案: