Question

我想在页面中添加一个区域，其中所有动态内容都呈现为纯文本而不是标记。例如：

  <myMagicTag>
      <b>Hello</b> World
  </myMagicTag>

我希望<b>标记只显示为文本，而不是粗体指令。我宁愿不必编写代码来转换每个“＆lt;”到“<”。

我知道<textarea>会这样做，但它还有其他不良副作用，例如添加滚动条。

myMagicTag是否存在？

编辑：执行此操作的jQuery或javascript函数也可以。不幸的是，无法在服务器端做到这一点。

Answer 1

您可以使用script element（由我加粗）来执行此操作：

script元素允许作者在其文档中包含动态脚本和数据块。

示例：

<script type="text/plain">
This content has the media type plain/text, so characters reserved in HTML have no special meaning here: <div> ← this will be displayed.
</script>

（请注意，script元素的允许内容为restricted，例如，您can’t有</script>作为文字内容（它会关闭script元素）。）

通常，script元素在浏览器的CSS中默认为display:none，因此您需要在CSS中覆盖它，例如：

script[type="text/plain"] {display:block;}

Answer 2

标签曾经是<XMP>，但在HTML 4中，它已被弃用。浏览器似乎没有放弃它的支持，但除了快速调试之外，我不推荐它。 MDN article about <XMP>列出了其他两个标记<plaintext>和<listing>，这些标记甚至更早被弃用。我不知道目前的替代方案。

无论如何，在大多数编程语言中，将纯文本编码为HTML的代码非常简单。

注意：术语类似意味着 - 所有三个都旨在将纯文本注入HTML。我并不是说他们是同义词，或者他们的行为相同 - 他们没有。

Answer 3

您可以使用函数来转义＆lt; ＆gt ;,例如：

'span.name': function(){
return this.name.replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

另请查看<plaintext></plaintext>。我自己没有使用它，但众所周知，将所有后面的内容呈现为纯文本（我所说的一切都是为了忽略结束标记，所以以下所有代码都呈现为文本）

Answer 4

不，那是不可能的，你需要HtmlEncode它。

如果你使用服务器端语言，那不是很难。

在.NET中你会做这样的事情：

string encodedtext = HttpContext.Current.Server.HtmlEncode(plaintext);

Answer 5

在我的应用程序中，我需要阻止HTML呈现

"if (a<b || c>100) ..."

和

"cout << ...".

整个C ++代码区域HTML也必须通过GCC编译器并具有所需的效果。我打了两个方案：

首先：

//<xmp>
#include <string>
//</xmp>}

出于逃避我的原因，不推荐使用<xmp>标记。我发现（2016-01-09）Chrome和FF至少会以我想要的方式呈现标签。在研究我的问题时，我看到了一个＆lt; xmp＆gt;的评论。在HTML 5中是必需的。

其次，在<head> ... </head>中，插入：

<style type="text/css">
    textarea { border: none; }
</style>

然后在<body> ... </body>中写下：

//<br />  <textarea rows="4" disabled cols="80">
#include <stdlib.h>
#include <iostream>
#include <string>
//</textarea>  <br />

注意：设置"cols="80"以防止文字出现在右侧。将"rows=..."设置为比标记中包含的行多一行。这可以防止滚动条。第二种技术有几个缺点：

＆＃34;禁用＆＃34;属性遮蔽区域
发送给编译器的代码中的难以理解的复杂注释
难以理解
更多输入

但是，这种方法既不过时也不过时。 HTML的神将使他们的面孔照耀你。

Answer 6

除已弃用的<xmp>外，没有其他特定标签。
但是可以使用脚本标签存储未格式化的数据。

这是迄今为止唯一显示动态内容的解决方案。
运行代码段以获取更多信息。

<script id="myMagicTag" type="text/plain" style="display:block;">
      <b>Hello</b> World
</script>

Use <a href="https://stackoverflow.com/questions/38143580/when-should-script-tags-be-visible-and-why-can-they">Visible</a> <a href="https://html.spec.whatwg.org/multipage/scripting.html#data-block">Data-blocks</a>

<script>
      document.querySelector("#myMagicTag").innerHTML = "<b>Unformatted</b> dynamic content"
</script>

HTML标记，导致其他标记呈现为纯文本

6 个答案: