Javascript 如何使用jQuery将HTML标记显示为文本？_Javascript_Jquery_Html_Dom

Javascript 如何使用jQuery将HTML标记显示为文本？

javascript jquery html dom

Javascript 如何使用jQuery将HTML标记显示为文本？,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,我试图使用classHTML和下面的jquery代码显示未渲染的HTML代码。 <pre> <div class="html"> <html> <head><title>Title</title></head> <body> <p>Unrendred html</p> </body> </html> <

我试图使用class

HTML

和下面的jquery代码显示未渲染的HTML代码。

<pre>
<div class="html">
    <html>
    <head><title>Title</title></head>
    <body>
    <p>Unrendred html</p>
    </body>
    </html>
</div>
</pre>

<pre>
&lt;div class="html"&gt;
    &lt;html&gt;
    &lt;head&gt;&lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;
    &lt;body&gt;
    &lt;p&gt;Unrendred html&lt;/p&gt;
    &lt;/body&gt;
    &lt;/html&gt;
&lt;/div&gt;
</pre>

<!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>

它适用于除标签

、

和

之外的所有标签。是否有一种方式可以将这些内容显示为文本

$(document).ready(function () {
    $('.html').each(function () {
        $(this).text($(this).html());
    });
});

HTML代码：


标题
未回复的html

预期内容：

<title>Title</title>

<p>Unrendred html</p>


标题
未回复的html

实际内容：

<pre>
<div class="html">
    &lt;p&gt;&lt; html / &gt;&lt;/p &gt
    &lt;head &gt;&lt;title &gt;Title&lt;/title&gt;&lt;/head &gt;
    &lt;body &gt;
    &lt;p &gt;Unrendred html&lt;/p &gt;
    &lt;/body &gt;
    &lt;/html&gt;
</div>
</pre>


$(document).ready(function () {
    $('.html').each(function () {
        $(this).text($(this).html);
    });
});

标题
未回复的html

在html上转义

字符，在js上也使用

html

函数，而不是

html（）


p html//p>
标题/标题/标题
身体
p未回复的html/p
/身体
/html
$（文档）.ready（函数（）{
$（'.html'）。每个（函数（）{
$（this.text（$（this.html））；
});
});

您的HTML无效。你不能把大部分标签放在你要放的地方

当浏览器试图解析无效的HTML时，它会点击您的错误并尝试从中恢复

这样做的结果是，它们永远不会放在DOM中的

.html

元素中，因此当您尝试将DOM转换回html时，它们不会出现

你能把它们刮出来的唯一方法就是从服务器上重新提取原始源代码，然后自己解析HTML

首先要正确地编写HTML。如果要呈现

，则需要替换标记语法，如下所示
此小提琴示例的预期结果-

div class=“html”
html
标题/标题/标题
身体
红色html/p
/身体
/html
/div
escapeHTML{
返回html.replace（//&g'，&；'）。replace（//g'，）；
}

prototype就是这样处理的。
我试图用jquery解决您的问题，但您必须添加一个未使用的
浏览器正在删除无效的标记。这里的最终目标是什么？我确信有更好的方法来解决这个问题（可能是模板？）。我想制作一个html文档，其中显示html代码片段，包括，和标记。他得到的结果和你一样。我想他也希望看到和元素。它仍然不会改变输出。标记和仍然在输出中丢失。@webSpider是的，这是“欺骗”浏览器的好方法：D@webSpider：现在您不需要replace函数。您根本不需要JavaScript。
 escapeHTML {
     return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }

<!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>