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

【问题标题】：How to set element id based on innerHTML using javascript如何使用javascript基于innerHTML设置元素ID
【发布时间】：2021-07-08 17:52:40
【问题描述】：

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

例如：如果标题标签有<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

的解决方案

【问题讨论】：

您不需要这些 ID。一堆 id 的实际用例是什么？如果一个情况下会有两个或多个具有相同文本内容的元素呢？等待！标头是哈希链接的目标？
Drupal 在 drupal.stackoverflow.com 有自己的堆栈溢出网络站点，您可以在那里找到针对您的特定问题的帮助。
@Teemu，没有多次创建相同元素的场景。因为客户只会创建文章。所以我只想创建 id 以使用 ID 指出特定部分（如单页滚动）。
过于复杂的 id 可能仍然令人头疼，不是 'header' + runningID 吗？

标签： javascript php html jquery drupal

【解决方案1】：

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;
})

&lt;h1 class="title_tag"&gt;Key Programming Language&lt;/h1&gt;

【讨论】：

【解决方案2】：

这就是你想要做的？

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

【讨论】：

【解决方案3】：

或纯 Javascript：

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

【讨论】：