javascript 在浏览器中显示 HTML 标记而不呈现它
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6221067/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display HTML markup in browser without it being rendered
提问by Lance Roberts
Starting to implement Javascript, I need to do troubleshooting and would like to output HTML to the screen without it being rendered. I can access the element (in IE) by
开始实现 Javascript，我需要进行故障排除，并希望将 HTML 输出到屏幕而不呈现它。我可以通过以下方式访问元素（在 IE 中）
document.getElementById("test").outerHTML
I think, but I can't prove what I'm getting to be sure.
我想，但我无法证明我所确定的。
So what do I do to have document.writeshow the entire element including tags?
那么我该怎么做才能让document.write显示包括标签在内的整个元素？
回答by Ry-
Do you mean you want the literal, for example, <b>Hello</b>instead of Hello?
例如，您的意思是您想要文字<b>Hello</b>而不是Hello?
If so, just do a quick:
如果是这样，只需快速执行：
myHTML = myHTML.replace(/[<>&\n]/g, function(x) {
return {
'<': '<',
'>': '>',
'&': '&',
'\n': '<br />'
}[x];
});
Before outputting it. You can apply this to many other characters, say for instance if you wanted to output whitespace literally.
在输出之前。您可以将此应用于许多其他字符，例如，如果您想按字面意思输出空格。
回答by ErikE
Do two things (all of these, not just one):
做两件事（所有这些，而不仅仅是一件）：
- Replace HTML markup with entities:
HTML.replace(/&/g, '&').replace(/</g, '<')is enough. - Wrap it in
<pre></pre>tags so the whitespace is not eliminated and it is shown in a monospace font.
- 用实体替换 HTML 标记：
HTML.replace(/&/g, '&').replace(/</g, '<')就足够了。 - 将它包裹在
<pre></pre>标签中，这样空格就不会被消除，它以等宽字体显示。
You can also alert(HTML). In IE on Windows (at least) you can press Ctrl-C and paste the text contents of the dialog box elsewhere to see it plainly.
你也可以alert(HTML)。在 Windows 上的 IE 中（至少），您可以按 Ctrl-C 并将对话框的文本内容粘贴到其他地方以清楚地查看它。
Two serial replaces is faster than using a function as the second argument of replace(). Three serial replaces is also faster when the string is very long as one might expect from a full HTML document.
两次串行替换比使用函数作为 的第二个参数更快replace()。当字符串很长时，三个串行替换也会更快，正如人们对完整 HTML 文档所期望的那样。
Also, using document.writeis probably not the best way. If you have a div with id outputyou can access it this way:
此外，使用document.write可能不是最好的方法。如果您有一个带有 id 的 div，output您可以通过以下方式访问它：
document.getElementById('output').innerHTML = '<pre>' + document.body.innerHTML.replace(/&/g, '&').replace(/</g, '<') + '</pre>';
The above code works, I tested it in IE and also in Firefox using FireBug. Note that outerHTMLis not supported in Firefox.
上面的代码有效，我在 IE 和 Firefox 中使用 FireBug 对其进行了测试。请注意，outerHTMLFirefox 不支持它。
回答by Mike 'Pomax' Kamermans
If you're starting out with javascript, now is the best time to learn not to touch unreliable properties; outerHTML is one of them; while supported by IE, Chrome and Opera, Firefox doesn't support it.
如果您刚开始使用 javascript，现在是学习不要接触不可靠属性的最佳时机；externalHTML 就是其中之一；虽然 IE、Chrome 和 Opera 支持，但 Firefox 不支持。
Taking the original code, this will work:
采用原始代码，这将起作用：
var content = document.getElementById("test").outerHTML;
var safe = content.replace(/</g,"<").replace(/>/g,">");
docuemnt.write(safe);
But, as much as using "outerHTML" is a bad idea, so is "document.write()". It is much better to have a div with an id on your page, and setting text there, rather than "wherever your code happens to be when document.write() gets called":
但是，正如使用“outerHTML”是一个坏主意一样，“document.write()”也是如此。在您的页面上有一个带有 id 的 div 并在那里设置文本要好得多，而不是“当 document.write() 被调用时，无论您的代码在哪里”：
<html>
<head>...</head>
<body>
...
<div id="mylog"></div>
...
<body>
</html>
And then filling it with either:
然后用以下任一填充它：
// set the content for div 'mylog'
document.getElementById("mylog").innerHTML = content;
or by using something like jQuery, which gives you an API that hides all the crazy may-or-may-not-be-supported things, and guarantees that if you call it, it'll work:
或者通过使用像 jQuery 这样的东西，它为您提供了一个 API，它隐藏了所有可能支持或可能不支持的疯狂事物，并保证如果您调用它，它会起作用：
// get html content
var content = $("#test").html();
// make it print safe
var safe = content.replace(/</g,"<").replace(/>/g,">");
// add it to the log as text
$("mylog").append(safe);
回答by david
If this is just for testing and you want to quickly brute force it, you can convert every character in the string to it's &#x; equivalent:
如果这只是为了测试并且您想快速暴力破解它，您可以将字符串中的每个字符都转换为 &#x; 相等的：
var a = "<div>hello</div>";
var b = a.replace(/./g, function(e){
return "&#"+e.charCodeAt(0)+";";
});
document.write(b);
Live example: http://jsfiddle.net/J89wh/
现场示例：http: //jsfiddle.net/J89wh/
回答by user2490440
Here is a quick and easy method I found
这是我找到的一种快速简便的方法
1.Download and Install Adobe DreamWeaver,you will get a 30 day trial.
1.下载并安装 Adobe DreamWeaver，您将获得 30 天的试用期。
2.Just write the code which you want to put into your website as such in the Design screen of Dream weaver
2.只需在Dream weaver的设计屏幕中编写您想要放入网站的代码即可
3.In the code screen,you will get a code for putting the unrendering html code into your website.
3.在代码屏幕中，您将获得一个代码，用于将未渲染的 html 代码放入您的网站。
For example: When I put the code:
例如：当我输入代码时：
<p>This is a paragraph</p>
inside the design window of DreamWeaver.In the code window,following code is written.
在 DreamWeaver 的设计窗口内。在代码窗口中，编写了以下代码。
<p><p>This is a paragraph</p></p>
You can do that for every code you want to make appear unrendered in the browser.
您可以为要在浏览器中显示为未渲染的每个代码执行此操作。
回答by amit_g
If the problem is not limited to IE, use firefox and use firebug. console.logis very handy. You can always use alert(myString)but becomes very annoying very soon.
如果问题不限于 IE，请使用 firefox 并使用firebug。console.log非常方便。您可以随时使用，alert(myString)但很快就会变得非常烦人。
