Question

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

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

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

我尝试使用innerHTML，如下所示，

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

这导致我的句子中的最后一个字被砍掉了。显然，问题是由于'＆amp;'最后一个字中出现的字符。我和'＆amp;'一起玩了和innerHTML以及以下是我的观察。

如果内容的最后一个字少于10个字符，并且如果它有'＆amp;'如果出现在其中的字符，innerHTML会在'＆amp;'处删掉句子。
在Firefox中不会发生此问题。
如果我使用innerText，那么最后一个单词就是机智，但是作为内容一部分的所有HTML标签都会成为纯文本。

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

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

此方法解决了IE中的问题，但未解决 chrome 中的问题。

如何插入包含'＆amp;'的最后一个单词的HTML内容没有在所有浏览器中被砍掉？

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

对于上面提到的内容，我希望结果呈现为，

成功是一项艰苦的工作和运气

但是当我编码实际在渲染页面中获得的内容时，

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

Answer 1

您应该将&替换为&。

在HTML中使用&（＆符号）字符来表示各种特殊字符。例如，" = "，< = <，etcetera。现在，&luck显然不是一个有效的HTML实体（因为它缺少分号）。但是，由于纠错（分号）的组合，以及看起来有点像HTML实体（&后跟四个字符）的事实，各种浏览器可能尝试解析它就这样。

由于&luck;不是有效的HTML实体，原始文本会丢失。因此，在HTML中使用＆符时，总是使用&。

更新：当用户输入此文本时，您可以正确地转义此字符。例如，在PHP中，在将文本显示给用户之前，您可以在文本上调用htmlentities。这样可以过滤掉<script>标记等恶意用户代码。

Answer 2

“＆”是HTML that indicates the start of a character entity reference or numeric character reference中的一个特殊字符，您需要将其转义为：

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

Answer 3

请尝试使用此代码：

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

通过对＆符号进行HTML编码，您确保在撰写“＆amp; luck”时，您的意思并不含糊。

IE innerHTML如果最后一个单词包含'＆amp;'则会删除句子（符号）

3 个答案: