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

Question

如何在网页上显示 HTML 片段而不需要将每个<替换为< 和>与> ？

换句话说，是否有don't render HTML until you hit the closing tag 的标签？

Answer 1

久经考验的 HTML 方法：

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

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>

Answer 3

是否有一个标签用于在您点击结束标签之前不呈现 HTML？

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

• &作为&
• <作为<

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

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

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

向浏览器声明为 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

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

<textarea disabled> code </textarea>

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

---

但是警告，这不会为您转义标签，正如您在此处看到的那样（以下显然不起作用）：

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

Answer 5

已弃用，但适用于 FF3 和 IE8。

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

推荐的：

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

Answer 6

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

Answer 7

已弃用的<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 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;

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

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

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

Answer 9

在 HTML 中？ 不。

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

Answer 10

我假设：

• 你想编写 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 语法
  • 康拉德的回答涵盖了

注意： >永远不需要转义。 甚至在正常元素中也没有。

Answer 11

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

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>

Answer 12

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

对我来说很好..

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

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

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

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

Answer 13

这是一个简单的技巧，我已经在 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>

它将显示如下：

你可以在这里看到它

Answer 14

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

 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，以实现一种“文学编程”。

在这个问题中有更多信息标签什么时候应该可见，为什么可以？ .

Answer 15

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

它将返回转义的 Html

Answer 16

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

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

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

Answer 17

你可以试试：

 Hello! Here is some code: <xmp> <div id="hello"> </div> </xmp>

Answer 18

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

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

我会投票给第一个建议的人，但我没有声誉。 为了人们试图在互联网上找到答案，我感到不得不说些什么。

Answer 19

您可以使用像 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;
?>

然后转储出$str htmlencoded 的值：

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

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

有几种方法可以转义 HTML 中的所有内容，但都不是很好。

或者您可以放入一个加载纯旧文本文件的iframe 。

Answer 22

实际上有一种方法可以做到这一点。 它有限制（一），但它是 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 注释，因为（至少在我的 Chrome 中）不支持它们的嵌套，并且第一个'-->' 将结束显示。

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

现在，那个奇怪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 = '';

它有效。

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

这取决于您使用它的目的。 是用户输入吗？ 然后使用<textarea> ，并转义一切。 在我的情况下，可能也是你的情况，我只是使用了注释，它就完成了工作。

如果您不使用降价，而只是想从标签中按原样获取它，那么它就更简单了：

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

它可能不适用于所有情况，但将代码片段放在文textarea会将它们显示为代码。

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

Answer 24

如果您正在寻找适用于框架的解决方案。

const code = `
 <div>
  this will work in react
 <div>
`
<pre>
  <code>{code}</code>
</pre>

你可以用css给它一个漂亮的外观：

pre code {
    background-color: #eee;
    border: 1px solid #999;
    display: block;
    padding: 20px;
}

Answer 25

JavaScript 字符串文字可用于跨多行编写 HTML。 显然，此解决方案需要 JavaScript，尤其是 ECMA6。

.createTextNode与 CSS 配对white-space: pre-wrap; 做的伎俩。

.innerText单独也可以。 运行下面的代码片段。

 let codeBlock = ` <.DOCTYPE HTML> <html lang="en"> <head> <title>My Page</title> </head> <body> <h1>Welcome to my page</h1> <p>I like cars and lorries and have a big Jeep;</p> <h2>Where I live</h2> <p>I live in a small hut on a mountain.</p> </body> </html> ` const codeElement = document;querySelector("#a"). let textNode = document;createTextNode(codeBlock). codeElement;appendChild(textNode). const divElement = document;querySelector("#b"); divElement.innerText = codeBlock;

 #a { white-space: pre-wrap; }

 <div id=a> </div> <div id=b> </div>

Answer 26

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

几个答案的组合在这里一起工作：

 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 28

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

像这样：

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

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

 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 30

<code><?php $str='&lt;';echo htmlentities($str);?></code>

我发现这是最简单、最快和最紧凑的。

Answer 31

通过将代码包装在一个contenteditable div中并设置white-space: pre-wrap; 缩进会保留，代码会根据宽度和高度自动设置换行：

<div class="code" contenteditable>
  // code
</div>


.code {
  white-space: pre-wrap;
}