如果最后一个单词包含'&'(&符号),IE innerHTML将填充句子

Question

我正在尝试使用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.我尝试html编码我试图插入DOM的内容.当我对内容进行编码时,作为内容一部分的html标记变为纯字符串.

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

成功是努力和运气的问题

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

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

Answer 1

你应该更换你&用&.

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

由于&luck;不是有效的HTML实体,原始文本将丢失.因此,在HTML中使用&符时,请始终使用&.

更新:当用户输入此文本时,您可以正确地转义此字符.例如,在PHP中,您可以htmlentities在将文本显示给用户之前调用该文本.这具有过滤掉诸如<script>标签之类的恶意用户代码的额外好处.