How to set element id based on innerHTML using javascript

Question

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).

Ex: 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

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? — Teemu
– Teemu, Commented Jul 8, 2021 at 17:58
Drupal has its own stack overflow network site at drupal.stackoverflow.com You may find help for your specific problem there. — Charlie Bamford
– Charlie Bamford, Commented Jul 8, 2021 at 17:58
@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). — Siva
– Siva, Commented Jul 8, 2021 at 18:05
Overly complex ids might still be a headache, wouldn't 'header' + runningID do? — Teemu
– Teemu, Commented Jul 8, 2021 at 18:12

Pablo Valverde Llamas · Accepted Answer · 2021-07-08 18:01:35Z

3

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

const h1 = document.querySelectorAll("h1");
h1.forEach(el=>{
  const kebabCaseText = convertToKebabCase(el.innerText);
  el.id = kebabCaseText;
})

<h1 class="title_tag">Key Programming Language</h1>

answered Jul 8, 2021 at 18:01

Pablo Valverde Llamas

713 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Phaelax · Accepted Answer · 2021-07-08 18:00:59Z

1

This what you're trying to do?

    $("h1").each(function(){
        
        var newId = $(this).text().replace(" ", "-");
        //console.log(newId);
        $(this).attr('id', newId);
    });

answered Jul 8, 2021 at 18:00

Phaelax

2,0542 gold badges11 silver badges26 bronze badges

Comments

Etienne · Accepted Answer · 2021-07-08 18:05:06Z

0

or pure Javascript:

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

answered Jul 8, 2021 at 18:05

Etienne

1922 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to set element id based on innerHTML using javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related