: How can I automate the IDs of my HTML headings? <h3 id="My_Heading">My Heading</h3> <h3 id="My_Awesome_Heading">My Awesome Heading</h3> Whatever your heading text is, is what

@Odierno851

This cannot be done without some external script.

If you already use e.g. PHP/ASP to display the pages I would use that.

However you have to be cautions when you are going to automate this.

Remember ids MUST be unique on the page.

Also keep in mind that you should 'normalize' the generated ids to follow the rules for ids.

What do you want this for. Do the ids enable users to make use of 'internal' links on the page?

Vote Up Vote Down

@Harper822

You can do this with a little bit of jQuery

To take the ID and create your H3 text from that...

$(document).ready(function() {
$('h3').each(function() {
var newHeading = $(this).attr('id'); //Get the ID
newHeading = newHeading.replace('_', ' '); //Replace the _ with a space
$(this).text(newHeading); //Replace the H3 text with the new heading
});
});


...or to take the heading text and generate the ID from that...

$(document).ready(function() {
$('h3').each(function() {
var newID = $(this).text(); //Get the H3 text
newID = newID.replace(' ', '_'); //Replace spaces with _
$(this).attr('id', newID); //Attach the new ID
});
});


Of course, these both rely on the user having JS and for that reason, you should make sure you have a suitable fall-back for users with JS off

Vote Up Vote Down