在 HTML 中显示 HTML 片段

Question

如何在网页上显示 HTML sn-ps 而无需将每个 < 替换为 < 和 > 替换为 >？

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

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

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

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

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

Answer 3

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

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

• & 为 &
• < 为 <

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

当然，您应该在<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>

Answer 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? 中有更多信息。

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

Answer 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,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{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, "");

Answer 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

Answer 8

你可以试试：

Hello! Here is some code:

<xmp>
<div id="hello">

</div>
</xmp>

Answer 9

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

对我来说很好用..

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

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

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

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

Answer 10

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

<textarea disabled> code </textarea>

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

Answer 11

我假设：

• 您想编写 100% 有效的 HTML5
• 您想将代码 sn-p（几乎）文字放在 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's answer覆盖

 

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

Answer 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 中那样被重新格式化。 （  之类的东西完全在 textarea 中删除）

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

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

Answer 15

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

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

Answer 16

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Answer 17

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

它将返回转义的 Html

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

Answer 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()），则唯一的方法是自己转义代码。

Answer 20

我就是这样做的：

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

Answer 21

Deprecated，但适用于 FF3 和 IE8。

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

推荐：

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

Answer 22

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

Answer 23

这是迄今为止大多数情况下最好的方法：

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

我会投票给第一个提出建议的人，但我没有声望。不过，为了让人们在互联网上寻找答案，我还是觉得有必要说点什么。

Answer 24

最终最好的（虽然烦人的）答案是“逃避文本”。

然而，有很多文本编辑器——甚至是独立的迷你实用程序——可以自动执行此操作。因此，如果您不想手动转义，则永远不必手动转义（除非它是转义代码和未转义代码的混合...）

快速谷歌搜索显示这个，例如：http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

Answer 25

HTML 的行之有效的方法：

1. 将& 字符替换为&
2. 将< 字符替换为<
3. 将> 字符替换为>
4. 可以选择用<pre> 和/或<code> 标记包围您的HTML 示例。

Answer 26

有几种方法可以在 HTML 中escape everything，但都不是很好。

或者你可以输入一个iframe 来加载一个普通的旧文本文件。

Answer 27

在 HTML 中？没有。

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