代码之家 › 专栏 › 技术社区 › Yudy Ananda

用纯javascript将链接换行到标题文本

html javascript

-1

Yudy Ananda · 技术社区 · 7 年前

假设我对里面的一堆标题(h2,h3,也许h4)有了内容。

我需要的是一个简单的纯javascript在我的HTML底部(在正文之前),它可以包装一个链接到内容和 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>

任何帮助都将不胜感激

4 回复 | 直到 7 年前

Krzysztof Grzybek 7 年前

试试这个:

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;
});

Smollet777 7 年前

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>

-1

Croot 7 年前

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);
});

-1

Anastasios Barous 7 年前

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