javascript - jQuery - 使用 HTML 实体转义内联样式

Question

在尝试将由 Javascript 编辑器 (CKEditor) 编辑的 HTML 插入到某个 div 时，我遇到了一个奇怪的问题。在要插入的 HTML 中，双引号被替换为 HTML 实体 "效果很好。

除非“以内联样式出现 - 然后 jQuery 删除整个内联样式。

我不希望它们被删除。如果可能的话，我更愿意保留 HTML 实体。问题是为什么会这样？任何解决方法？

在下面的示例中，我插入了一个文本，该文本应使范围变红，并带有常规引号和内联样式的 HTML 实体转义引号。

第一行 (div1) 使 span 变红，div2 根本不是红色。

   window.onload = function() {
 $('#div1').html('<span style="color:red;">This text "here" is red</span>, while this is not.' );
 $('#div2').html('<span style=&quot;color:red;&quot;>This text &quot;here&quot; is red</span>, while this is not.' ); }

See JSFiddle/L7cq2pfd here

Answer 1

jQuery 将其插入为 style=""color:red;"" - 转换 "至 "与 replace(/"/g, '"')在作为 HTML 插入之前:

$('#div2').html('<span style=&quot;color:red;&quot;>This text &quot;here&quot; is red</span>, while this is not.'.replace(/&quot;/g, '"') ); 

http://jsfiddle.net/kb709s27/

为什么？ " 的自动渲染至 "是浏览器功能，而不是 javascript 功能。 jQuery 似乎会解析插入的 HTML 并尝试更正格式错误的属性。如果你插入

$('#div2').html('<span style=color:red>');

然后 jQuery 纠正这个并插入 <span style="color:red"> .在你的情况下，jQuery 只看到一个格式错误的属性，因此尝试更正它，包装 "color:red;"成引号。