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

做两件事（所有这些，而不仅仅是一件）：

将HTML标记替换为实体：HTML.replace(/&/g, '&').replace(/</g, '<')就足够了。
将其包裹在<pre></pre>标签中，这样就不会消除空格，而是以等宽字体显示。

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

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

此外，使用document.write可能不是最好的方法。如果您的ID为output的div，则可以通过以下方式访问：

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

以上代码有效，我在IE中测试过它，也在Firefox中使用FireBug测试过。请注意，Firefox不支持outerHTML。

Answer 3

如果你刚开始使用javascript，现在是学习不接触不可靠属性的最佳时机; outerHTML就是其中之一;在IE，Chrome和Opera的支持下，Firefox不支持它。

采用原始代码，这将有效：

var content = document.getElementById("test").outerHTML;
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
docuemnt.write(safe);

但是，使用“outerHTML”是一个坏主意，“document.write（）”也是如此。在页面上设置一个带有id的div，并在那里设置文本，而不是“在调用document.write（）时代码恰好出现在哪里”更好：“

<html>
  <head>...</head>
  <body>
    ...
    <div id="mylog"></div>
    ...
 <body>
</html>

然后填写：

// set the content for div 'mylog'
document.getElementById("mylog").innerHTML = content;

或者使用像jQuery这样的东西，它为你提供了一个隐藏所有疯狂的可能或不可能支持的东西的API，并保证如果你调用它，它将起作用：

// get html content
var content = $("#test").html();
// make it print safe
var safe = content.replace(/</g,"&lt;").replace(/>/g,"&gt;");
// add it to the log as text
$("mylog").append(safe);

Answer 4

如果问题不仅限于IE，请使用firefox并使用firebug。 console.log非常方便。您可以随时使用alert(myString)，但很快就会变得很烦人。

Answer 5

如果这只是用于测试并且你想快速强制它，你可以将字符串中的每个字符转换为它的＆amp; #x;当量：

var a = "<div>hello</div>";

var b = a.replace(/./g, function(e){
    return "&#"+e.charCodeAt(0)+";";
});

document.write(b);

实例：http://jsfiddle.net/J89wh/

Answer 6

这是我发现的一种快速简便的方法

1.下载并安装Adobe DreamWeaver，您将获得30天的试用期。

2.只需在Dream weaver的设计界面中编写您想要放入网站的代码

3.在代码屏幕中，您将获得一个代码，用于将不正常的HTML代码放入您的网站。

例如：当我把代码放入：

<p>This is a paragraph</p>

在DreamWeaver的设计窗口内。在代码窗口中，编写以下代码。

<p>&lt;p&gt;This is a paragraph&lt;/p&gt;</p>

您可以为浏览器中显示的每个代码显示未呈现的内容。

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

6 个答案: