【问题标题】：What do I need to escape inside the html <pre> tag我需要在 html <pre> 标签内转义什么
【发布时间】：2010-11-19 09:04:07
【问题描述】：

我在我的博客中使用<pre> 标签来发布代码。我知道我必须将&lt; 更改为&lt; 和&gt; 更改为&gt;。为了正确的 html，我还需要转义其他字符吗？

【问题讨论】：

顺便问一下，这是什么博客？底层博客软件可能已经翻译了一些用户输入。
是wordpress，但我总是直接写成纯文本html。
这不应该取决于您是要生成正确的 HTML 还是 XHTML（即 XML）？
您不必将&gt; 更改为&gt;。 &gt; 不被视为标签发送器，除非标签已打开，如果将 &lt; 更改为 &lt; 则无法打开标签，因此 &gt; 没有特殊含义。但是您需要将&amp; 更改为&amp;（这需要在包括与号在内的其他更改之前完成）。

标签： html html-encode

【解决方案1】：

TL;DR

PHP：htmlspecialchars($html);
JavaScript(JS)：Element.innerText = "<html>...";

注意<pre> is just for styles，所以你必须转义所有HTML。

只为你 HTML“化石”：使用 `<xmp>` 标签

这并不为人所知，但它确实存在，甚至 chrome 仍然支持它，但是使用 pair 的 <xmp> 标签 不推荐 值得信赖on - 它只适用于您的 HTML 化石，但它是处理您的个人内容的一种非常简单的方法，例如文档。甚至 w3.org Wiki 在其示例中也说：“不，真的。不要使用它。”

您可以将任何 HTML（不包括 </xmp> 结束标记）放在 <xmp></xmp> 内

<xmp>
<html> <br> just any other html tags...
</xmp>

正确的版本

正确的版本可以被认为是存储为 STRING 并在一些转义功能/机制的帮助下显示的 HTML。

记住一件事——类 C 语言中的字符串通常写在单引号或双引号之间——如果你用双引号括起来你的字符串 => 你应该转义双精度数（可能用\），如果你把你的单曲中的字符串 => 转义单曲（可能带有\）...

最常见的 - 服务器端语言转义（例如在 PHP 中）

服务器端脚本语言通常有一些内置函数来转义 HTML。

<?php
   $html = "<html> <br> or just any other HTML"; //store html
   echo htmlspecialchars($html); //display escaped html
?>

请注意，在 PHP 8.1 中进行了更改，因此您不再需要指定 ENT_QUOTES 标志：

标志从 ENT_COMPAT 更改为 ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401。

客户端方式（以 JavaScript / JS&jQuery 为例）

在客户端脚本中可以实现与服务器端类似的方法。

纯 JavaScript

没有功能，但有默认行为，如果设置element's innerText或node's textContent：

document.querySelector('.myTest').innerText = "<html><head>...";
document.querySelector('.myTest').textContent = "<html><head>...";

HTMLElement.innerText 和 Node.textContent 不是一回事！您可以在上面的 MDN 文档链接中找到更多关于差异的信息

jQuery（一个 JS 库）

jQuery 有 $jqueryEl.text() 用于此目的：
$('.mySomething .test').text("<html><head></head><body class=\"test\">...");

只需记住与服务器端相同的事情 - 在类似 C 的语言中，将包含字符串的引号转义。

【讨论】：

【解决方案2】：

如果您使用<pre> 标签在您的博客上显示 HTML 标记会发生什么：

&lt;pre&gt;Use a &lt;span style="background: yellow;"&gt;span tag with style attribute&lt;/span&gt; to hightlight words&lt;/pre&gt;

这将通过 HTML 验证，但它会产生预期的结果吗？否。正确的做法是：

&lt;pre&gt;Use a &amp;lt;span style=&amp;quot;background: yellow;&amp;quot;&amp;gt;span tag with style attribute&amp;lt;/span&amp;gt; to hightlight words&lt;/pre&gt;

再举个例子：如果你使用pre标签来显示一些其他语言的代码，仍然需要HTML编码：

<pre>if (i && j) return;</pre>

这可能会产生预期的结果，但它是否通过了 HTML 验证？否。正确的做法是：

<pre>if (i &amp;&amp; j) return;</pre>

长话短说，对 pre 标记的内容进行 HTML 编码，就像处理其他标记一样。

【讨论】：

【解决方案3】：

使用这个，不用担心它们。

<pre>
${fn:escapeXml('
  <!-- all your code -->
')};
</pre>

您需要启用 jQuery 才能使其工作。

【讨论】：

【解决方案4】：

对于在您的标记中发布代码，我建议使用<code> 标签。它的工作方式与 pre 相同，但在语义上被认为是正确的。

否则和<pre>只需要对尖括号进行编码。</pre>

【讨论】：

pre 的初衷是在标记中授予空间以保留在不可编辑的表面上不会显示的字符（即：制表符、换行符、多个空格等）可以对 textarea 做同样的事情，但 textarea 可以编辑）。此外，过去有时会使用 pre 显示表格数据。

TL;DR

只为你 HTML“化石”：使用 &lt;xmp&gt; 标签

正确的版本

最常见的 - 服务器端语言转义（例如在 PHP 中）

客户端方式（以 JavaScript / JS&jQuery 为例）

纯 JavaScript

jQuery（一个 JS 库）

只为你 HTML“化石”：使用 `<xmp>` 标签