如何在网页上显示HTML片段,而无需将每个 <
替换为 <
,并将 >
替换为 >
?
换句话说,是否有一个标签可以实现直到遇到闭合标签才渲染HTML?
如何在网页上显示HTML片段,而无需将每个 <
替换为 <
,并将 >
替换为 >
?
换句话说,是否有一个标签可以实现直到遇到闭合标签才渲染HTML?
样例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>
<xmp>
和 <plaintext>
,因为在21世纪的HTML中没有其他方法来显示&
文本而不是一个符号,Carl! - kirogasa&
来表示&
,使用<
来表示<
。另外,需要将结果包含在<pre><code>…</code></pre>
元素中以保留空格和换行符,并将其标记为代码元素。所有其他解决方案(例如将代码放入<textarea>
或已弃用的<xmp>
元素中)都会失败。1 如果将XHTML声明为XML并通过HTTP Content-Type
头部将其发送至浏览器,则可以选择使用CDATA节。<![CDATA[Your <code> here]]>
但这只适用于XML,而不适用于HTML,即使这也不是一种绝对可靠的解决方案,因为代码中不能包含关闭定界符]]>
。因此,即使在XML中,最简单、最稳健的解决方案也是通过转义。
1举个例子:
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>
here]]>
。 - Dolph>
替换>
。 - Alan<
和&
需要被替换,未转义的>
在HTML内是有效的。 - Konrad Rudolph一种比较简单的展示代码的方法是把它放在 textarea 标签中,并且加上 disabled 属性来防止编辑。
<textarea disabled> code </textarea>
希望这能帮助到寻找简单方法完成工作的人。
但是要注意,这不会为您转义标签,正如您在此处看到的一样(以下显然无效):
<textarea disabled>
This is the code to create a textarea:
<textarea></textarea>
</textarea>
已过时,但在 Firefox 3 和 IE8 中仍可使用。
<xmp>
<b>bold</b><ul><li>list item</li></ul>
</xmp>
推荐:
<pre><code>
code here, escape it yourself.
</code></pre>
废弃的<xmp>
标签本质上实现了这个功能,但不再是XHTML规范的一部分。尽管如此,在所有现代浏览器中仍应该能够工作。
这里有另一个想法,一种hack/特技,可以将代码放在
<textarea disabled="true" style="border: none;background-color:white; width:100%">
- Dan King<xmp>
:
http://jsfiddle.net/barnameha/hF985/1/<div id="myCode">
<p>
hello world
</p>
</div>
<div id="loadHere"></div>
document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;
<template>
或其他通常不会呈现的内容一起使用。 - Sam Watkins<
不需要转义您的所有选项都在此树中:
<p>
)
<
"
和&thing;
需要转义:"
和&thing;
分别<script>
和<style>
仅限<script>
中任何地方都不允许有文字</script
<textarea>
和<title>
<textarea>
是包装代码的好选择</html>
是完全合法的</textarea
</textarea
或类似方法转义此特殊情况&thing;
需要转义:&thing;
注意:>
甚至在普通元素中也不需要转义。
<script>
和<style>
可以被渲染为可见,只需将它们放在<body>
内,并使用style="display: block; white-space: pre;"
和type="text/html"
或其他内容,如果您不希望它作为JavaScript执行。我认为这是一个很好的技巧,适用于文学编程和教学。此外,<xmp>
仍然在主要浏览器中实现,尽管它已经过时。 - Sam Watkins<xmp>
不是有效的HTML5,但你的其他技巧看起来很合适! - Robert Siemer在HTML中?不行。
在XML/XHTML中?你可以使用CDATA
块。
&
,再处理<
。 - Tolga Evcimenexport const escapeHtml = str => str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
。也许有人应该为它创建一个 NPM 包,就像left-pad
一样? - Lionel Rowe