5

开始实现 Javascript，我需要进行故障排除，并希望将 HTML 输出到屏幕而不呈现它。我可以通过以下方式访问元素（在 IE 中）

document.getElementById("test").outerHTML

我想，但我无法证明我所确定的。

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

4

6 回答 6

12

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

如果是这样，请快速执行以下操作：

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

在输出之前。您可以将此应用于许多其他字符，例如，如果您想按字面意思输出空格。

于 2011-06-02T22:25:30.667 回答
9

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

  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 不支持。

于 2011-06-02T22:25:45.867 回答
2

如果您刚开始使用 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);
于 2011-06-02T22:35:06.407 回答
1

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

于 2011-06-02T22:31:21.773 回答
1

如果这只是为了测试并且您想快速暴力破解它，您可以将字符串中的每个字符转换为它的 &#x; 相等的：

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

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

document.write(b);

现场示例：http: //jsfiddle.net/J89wh/

于 2011-06-02T22:50:42.840 回答
1

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

1.下载并安装 Adob​​e 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>

You can do that for every code you want to make appear unrendered in the browser.

于 2013-06-16T09:38:20.613 回答