如何将 diffChars 的结果解析为 HTML

Question

我需要比较两个包含 HTML 内容的 div 标签的文本。结果应该出现在另一个 div 中。虽然它显示了差异并出现在 div 中，但 HTML 未被解析。

<script src="~/js/diff.js"></script>
<script>

comparetxt('divold', 'divnew', 'divresult');

function comparetxt(dold, dnew, dresult) {
    var oldtxt = document.getElementById(dold);
    var newtxt = document.getElementById(dnew);
    var display = document.getElementById(dresult);

    var strnew = newtxt.innerHTML;
    var strold = oldtxt.innerHTML;

    var color = '',
        span = null;

    var diff = Diff.diffChars(strnew, strold),
        fragment = document.createDocumentFragment();

    diff.forEach(function (part) {
        // green for additions, red for deletions
        // grey for common parts
        color = part.added ? 'green' :
            part.removed ? 'red' : 'black';
        span = document.createElement('span');
        span.style.color = color;
        span.appendChild(document
            .createTextNode(part.value));
        fragment.appendChild(span);
    });

    display.appendChild(fragment);
}

Answer 1

document.createTextNode 转义 html 字符。您可以使用 innerHtml 来解决您的问题。

编辑：为清楚起见添加了代码

span.innerHtml = part.value