HTML在第一次出现的引号之间插入空格

Question

这让我发疯。我想将字符串文字作为参数传递给包含双引号的HTML onclick 属性中的函数。

我的HTML元素如下所示：

<button onclick = "ok_button_click(""Harry Potter "")" type="button" class="btn btn-default">ok</button>

但是当我加载页面并通过Inspect Element打开它时，我看到第一个引号之间插入了一个空格，结果如下：

<button onclick = "ok_button_click(" "Harry Potter"")" type="button" class="btn btn-default">bad</button>

为什么浏览器插入空格???

Answer 1

这是因为在解析DOM时，浏览器使用"作为分隔符，因此在您的情况下，它会将ok_button_click(分配给属性onclick和Harry Potter as一个单独的（和未知的）属性。

编写此代码的更好方法是混合单引号和双引号，如：

<button onclick="ok_button_click('Harry Potter')" type="button" class="btn btn-default">ok</button>

HTML调试的一个良好开端是通过验证器运行它，就像在https://validator.w3.org/#validate_by_input

中一样

Answer 2

如果您尝试使用引号传递字符串值，则必须使用"，如下所示：

<button onclick = "ok_button_click('&quot;Harry Potter&quot;')" type="button" class="btn btn-default">bad</button>

如果你只想传入一个字符串文字，你可以使用单引号（或与属性开头的相反），如下所示：

<button onclick = "ok_button_click('Harry Potter')" type="button" class="btn btn-default">bad</button>

Answer 3

尝试：

<button onclick = 'ok_button_click("Harry Potter")' type="button" class="btn btn-default">ok</button>