3

我正在尝试使用 ID 'myElement' 填充 DOM 元素。我填充的内容是文本和 HTML 元素的混合。

假设以下是我希望在我的 DOM 元素中填充的内容。

var x = "<b>Success</b> is a matter of hard work &luck";

我尝试如下使用innerHTML，

document.getElementById("myElement").innerHTML=x;

这导致我的句子中的最后一个词被砍掉了。显然，问题是由于最后一个单词中存在“&”字符。我玩弄了'&'和innerHTML，以下是我的观察。

  1. 如果内容的最后一个单词少于 10 个字符，并且其中包含 '&' 字符，innerHTML 会在 '&' 处截断句子。
  2. 这个问题在 Firefox 中不会发生。
  3. 如果我使用innerText，最后一个词是完整的，但是作为内容一部分的所有HTML标签都变成了纯文本。

我尝试通过 jQuery 的 #html 方法填充，

 $("#myElement").html(x);

这种方法解决了 IE 中的问题，但不能解决chrome中的问题。

如何插入最后一个单词包含“&”的 HTML 内容，而不会在所有浏览器中被截断？

更新： 1. 我尝试对要插入 DOM 的内容进行 html 编码。当我对内容进行编码时，作为内容一部分的 html 标签变为纯字符串。

对于上述内容，我希望结果呈现为，

成功是靠努力和运气

但是当我对渲染页面中实际得到的内容进行编码时，

<b>Success</b> is a matter of hard work &luck

4

3 回答 3

6

你应该&用&amp;.

( &&) 字符在 HTML 中用于表示各种特殊字符。例如, &quot; = ", &lt; = <,等等。现在，&luck显然它不是一个有效的 HTML 实体（因为它缺少分号）。但是，由于纠错（分号）的组合以及它看起来有点像 HTML 实体（&后跟四个字符）的事实，各种浏览器可能会尝试对其进行解析。

因为&luck;不是有效的 HTML 实体，所以原始文本会丢失。因此，在 HTML 中使用 & 符号时，请始终使用&amp;.

更新：当用户输入此文本时，您可以正确转义此字符。例如，在 PHP 中，您会htmlentities在向用户显示之前调用文本。这具有过滤掉恶意用户代码（例如<script>标签）的额外好处。

于 2010-04-01T10:21:41.510 回答
1

& 符号是 HTML中的一个特殊字符，表示字符实体引用或数字字符引用的开始，您需要像这样对其进行转义：

var x = "<b>Success</b> is a matter of hard work &amp;luck";
于 2010-04-01T10:23:04.627 回答
0

尝试改用这个：

var x = "<b>Success</b> is a matter of hard work &amp;luck";

通过对 & 符号进行 HTML 编码，您可以确保在编写“&luck”时您的意思没有歧义。

于 2010-04-01T10:21:24.223 回答