Question

我正在尝试使用类html和下面的jquery代码显示未呈现的HTML代码。它适用于除标记<html>，<head>和<body>之外的所有标记。有没有办法可以将它们显示为文本？

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

HTML code：

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

预期内容：

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

实际内容：

<title>Title</title>

<p>Unrendred html</p>

Answer 1

您的HTML无效。您不能在其中放置大部分标签。

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

这样做的结果是它们永远不会放在DOM的.html元素中，因此当您尝试将DOM转换回HTML时，它们将不会出现。

你可以将它们从中删除的唯一方法是从服务器重新获取原始源代码，然后自己解析HTML。

首先正确编写HTML。如果要呈现<个字符，请将<放入HTML（依此类推）。在浏览器解析之后，不要尝试使用JavaScript来转义HTML。

Answer 2

您需要替换下面的标记语法

这个小提琴示例的预期结果 - http://jsfiddle.net/uEMh2/

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

Answer 3

 escapeHTML {
     return html.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
 }

这就是原型处理它的方式。

Answer 4

我尝试通过jquery解决您的问题，但您必须在代码中添加一个未使用的<pre>标记，并添加两行jquery code

如果您忽略输出中的<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>

Answer 5

转义html和{j}上的<>个字符，并使用html函数代替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);
    });
});

http://fiddle.jshell.net/p3BXK/16/

如何使用jQuery将HTML标签显示为Text？

5 个答案: