如何使用 javascript 基于 innerHTML 设置元素 ID

Question

我想为动态内容中的所有标题标签添加 ID。 id 应基于同一元素的内部文本（这是为特定部分创建 link）。

例如：如果标题标签有 <h1 class="title_tag">Key Programming Language</h1>，输出应该是 <h1 id="key-programming-language" class="title_tag">Key Programming Language</h1>

我不确定如何将 innerHTML 值放入 id。请建议我使用任何 javascript(or)jquery(or)PHP

的解决方案

Answer 1

这就是你想要做的？

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

Answer 2

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>

Answer 3

或纯Javascript:

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

如何使用 javascript 基于 innerHTML 设置元素 ID

How to set element id based on innerHTML using javascript

html

javascript

php

jquery

drupal