[英]Wrap link to heading text with pure javascript
假设我对内部的一些标题感到满意（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>
任何帮助将不胜感激
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>
尝试这个：
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;
});
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);
});
document.querySelectorAll('h2, h3, h4').forEach(item=>{
item.children[0].href=item.id
})
当用户使用纯 Javascript 按下文本时，更改 url 链接的一部分
[英]Change part of url link when user press text with pure Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.