删除自动生成的ID标记的空格或替换为下划线

Question

完全修改我的问题。

我正在使用此代码生成一个id标签：

$items.="<h3 id='$heading_old' class='cateory_h' style='width: 100%; display: flow-root; margin: 10px 10px; font-weight: 600; color: #bcd63a;'> $heading_old</a></h3>";

哪个产生了这个html:

<h3 id='Craft Cocktails' class='cateory_h' style='width: 100%; display: flow-root; margin: 10px 10px; font-weight: 600; color: #bcd63a;'> Craft Cocktails</a></h3><div class="beers">

id中不能有空格。我需要在替换为下划线时将其删除。

有办法做到这一点吗？

这不起作用：

document.getElementById("Lighter Beers").id = "Lighter_Beers";

感谢Nico Bleiler指出我的原始代码错误！

Answer 1

要使锚点正常工作，url中的片段必须与元素的id相同。

<a href="#test">Go to Test</a>

如果您单击它，它将更新URI片段并滚动到页面上id为的元素

<div id="test">Test</div>

在变量上使用方法urlencode ( string $str ) : string，如

urlencode($heading_old)

并自己对a标签进行编码以匹配它们

我检查了你的标签。

你好像用错了撇号。

浏览器更新了您的示例并对其进行了更正

<a href="“#Craft_Cocktails”">Craft Cocktails</a>

您混合了“和"

<ul class="nav2">
<li><a href="#Craft_Cocktails">Craft Cocktails</a></li>
<li><a href="#Darker_Beers">Darker Beers</a></li>
<li><a href="#Lighter_Beers">Lighter Beers</a></li>
<li><a href="#Hoppy_Beers">Hoppy Beers</a></li>
<li><a href="#Wild_and_Sour">Wild and Sour</a></li>
<li><a href="#Wine_and_Cider">Wine and Cider</a></li>
</ul>