如何在HTML页面上显示原始的HTML代码

Question

如何在网页上显示HTML片段，而无需将每个 < 替换为 <，并将 > 替换为 >？

换句话说，是否有一个标签可以实现直到遇到闭合标签才渲染HTML？

- Steven

Answer 1

处理 HTML 的经典方法：

1. 用 & 替换 & 字符
2. 用 < 替换 < 字符
3. 用 > 替换 > 字符
4. 可选地，使用 <pre> 和/或 <code> 标签来包围您的 HTML 示例。

- Dolph

---

提示：为了加快HTML代码替换速度，您可以使用带' TextFX '扩展的Notepad++。 选中文本，转到菜单>TextFX>TextFX Convert>编码HTML（&<>") → 完成。 - Avatar

有没有现成的JavaScript库可以做到这一点呢？ - Anderson Green

这并没有回答问题，因为问题中说“无需更换...”。此外，替换“>”是不必要的。 - Jukka K. Korpela

顺序也很重要。请确保先处理 &，再处理 <。 - Tolga Evcimen

@AndersonGreen 这是库：export const escapeHtml = str => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')。也许有人应该为它创建一个 NPM 包，就像 left-pad 一样？ - Lionel Rowe

@AndersonGreen，我在我的网站上发布了一个非常简单的示例，我认为这更容易理解。https://www.joshdance.com/100/day45/ - Joshua Dance

Answer 2

样例1：

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

样例2:

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

示例 3： （如果你实际上是在“引用”一段代码，则标记应该是）

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

- Erfan Safarpoor

---

答案中使用的元素根本没有回答问题：它们不会影响解释开始标签的“<”符号。 - Jukka K. Korpela

"developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp"网站上明确表示：“不要使用该元素”。自从HTML3.2版本以来，该元素就已被废弃，并且没有一致的实现方式。在HTML5中，该元素已被完全删除。” - Nick Rice

我使用了发布的CSS，谢谢，它修复了很多设计问题。 - Basheer AL-MOMANI

它无法正常工作，当您执行此操作时，字符串“ List<int>”仅显示“ List”。 - GuidoG

@NickRice 但是我无法停止，我将继续使用 <xmp> 和 <plaintext>，因为在21世纪的HTML中没有其他方法来显示&文本而不是一个符号，Carl！ - kirogasa

Answer 3

没有，在HTML中没有这样的标签。如果要在HTML中实现此功能，唯一的方法是转义某些字符，例如使用&来表示&，使用<来表示<。另外，需要将结果包含在<pre><code>…</code></pre>元素中以保留空格和换行符，并将其标记为代码元素。所有其他解决方案（例如将代码放入<textarea>或已弃用的<xmp>元素中）都会失败。¹ 如果将XHTML声明为XML并通过HTTP Content-Type头部将其发送至浏览器，则可以选择使用CDATA节。

<![CDATA[Your <code> here]]>

但这只适用于XML，而不适用于HTML，即使这也不是一种绝对可靠的解决方案，因为代码中不能包含关闭定界符]]>。因此，即使在XML中，最简单、最稳健的解决方案也是通过转义。

---

¹举个例子：

textarea {border: none; width: 100%;}

<textarea readonly="readonly">
  <p>Computer <textarea>says</textarea> <span>no.</span>
</textarea>

<xmp>
  Computer <xmp>says</xmp> <span>no.</span>
</xmp>

- Konrad Rudolph

---

不错。那是HTML标准的一部分吗？还是更深入，比如XML标准的一部分？ - aioobe

在 HTML 中，这将呈现为 here]]>。 - Dolph

好的，这是一个不错的答案，但不要忘记用>替换>。 - Alan

@Alan 我也会这样做，但实际上这并不是必要的：只有<和&需要被替换，未转义的>在HTML内是有效的。 - Konrad Rudolph

@SamWatkins 但是你的解决方案并不比我的容易。你只是改变了需要转义的内容，并且你的解决方案很笨拙，正如你自己所承认的那样。与正确的方法相比，它没有任何优势。这是一个已经有正确解决方案的问题。除非你的整个设置都很笨拙，否则不需要使用任何hack手段。 - Konrad Rudolph

Answer 4

一种比较简单的展示代码的方法是把它放在 textarea 标签中，并且加上 disabled 属性来防止编辑。

<textarea disabled> code </textarea>

希望这能帮助到寻找简单方法完成工作的人。

---

但是要注意，这不会为您转义标签，正如您在此处看到的一样（以下显然无效）：

<textarea disabled>

This is the code to create a textarea:
<textarea></textarea>

</textarea>

- Krunal

---

只读属性（readonly）可能比禁用属性更好，这样您就可以突出显示其中的文本。此外，还可以添加一个样式，使其不带有任何使其看起来像输入元素的特征，尽管这是次要的。 - Tarquin

非常棒的解决方案。谢谢。 - Apit John Ismail

和好的答案一样，虽然还是会解释和号。例如   会被呈现为实际的不间断空格。但这仍然是我想要做的理想选择。 - Nick Rice

我已经尝试了许多方法，这是唯一适用于我的方式。非常感谢。 - William Hou

太棒了！在Windows 10上可以在Chrome、Edge和Firefox中运行。 - user10186832

Answer 5

已过时，但在 Firefox 3 和 IE8 中仍可使用。

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

推荐：

<pre><code>
    code here, escape it yourself.
</code></pre>

- s_hewitt

Answer 6

废弃的<xmp>标签本质上实现了这个功能，但不再是XHTML规范的一部分。尽管如此，在所有现代浏览器中仍应该能够工作。

这里有另一个想法，一种hack/特技，可以将代码放在中，如下所示：</p><pre class="guess-CSS"><code><textarea disabled="true" style="border: none;background-color:white;"> <p>test</p> </textarea> </code></pre><p>在文本区域中放置尖括号和代码是无效的 HTML，会导致不同浏览器的行为未定义。在 Internet Explorer 中，HTML 将被解释，而Mozilla、Chrome 和 Safari 则将其保持为未解释状态。</p> <p>如果您想让文本区域不可编辑并呈现不同的外观，则可以轻松使用 CSS 进行样式设置。唯一的问题是浏览器会在右下角添加一个小拖动手柄来调整框的大小。或者，您也可以尝试使用 input 标签代替。</p> <p>将代码注入到文本区域的正确方式是使用服务器端语言，例如 PHP：</p><pre class="guess-CSS"><code><textarea disabled="true" style="border: none;background-color:white;"> <?php echo '<p>test</p>'; ?> </textarea> </code></pre><p>然后它将绕过HTML解释器并在所有浏览器中一致地将未解释的文本放入textarea中。</p> <p>除此之外，如果是静态HTML或使用服务器端方法（例如.NET的HtmlEncode()），则唯一的方法就是自己转义代码。</p>

- GShenanigan

---

这是一个可怕的想法。如果显示的是动态HTML，并且有人执行了以下操作：<?php echo '</textarea><script>alert('hello world');</script><textarea>'; />，那么你的代码就容易受到XSS攻击。 - Gary Drocella

PHP是服务器端语言，因此它不会改变浏览器看到的结果。它特别不会绕过HTML解释器。 - Robert Siemer

我喜欢文本区域的格式，使其不像输入框。我还添加了宽度100％以减少换行：<textarea disabled="true" style="border: none;background-color:white; width:100%"> - Dan King

@GaryDrocella 如果您将<script>标签插入到tetarea中，它们会自动转换为<和>，因此不会执行任何脚本。 - B''H Bi'ezras -- Boruch Hashem

Answer 7

我就像这样使用了<xmp>： http://jsfiddle.net/barnameha/hF985/1/

- barnameha

---

它已被弃用 - EdgeDev

@EdgeDev 没有其他选择，所以不管它是否被弃用。 - kirogasa

Answer 8

如果您的目标是展示同一页面上正在执行的代码块，可以使用textContent（它是纯js并且得到了很好的支持：http://caniuse.com/#feat=textcontent）

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

要在结果中获得多行格式化，您需要在目标div上设置css样式“white-space: pre;”，并在每行末尾使用“\r\n”逐个编写行。

这里是一个演示：https://jsfiddle.net/wphps3od/ 此方法优于使用textarea：代码不会像在textarea中那样重新格式化。（例如中的&nbsp;完全被删除）

- Timothy Kanski

---

这是一个非常不错的方法，使用JavaScript和DOM API来为我们进行转义。我们可以将其与<template>或其他通常不会呈现的内容一起使用。 - Sam Watkins

Answer 9

我假设：

• 您想编写100％有效的HTML5
• 您想将代码片段（几乎）字面放置在HTML中
  • 特别是<不需要转义

您的所有选项都在此树中：

• 使用HTML语法
  • 有五种类型的元素
  • 称为“普通元素”的元素（例如<p>）
    • 不能有文字<
    • 它会被视为下一个标签或注释的开始
  • 空元素
    • 它们没有内容
    • 您可以将HTML放在数据属性中（但对于所有元素都是如此）
    • 这需要JavaScript将数据移动到其他位置
    • 在双引号属性中，"和&thing;需要转义："和&thing;分别
  • 原始文本元素
    • <script>和<style>仅限
    • 它们永远不会呈现可见
    • 但是嵌入您的文本可能是可行的Javascript
    • Javascript允许使用反引号的多行字符串
    • 然后可以动态插入它
    • 在<script>中任何地方都不允许有文字</script
  • 可转义原始文本元素
    • 仅限<textarea>和<title>
    • <textarea>是包装代码的好选择
    • 在其中写</html>是完全合法的
    • 显然不能使用子字符串</textarea
      • 使用</textarea或类似方法转义此特殊情况
    • &thing;需要转义：&thing;
  • 外部元素
    • 来自MathML和SVG命名空间的元素
    • 至少SVG再次允许嵌入HTML...
    • 并且CDATA在那里是允许的，因此它似乎具有潜力
• 使用XML语法
  • 由 Konrad的答案涵盖

 

注意：>甚至在普通元素中也不需要转义。

- Robert Siemer

---

我喜欢你回答的全面性。有一些纠正：<script>和<style>可以被渲染为可见，只需将它们放在<body>内，并使用style="display: block; white-space: pre;"和type="text/html"或其他内容，如果您不希望它作为JavaScript执行。我认为这是一个很好的技巧，适用于文学编程和教学。此外，<xmp>仍然在主要浏览器中实现，尽管它已经过时。 - Sam Watkins

有趣。@SamWatkins的<xmp>不是有效的HTML5，但你的其他技巧看起来很合适！ - Robert Siemer

Answer 10

在HTML中？不行。

在XML/XHTML中？你可以使用CDATA块。

- cletus