Question

Using JavaScript what’s the simplest way to set a headers id from it’s content and swap spaces for hyphens and make lowercase.

For example, if header is:

<h1>Header one content</h1>

how can we change that to:

<h1 id="header-one-content">Header one content</h1>

Thanks

Answer 1

Another way, iterating through all H1 tags and performing the operation:

$("h1").each(function() {
    var hyphenated = $(this).text().replace(/\s/g,'-');
    $(this).attr('id',hyphenated);
  }
);