javascript 如何使用 jQuery 将 HTML 标签显示为文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24280012/
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
How can I display HTML tags as Text using jQuery?
提问by Cyril
I am trying to display unrendered HTML code using class htmland the below jquery code.
Its working for every tag except for tags <html>, <head>and <body>.
Is there a way these can also be displayed as text?
我正在尝试使用类html和下面的 jquery 代码显示未渲染的 HTML代码。它除了标签每个标签的工作<html>，<head>和<body>。有没有办法这些也可以显示为文本？
$(document).ready(function () {
$('.html').each(function () {
$(this).text($(this).html());
});
});
HTML code:
HTML代码：
<pre>
<div class="html">
<html>
<head><title>Title</title></head>
<body>
<p>Unrendred html</p>
</body>
</html>
</div>
</pre>
Expected content:
预期内容：
<div class="html">
<html>
<head><title>Title</title></head>
<body>
<p>Unrendred html</p>
</body>
</html>
</div>
Actual content:
实际内容：
<title>Title</title>
<p>Unrendred html</p>
回答by Quentin
Your HTML is invalid. You can't have most of those tags where you are putting them.
您的 HTML 无效。您不能将大多数标签放在放置它们的位置。
When the browser tries to parse your invalid HTML, it hits your errors and attempts to recover from them.
当浏览器尝试解析您的无效 HTML 时，它会遇到您的错误并尝试从中恢复。
The result of this is that they are never put inside the .htmlelement in the DOM, so when you try to convert the DOM back to HTML they won't appear.
这样做的结果是它们永远不会放在.htmlDOM的元素内，因此当您尝试将 DOM 转换回 HTML 时，它们不会出现。
The only way you could scrape them out of there would be to refetch the raw source code from the server and then parse the HTML yourself.
唯一的方法是从服务器上重新获取原始源代码，然后自己解析 HTML。
Just write the HTML correctly in the first place. If you want to render a <character then put <in the HTML (and so on). Don't try to escape the HTML with JavaScript after the browser has already parsed it.
首先正确地编写HTML。如果你想渲染一个<字符，然后<输入 HTML（等等）。在浏览器已经解析 HTML 之后，不要尝试使用 JavaScript 对其进行转义。
回答by Tope
you need to replace the tag syntax as below
您需要替换标签语法如下
expected result at this fiddle example - http://jsfiddle.net/uEMh2/
这个小提琴示例的预期结果 - http://jsfiddle.net/uEMh2/
<pre>
<div class="html">
<html>
<head><title>Title</title></head>
<body>
<p>Unrendred html</p>
</body>
</html>
</div>
</pre>
回答by Ulad Kasach
escapeHTML {
return html.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>');
}
Thats the way prototype handles it.
这就是原型处理它的方式。
回答by Alvis Vadaliya
i tried to solve your problem by jquery but you have to add one unused <pre>tag to your code and two lines of jquery code
我试图通过 jquery 解决您的问题，但您必须<pre>在代码中添加一个未使用的标签和两行jquery code
if you ignore <pre>and jquery scripton output then everything is as you wan't
如果你忽略<pre>和jquery script输出，那么一切都是你想要的
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var data = $('html').html();
data = "<!doctype html>\n<html lang=\"en\">\n"+data+"\n</html>";
var data = $('pre#html-code').text(data);
});
</script>
</head>
<body>
<pre id="html-code"></pre>
</body>
</html>
回答by griffon vulture
escape the <>characters - on your html, and on your js as well use htmlfunction instead of html()
转义<>字符 - 在您的 html 和您的 js 上也使用html函数而不是html()
<pre>
<div class="html">
<p>< html / ></p >
<head ><title >Title</title></head >
<body >
<p >Unrendred html</p >
</body >
</html>
</div>
</pre>
$(document).ready(function () {
$('.html').each(function () {
$(this).text($(this).html);
});
});
