Question

我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>
}

要应用于类的样式：

pre {
    outline: 1px solid #ccc; 
    padding: 5px; 
    margin: 5px; 
    white-space: pre-wrap;       
    white-space: -moz-pre-wrap;  
    white-space: -pre-wrap;      
    white-space: -o-pre-wrap;    
    word-wrap: break-word;       
}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }

尝试将此html注入<pre> dom元素..

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);

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

我知道使用pre.innerHTML = highlightedJson;得到了我之后的结果，但是在firefox插件中不鼓励使用这种html注入方法。
项目未使用jquery

有人可以建议一种方法吗？

Answer 1

你可以试试这个用于IE的innerHTML问题。它可能对这种情况很有用。

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);

这是我的建议，因为您要求将字符串转换为可渲染的html。因为你不能只使用字符串中的html，所以内部HTML是最好的选择，但由于安全隐患，我认为这是另一种选择。如果需要，您可以在while循环中运行检查以排除您不想要的标记，或者只列出您的span标记。

如果您确实需要安全性，请尝试html parser。谷歌关于这个东西。

Answer 2

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);

http://jsfiddle.net/KD2RR/

安全地将html字符串注入<pre> tag keeping syntax highlighting intact</pre>

2 个答案: