如何在网页上显示HTML片段,而不需要将每个<替换为<>和>?
换句话说,是否有一个标记表示在点击结束标记之前不呈现HTML ?
如何在网页上显示HTML片段,而不需要将每个<替换为<>和>?
换句话说,是否有一个标记表示在点击结束标记之前不呈现HTML ?
当前回答
实际上有一种方法可以做到。它有一个限制(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注释,这根本不是问题。而且,逃避一个构念比逃避一堆构念容易。
Now, what is that weird LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo string? It's a random string, like a hash, unlikely to be used in the block, and used for? Here's the context, why I have used it. In my case, I took the contents of one DIV, then processed it with Showdown markdown, and then the output assigned into another div. The idea was, to write markdown inline in the HTML file, and just open in a browser and it would transform on the load on-the-fly. So, in my case, <!-- became transformed to <p><!--</p>, the comment properly escaped. It worked, but polluted the screen. So, to easily remove it with regex, the random string was used. Here's the code:
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, "");
其他回答
这是目前为止在大多数情况下最好的方法:
<pre><code>
code here, escape it yourself.
</code></pre>
我会投票给第一个提出这个建议的人,但我没有名气。为了那些试图在网上找到答案的人,我不得不说些什么。
最终,最好的答案(尽管很烦人)是“转义文本”。
然而,有很多文本编辑器——甚至是独立的迷你实用程序——可以自动完成这项工作。所以如果你不想,你永远都不应该手动转义它(除非它是转义和未转义代码的混合…)
快速搜索谷歌会显示这个,例如:http://malektips.com/zzee-text-utility-html-escape-regular-expression.html
在HTML ?不。
在XML / XHTML吗?您可以使用CDATA块。
在HTML中有几种方法可以转义所有内容,但都不是很好。
或者你可以放入一个iframe来加载一个普通的旧文本文件。
<textarea ><?php echo htmlentities($page_html); ?></textarea>
对我来说很好。
“记住亚历山大的建议,这就是为什么我认为这是一个很好的方法”
如果我们只是尝试朴素的<textarea>,它可能并不总是工作,因为可能会关闭textarea标签,这可能会错误地关闭父标签,并在父文档上显示HTML源代码的其余部分,这看起来很尴尬。
使用htmlentities将所有适用的字符(如< >)转换为HTML实体,从而消除了任何泄漏的可能性。
这种方法可能有好处或缺点,也可能有更好的方法来实现相同的结果,如果是这样,请评论,因为我很想从中学习:)