在 HTML 中显示 HTML 片段

Posted 2023-02-15

技术标签:

【中文标题】在 HTML 中显示 HTML 片段【英文标题】：How to display raw HTML code on an HTML page 【发布时间】：2011-02-18 17:05:18 【问题描述】：

如何在网页上显示 html sn-ps 而无需将每个 &lt; 替换为 &lt; 和 &gt; 替换为 &gt;？

换句话说，是否有一个标签 在你点击结束标签之前不渲染 HTML？

【问题讨论】：

【参考方案1】：

我很久以前就用过这个，它对我有用，我希望它也能帮助你。

var preTag = document.querySelectorAll('pre');
console.log(preTag.innerHTML);
for (var i = 0; i < preTag.length; i++) 
  var pattern = preTag[i].innerHTML;
  pattern = pattern.replace(/</g, "&lt;").replace(/>/g, "&gt;");
  console.log(pattern);
  preTag[i].innerHTML = pattern;

<pre>
  <p>example</p>
  <span>more text</span>
</pre>

【讨论】：

【参考方案2】：

您可以通过将标签更改为跨度来分隔标签。

像这样：

<span><</span> <!-- opening bracket of h1 here -->
<span>h1></span> <!-- opening tag of h1 completed here -->
<span>hello</span> <!-- text to print -->
<span><</span> <!-- closing h1 tag's bracket here -->
<span>/h1></span> <!-- closing h1 tag ends here -->

而且，您只能将&lt;（左尖括号）添加到跨度

<span><</span> <!-- opening bracket of h1 here -->
h1> <!-- opening tag of h1 completed here -->
hello <!-- text to print -->
<span><</span> <!-- closing h1 tag's bracket here -->
/h1><!-- closing h1 tag ends here -->

【讨论】：

这比用&lt; 替换打开的&lt; 有什么好处？ @KonradRudolph 正如您在上面提到的，我只是在展示还有另一种显示方式。你是最好的。【参考方案3】：

是否有一个标签 在点击结束标签之前不要渲染 HTML？

没有，没有。在 HTML 本身中，没有办法转义一些字符：

&amp; 为 &amp; &lt; 为 &lt;

（顺便说一句，没有必要逃避&gt;，但人们经常出于对称原因这样做。）

当然，您应该在<pre><code>…</code></pre> 中包围生成的转义 HTML 代码，以 (a) 保留空格和换行符，并 (b) 将其标记为代码元素。

所有其他解决方案，例如将您的代码包装到 <textarea> 或（已弃用的）<xmp> 元素中，将中断。^1支持>

向浏览器声明为 XML 的 XHTML（通过 HTTP Content-Type 标头！ - 仅设置 DOCTYPE 是不够）也可以使用 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>

【讨论】：

不错。那么这是 HTML 标准的一部分吗？还是更深一些，就像 xml 标准的一部分？在 HTML 中，这将呈现 ` here]]>` 是的，这是一个很好的答案，但不要忘记将 &gt; 替换为 &gt; @Alan 我也会这样做，但实际上并不是必要：只有&lt; 和&amp; 需要替换，未转义的&gt; 在内部有效HTML。 @SamWatkins 但是你的解决方案并不比我的简单。你刚刚改变了什么需要被转义，并且你的解决方案很老套，正如你承认的那样。从字面上看，正确地做这件事没有任何优势。这是一个有正确解决方案的已解决问题。不需要 hack，除非你的整个设置都是 hacky。【参考方案4】：

这有点小技巧，但我们可以使用类似的东西：

body script 
    display: block;
    font-family: monospace;
    white-space: pre;

<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

使用该 CSS，浏览器将在正文中显示脚本。它不会尝试执行这个脚本，因为它有一个未知类型text/html。没有必要在 <script> 中转义特殊字符，除非您想包含结束 </script> 标记。

我正在使用类似这样的东西在页面正文中显示可执行的 javascript，用于一种“文学编程”。

在这个问题When should tags be visible and why can they? 中有更多信息。

【讨论】：

【参考方案5】：

这里有几个答案的组合：

function c(s) 
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")


displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)

<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>

【讨论】：

【参考方案6】：

其实有一种方法可以做到这一点。它有限制（一），但它是 100% 标准的，没有被弃用（如 xmp），并且可以工作。

这很简单。这里是：

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

请让我解释一下。首先，普通的 HTML 注释可以完成这项工作，以防止整个块被解释。您可以轻松地在其中添加任何标签，所有标签都将被忽略。从解释中忽略，但仍可通过innerHTML 获得！所以剩下的就是获取内容，过滤前后评论标记。

除了（记住 - 限制）您不能将 HTML cmets 放入其中，因为（至少在我的 Chrome 中）它们的嵌套不受支持，并且第一个“-->”将结束演出。

嗯，这是一个令人讨厌的小限制，但在某些情况下，如果您的文本没有 HTML cmets，这根本不是问题。而且，逃避一个构造体，然后是一大堆构造体更容易。

现在，那个奇怪的LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo 字符串是什么？它是一个随机字符串，就像一个哈希，不太可能在块中使用，并且用于？这是上下文，为什么我使用它。就我而言，我获取了一个 DIV 的内容，然后使用 Showdown markdown 对其进行处理，然后将输出分配到另一个 div。这个想法是，在 HTML 文件中内联编写 markdown，只需在浏览器中打开，它就会在加载时即时转换。所以，在我的例子中，<!-- 变成了<p><!--</p>，评论被正确地转义了。它有效，但污染了屏幕。因此，为了使用正则表达式轻松删除它，使用了随机字符串。代码如下：

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.0,10LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.0,10<\/p>/g, "");
    src.innerHTML = '';

而且它有效。

如果有人感兴趣，this article 就是使用这种技术编写的。随意下载并查看 HTML 文件。

这取决于您使用它的目的。是用户输入吗？然后使用<textarea>，然后转义所有内容。在我的情况下，可能你的情况也是如此，我只是使用了 cmets，它就可以完成这项工作。

如果你不使用markdown，只是想从标签中获取它，那就更简单了：

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

和获取它的 JavaScript 代码：

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");

【讨论】：

【参考方案7】：

这是一个简单的技巧，我已经在 Safari 和 Firefox 中尝试过

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

它会显示如下：

你可以看到它直播Here

【讨论】：

【参考方案8】：

你可以试试：

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

【讨论】：

【参考方案9】：

<textarea ><?php echo htmlentities($page_html); ?></textarea>

对我来说很好用..

“记住Alexander's的建议，这就是我认为这是一个好方法的原因”

如果我们只是尝试简单的<textarea>，它可能并不总是有效，因为可能会关闭textarea标签，这可能会错误地关闭父标签并在父文档上显示HTML源的其余部分，这看起来很尴尬。

使用htmlentities 将所有适用的字符（例如< >）转换为HTML 实体，从而消除任何泄漏的可能性。

这种方法可能有好处或缺点，或者是实现相同结果的更好方法，如果是这样，请发表评论，因为我很想向他们学习:)

【讨论】：

虽然此代码可以回答问题，但提供有关如何和 为什么 解决问题的附加上下文将提高答案的长期价值。如果你像这样使用 htmlentities() ， @Nick 是的，在我看来 textarea 是一个自然的容器，因为它会自动添加滚动条和其他需要样式的东西，如果我们把它放在某个东西的 div 中......【参考方案10】：

显示代码的一种天真的方法是将其包含在文本区域中并添加禁用属性使其不可编辑。

<textarea disabled> code </textarea>

希望能帮助那些正在寻找一种简单方法来完成工作的人..

【讨论】：

Readonly 可能是比 disabled 更好的属性，因为您可以突出显示其中的文本。也可能添加一种样式，去除使其看起来像输入元素的任何特征，尽管这是次要的。很棒的解决方案。谢谢 & 符号仍将被解释。例如将呈现为实际的不间断空间。但是好的答案仍然是我想做的事情的理想选择。我尝试了很多方法，这是唯一适合我的方法。非常感谢。太棒了！适用于 Windows 10 上的 Chrome、Edge 和 Firefox。【参考方案11】：

我假设：

您想编写 100% 有效的 HTML5 您想将代码 sn-p（几乎）文字放在 HTML 中尤其是< 不需要转义

您的所有选项都在这棵树中：

使用 HTML 语法有五种元素那些被称为“普通元素”的（比如<p>）不能有文字< 它将被视为下一个标签或评论的开始空元素他们没有内容您可以将 HTML 放入数据属性中（但这适用于所有元素）需要 JavaScript 才能将数据移动到别处在双引号属性中，" 和 &amp;thing; 需要转义：分别为 &quot; 和 &amp;thing; 原始文本元素仅限 <script> 和 <style> 它们永远不可见但在 Javascript 中嵌入您的文本可能是可行的 Javascript 允许使用反引号的多行字符串然后可以动态插入 </script 不允许在 <script> 中的任何位置使用文字可转义的原始文本元素仅限 <textarea> 和 <title> <textarea> 是包装代码的理想选择在里面写</html>是完全合法的不合法是子字符串&lt;/textarea，原因很明显使用&lt;/textarea 或类似名称转义这种特殊情况 &amp;thing; 需要转义：&amp;thing; 外来元素 MathML 和 SVG 命名空间中的元素至少 SVG 允许再次嵌入 HTML... 那里允许使用 CDATA，所以它似乎有潜力使用 XML 语法被Konrad's answer覆盖

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

【讨论】：

我喜欢你回答的综合方法。一些更正：<script> 和 <style> 可以呈现可见，只需将它们放在 <body> 和 style="display: block; white-space: pre;" 和 type="text/html" 中，或者如果您不希望它作为 JavaScript 执行。我认为这是一个很好的技巧，对文学编程和教学很有用。此外，<xmp> 仍然在主流浏览器中实现，尽管它已被弃用。有趣。 @SamWatkins <xmp> 不是有效的 HTML5，但您的其他技巧看起来不错！【参考方案12】：

如果您的目标是在同一页面的其他地方显示您正在执行的一段代码，您可以使用 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;

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

这是一个演示：https://jsfiddle.net/wphps3od/

这种方法比使用 textarea 有一个优势：代码不会像在 textarea 中那样被重新格式化。（&nbsp; 之类的东西完全在 textarea 中删除）

【讨论】：

这是一个相当不错的方法，使用 JavaScript 和 DOM API 为我们进行转义。我们可以将它与<template> 或通常不会呈现的东西一起使用。【参考方案13】：

最佳方式：

<xmp>
// your codes ..
</xmp>

旧样本：

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

不错的 CSS 示例：

pre
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;

语法高亮代码（专业版）：

rainbows （非常完美）

prettify

syntaxhighlighter

highlight

JSHighlighter

最适合您的链接：

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

How to highlight source code in HTML?

【讨论】：

答案中使用的元素根本没有解决问题：它们不影响对“ developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp 说，“不要使用这个元素。它自 HTML3.2 以来已被弃用，并且没有以一致的方式实现。它已完全从HTML5 中的语言。” 我使用了发布的 CSS，谢谢，它解决了很多设计问题【参考方案14】：

 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) 
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();


html = htmlEncode(html)

【讨论】：

【参考方案15】：

它可能不适用于所有情况，但是将代码 sn-ps 放在 textarea 内会将它们显示为代码。

如果您不希望它看起来像一个实际的文本区域，您可以使用 CSS 设置文本区域的样式。

【讨论】：

【参考方案16】：

这很简单.... 使用这个 xmp 代码

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

【讨论】：

【参考方案17】：

function escapeHTML(string)
     
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
//end escapeHTML

它将返回转义的 Html

【讨论】：

【参考方案18】：

您可以使用像 PHP 这样的服务器端语言来插入原始文本：

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

然后转储出$strhtmlencoded 的值：

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>

【讨论】：

【参考方案19】：

已弃用的<xmp> 标记本质上是这样做的，但不再是 XHTML 规范的一部分。它应该在所有当前浏览器中仍然有效。

这是另一个想法，一个 hack/parlor 技巧，您可以将代码放在 textarea 中，如下所示：

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

将尖括号和类似这样的代码放在文本区域内是无效的 HTML，并且会在不同的浏览器中导致未定义的行为。在 Internet Explorer 中，HTML 被解释，而 Mozilla、Chrome 和 Safari 则不解释。

如果您希望它是不可编辑的并且看起来与众不同，那么您可以使用 CSS 轻松设置它的样式。唯一的问题是浏览器会在右下角添加那个小拖动手柄来调整框的大小。或者，尝试使用输入标签。

将代码注入文本区域的正确方法是使用像 PHP 这样的服务器端语言，例如：

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

然后它绕过 html 解释器并将未解释的文本一致地放入所有浏览器的 textarea 中。

除此之外，如果使用静态 HTML 或使用服务器端方法（例如 .NET 的 HtmlEncode()），则唯一的方法是自己转义代码。

【讨论】：

这是一个可怕的想法。如果显示的是动态 html，并且有人做了以下事情怎么办。 PHP 是服务器端的，所以它不会改变浏览器看到的结果。它尤其不会绕过 HTML 解释器。我喜欢 textarea 的格式，使它看起来不像一个输入框。我还添加了 100% 宽度以减少换行：<textarea disabled="true" style="border: none;background-color:white; width:100%"> @GaryDrocella 如果您将 【参考方案20】：

我就是这样做的：

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";

【讨论】：

此代码易受 xss 攻击。任何人都可以设置 $str=" 嗨，这可能很好地解决了这个问题......但如果你能提供一些关于它如何工作以及为什么工作的解释会很好:) 不要忘记 - 有很多新手在 Stack Overflow 上，他们可以从你的专业知识中学到一两件事——对你来说显而易见的事情对他们来说可能并不那么明显。【参考方案21】：

Deprecated，但适用于 FF3 和 IE8。

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