在浏览器中显示HTML标记而不进行渲染

Question

开始实现Javascript,我需要进行故障排除,并希望将HTML输出到屏幕而不进行渲染.我可以通过访问元素(在IE中)

document.getElementById("test").outerHTML

我想,但我不能证明我能确定的是什么.

那么我该怎么做才能让document.write显示整个元素,包括标签？

Answer 1

你的意思是你想要文字,例如,<b>Hello</b>而不是Hello？

如果是这样,请快速做一下:

myHTML = myHTML.replace(/[<>&\n]/g, function(x) {
    return {
        '<': '&lt;',
        '>': '&gt;',
        '&': '&amp;',
       '\n': '<br />'
    }[x];
});

在输出之前.您可以将此应用于许多其他字符,例如,如果您想要按字面输出空格.

Answer 2

做两件事(所有这些,而不仅仅是一件):

1. 用实体替换HTML标记:HTML.replace(/&/g, '&amp;').replace(/</g, '&lt;')就够了.
2. 将其包装在<pre></pre>标签中,以便不消除空白,并以等宽字体显示.

你也可以alert(HTML).在Windows上的IE(至少)中,您可以按Ctrl-C并将对话框的文本内容粘贴到其他位置以便清楚地看到它.

两次串行替换比使用函数作为第二个参数更快replace().当字符串非常长时,三个序列替换也会更快,正如人们对整个HTML文档所期望的那样.

此外,使用document.write可能不是最好的方法.如果你有一个带有id的div,output你可以这样访问它:

document.getElementById('output').innerHTML = '<pre>' + document.body.innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;') + '</pre>';

上面的代码工作,我在IE中测试它,也在Firefox中使用FireBug测试.请注意,outerHTMLFirefox不支持.