Solution 1 :

const convertToKebabCase = (string) => {
  return string.replace(/s+/g, '-').toLowerCase();

const h1 = document.querySelectorAll("h1");
  const kebabCaseText = convertToKebabCase(el.innerText); = kebabCaseText;
<h1 class="title_tag">Key Programming Language</h1>

Solution 2 :

This what you’re trying to do?

        var newId = $(this).text().replace(" ", "-");
        $(this).attr('id', newId);

Solution 3 :

or pure Javascript:

var elements = document.getElementsByTagName("1");
for (i = 0; i < elements.length; i++) {
    elemelements[i].id = elements[i].innerHTML;

Problem :

I want to add id for all the heading tag from dynamic content. The id should be based on innertext of the same element(this is to create the link for particular section).

if heading tag have <h1 class="title_tag">Key Programming Language</h1>,
the output should be <h1 id="key-programming-language" class="title_tag">Key Programming Language</h1>

i am not sure how get innerHTML value into id. Please suggest me the solution using any javascript(or)jquery(or)PHP


Comment posted by Teemu

You don’t need those ids. What is the practical use-case for a bunch of the ids? How about a case there will be two or more elements with the same text content? Wait! The headers are targets of hash links?

Comment posted by Charlie Bamford

Drupal has its own stack overflow network site at You may find help for your specific problem there.

Comment posted by Siva

@Teemu, there is no scenario of creating same element more than once. Because customer only going create the article. So i just want to create the id to point out the particular section using ID (like single page scrolling).

Comment posted by Teemu

Overly complex ids might still be a headache, wouldn’t