Javascript 安全地将html字符串插入<；预处理>；保持语法突出显示完整的标记

我动态构建了

string

包含

json

的数据，并插入了一些

html

以突出显示语法。

console.log(highlightedJson);
{
    <span class="key">"time":</span> <span class="string">"11:09:09 PM"</span>,
    <span class="key">"milliseconds_since_epoch":</span> <span class="number">1406070549038</span>,
    <span class="key">"date":</span> <span class="string">"07-22-2014"</span>
}

试图将其作为

html

注入

var pre = document.createElement('pre');

// also tried this, but again, syntax highlighting is not rendered
//pre.appendChild(highlightedJson));

pre.appendChild(document.createTextNode(highlightedJson))
document.getElementById("body").appendChild(pre);

当此代码运行时，字符串会附加到
，但不会显示语法突出显示。

var htmlStr = '<div><span style="color:#FF0;">h</span>ello</div>';
var range = document.createRange();
var anyElement = document.body;
range.selectNode(anyElement);
var docFrag = range.createContextualFragment(htmlStr);
document.body.appendChild(docFrag);


我知道使用
pre.innerHTML=highlightedJson
获取我想要的结果，但firefox插件不鼓励使用这种html注入方法。

项目未使用
jquery

有人能推荐一种方法吗？
您可以尝试这种方法，它用于IE的innerHTML问题。对于这种情况，它可能也很有用

这是我的建议，因为您需要将字符串转换为可呈现html。因为你不能仅仅从字符串中得到html，html是最好的选择，但是由于安全性的影响，我认为这是一种替代方法。如果需要，您可以在while循环中运行检查以排除不需要的标记，或者只列出您的span标记

如果你真的需要保安，那就试试吧。用谷歌搜索一下这些东西。
var-htmlStr='hello'；
var range=document.createRange（）；
var anyElement=document.body；
range.selectNode（任意元素）；
var docFrag=range.createContextualFragment（htmlStr）；
文件.正文.附件（docFrag）；

为什么要用字符串调用
appendChild
？您是否已经将
highlightedJson
转换为DOM片段？你说的安全注射是什么意思？您是否担心XSS，因为JSON可能来自不受信任的源？不，它没有转换为DOM片段，而是一个
字符串。我也尝试过这样做，但语法高亮显示没有呈现：
pre.appendChild（document.createTextNode（highlightedJson））
。引用一位插件审阅者在参考
innerHTML
时的话，“除了效率低下之外，这是一个主要的安全风险”，添加文本节点似乎是正确的方法-为什么高亮显示无法应用于呈现的文本是另一个问题。你用什么来突出显示语法？我认为createTextNode不应该解析html。CSS无法解析文本并将样式应用于子字符串；保持语法高亮显示的唯一方法是创建DOM元素，这是设置
innerHTML
时发生的情况。您可以自己创建各个节点，而不仅仅是设置
innerHTML
。如果要这样做，那么将JSON作为对象发送可能会更容易，例如
[{“key”：“time”，“type”：“number”，“value”：1406070549038}，…]
。这样，您就不需要从字符串解析HTML了。这仍然使用
.innerHTML
，我认为ff插件的审阅者不会喜欢使用HTML解析器。
function stringToHTML(str){
    var frag = document.createDocumentFragment(),
        div = document.createElement('div');
    div.innerHTML = str;
    while(div.firstChild){
        frag.appendChild(div.firstChild);
    }
    return frag;
}

var pre = document.createElement('pre');
pre.appendChild(stringToHTML(highlightedJson));
document.getElementById("body").appendChild(pre);

var htmlStr = '<div><span style="color:#FF0;">h</span>ello</div>';
var range = document.createRange();
var anyElement = document.body;
range.selectNode(anyElement);
var docFrag = range.createContextualFragment(htmlStr);
document.body.appendChild(docFrag);