删除空格或替换为自动生成的 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 标签。

您好像用错了撇号。

浏览器更新并更正了您的示例

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