11

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

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

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

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

myMagicTag 存在吗？

编辑：执行此操作的 jQuery 或 javascript 函数也可以。不幸的是，不能在服务器端进行。

4

6 回答 6

17

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

该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元素的允许内容是受限的，例如，您不能将其</script>作为文本内容（它会关闭script元素）。）

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

script[type="text/plain"] {display:block;}
于 2013-04-19T23:58:41.070 回答
3

该标签曾经是，<XMP>但在 HTML 4 中已被弃用。浏览器似乎并没有放弃它的支持，但除了快速调试之外，我不推荐它。MDN 文章 about<XMP>列出了另外两个标签<plaintext>和<listing>，它们甚至更早被弃用。我不知道任何当前的替代方案。

不管怎样，在大多数编程语言中，将纯文本编码为 HTML 的代码都非常简单。

注意：“相似”一词的确切含义是——这三个都旨在将纯文本注入 HTML。我并不是暗示它们是同义词或它们的行为相同——它们不是。

于 2013-04-19T17:45:10.837 回答
2

您可以使用函数来转义 < >，例如：

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

也看看<plaintext></plaintext>。我自己没有使用过它，但众所周知，它会将后面的所有内容呈现为纯文本（我的意思是说它忽略了结束标签，因此以下所有代码都呈现为文本）

于 2013-04-19T18:21:53.470 回答
1

除了 deprecated 之外没有特定的标签<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>

于 2019-08-04T14:03:29.377 回答
0

不，这是不可能的，您需要对其进行 HtmlEncode。

如果您使用服务器端语言，那并不难。

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

string encodedtext = HttpContext.Current.Server.HtmlEncode(plaintext);
于 2013-04-19T17:35:59.643 回答
0

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

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

和

"cout << ...".

此外，整个 C++ 代码区域 HTML 必须通过 GCC 编译器才能达到预期效果。我遇到了两个方案：

第一的：

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

由于我无法理解的原因，该<xmp>标签已被弃用。我发现 (2016-01-09) Chrome 和 FF 至少以我想要的方式呈现标签。在研究我的问题时，我看到 HTML 5 中需要 <xmp> 的注释。

其次，在 中<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=..."为比标签中包含的多行。这可以防止滚动条。第二种技术有几个缺点：

  • “disabled”属性对区域进行着色
  • 发送到编译器的代码中的难以理解的复杂注释
  • 更难理解
  • 更多打字

但是，这种方法既没有过时也没有过时。HTML 之神会让他们的脸向您闪耀。

于 2016-01-09T19:08:51.847 回答