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

我怎样才能在网页上显示HTML片段，而不需要将每个<替换为&lt;和>替换为&gt;?

换句话说，是否存在不要渲染HTML，直到你点击结束标签的标记?

543090 次浏览
小开
最佳答案

有不渲染HTML直到你点击结束标签?的标签吗

没有，没有。在HTML中，除了转义某些字符外，没有其他方法:

  • &作为&amp;
  • <作为&lt;

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

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

所有其他解决方案，例如将代码包装到__ABC0或(已弃用)<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 / XHTML吗?你可以使用CDATA块。

小开

在HTML中有一些逃避一切的方法，没有一个是好的。

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

小开

弃用，但在FF3和IE8工作。

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

推荐:

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

行之有效的HTML方法:

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

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

这里有另一个想法，一个hack/parlor trick，你可以把代码放在一个文本区域，像这样:

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

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

如果你想要它是不可编辑的，看起来不同，那么你可以很容易地使用CSS样式。唯一的问题是浏览器会在右下角添加一个小的拖动句柄来调整方框的大小。或者，尝试使用input标记。

正确的方式注入代码到你的文本区域是使用服务器端语言，比如PHP:

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

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

除此之外，如果使用静态HTML，唯一的方法是自己转义代码，如果使用这种技术，则使用服务器端方法，如。net的HtmlEncode()。

小开

最终，最好的答案(尽管很烦人)是“转义文本”。

然而，有很多文本编辑器——甚至是独立的迷你实用程序——可以自动完成这项工作。所以如果你不想，你永远都不应该手动转义它(除非它是转义和未转义代码的混合…)

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

小开

这是目前为止在大多数情况下最好的方法:

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

我会投票给第一个提出这个建议的人，但我没有名气。为了那些试图在网上找到答案的人，我不得不说些什么。

小开

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

小开

示例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>
< p > 示例3: (如果你真的在“引用”;一个代码块，那么标记将是)

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

你可以使用像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>
小开

我是这样做的:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
小开 
function escapeHTML(string)
{
var pre = document.createElement('pre');
var text = document.createTextNode(string);
pre.appendChild(text);
return pre.innerHTML;
}//end escapeHTML

它将返回转义的Html

小开

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

    <xmp id="container">


&lt;xmp &gt;


<p>a paragraph</p>


&lt;/xmp &gt;


</xmp>
小开

它可能不是在所有情况下都有效，但将代码段放在textarea中会将它们显示为代码。

如果你不想让它看起来像一个实际的文本区域，你可以用CSS样式文本区域。

小开

一种简单的方法来显示代码将包括它在一个文本区域和添加禁用属性，所以它是不可编辑的。

<textarea disabled> code </textarea>

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

但是警告，这不会为你转义标签，正如你在这里看到的(下面显然是行不通的):

<textarea disabled>


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


</textarea>

小开 
 //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)
小开

我认为:

  • 你想要编写100%有效的HTML5
  • 你想要在HTML中放置代码片段(几乎)文字
    • 尤其是<不需要转义
      • 李< / ul > < / >

    你所有的选项都在这棵树里:

    • 与HTML语法
      • 有五种元素
      • 那些被称为“正常元素”的元素(比如<p>)
        • 不能有一个字面<
        • 它将被视为下一个标记或注释的开始
          • 李< / ul > < / > <李>空白元素
          • 它们没有内容
          • 你可以把你的HTML放在一个数据属性中(但这对所有元素都是正确的)
          • 需要JavaScript将数据转移到其他地方
          • 在双引号属性中，"和&thing;分别需要转义:&quot;和&amp;thing;
            • 李< / ul > < / >
          • 原始文本元素
            • 只有<script>和<style>
            • 它们从未呈现为可见
            • 但在Javascript中嵌入文本可能是可行的
            • Javascript允许带反勾号的多行字符串
            • 然后可以动态地插入它
            • 在<script>中的任何地方都不允许使用字面量</script
              • 李< / ul > < / >
            • 可转义原始文本元素
              • 只有<textarea>和<title>
              • <textarea>是一个很好的包装代码的候选者
              • 在里面写</html>是完全合法的
                • 由于明显的原因，
              • not legal是子字符串</textarea
                • 用&lt;/textarea或类似的方法转义这种特殊情况
                  • 李< / ul > < / >
                • &thing;需要转义:&amp;thing;
                  • 李< / ul > < / > <李>外国元素
                  • 元素来自MathML和SVG名称空间
                  • 至少SVG允许再次嵌入HTML…
                  • 和CDATA是允许的，所以它似乎有潜力
                    • 李< / ul > < / > 李< / ul > < / >
                  • 与XML语法

                    ,

                    注意:>从来不需要转义。甚至在正常元素中也没有。

小开

如果你的目标是显示你在同一页面的其他地方执行的代码块，你可以使用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;这样的东西在textarea中被完全删除)

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

对我来说很好。

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

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

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

这种方法可能有好处或缺点，也可能有更好的方法来实现相同的结果，如果是这样，请评论，因为我很想从中学习:)

小开

你可以试试:

Hello! Here is some code:


<xmp>
<div id="hello">


</div>
</xmp>

小开

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

它将显示如下:

enter image description here

你可以看到它现场在这里

小开

实际上，有一种方法可以做到这一点。它有一个限制(1)，但是是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的内容，然后用摊牌标记处理它，然后将输出分配到另一个DIV中。这个想法是，在HTML文件中写入内联标记，然后在浏览器中打开，它将在动态加载中转换。因此，在我的例子中，<!--被转换为<p><!--</p>，注释正确地转义了。它可以工作，但污染了屏幕。因此，为了方便地使用regex删除它，使用了随机字符串。代码如下:

    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>，并转义所有内容。在我的情况下，可能也是你的情况下，我只是使用注释，它的工作。

如果你不使用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, "");
小开

下面是几个答案的组合:

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>

小开

这是一种hack，但是我们可以使用类似的东西:

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，这是一种“有文化的编程”。

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

小开

您可以通过将标记更改为span来分隔它们。

是这样的:

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

小开

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

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>

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

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


提交答案