如何在HTML文档中显示html标签？

I simply want to create something like that:

我只是想创造这样的东西:

<strong>blah blah</strong>

I've been trying to do this for a long time though for some reason whenever I put the code and the pre tags they don't do what they should. They do unformat the content - I don't see any formatting, though the tags don't appear. For example, I wrote :

我一直试图这样做很长一段时间虽然由于某种原因,每当我把代码和预标记他们没有做他们应该做的事情。他们没有格式化内容 - 我没有看到任何格式,虽然标签没有出现。例如,我写道:

<pre><b>abc</b></pre>

The abc is appearing not bold, but I can't see the tag itself. How can I do that? I don't want to use entities like &fdaf; because I am not writing the incoming text

abc看起来不是大胆的,但我看不到标签本身。我怎样才能做到这一点?我不想使用像&fdaf这样的实体;因为我没有写入传入的文本

8 个解决方案

#1

Like mkluwe also said, you should use JavaScript (or a server-side script) to properly escape any user input. Here's another JavaScript function you could try:

就像mkluwe所说,你应该使用JavaScript(或服务器端脚本)来正确地转义任何用户输入。这是您可以尝试的另一个JavaScript函数:

String.prototype.escapeHTML = function () {                                        
  return(                                                                 
    this.replace(/>/g,'&gt;').
         replace(/</g,'&lt;').
         replace(/"/g,'&quot;')
  );
};
var codeEl = document.getElementById('test');
if (codeEl) {
  codeEl.innerHTML = codeEl.innerHTML.escapeHTML();
}

I haven't tested this in IE, but it should work there in theory. Here's a page where you can view the results: http://jsbin.com/oruri5/2/edit

我没有在IE中测试过这个,但它应该在理论上有效。这是一个页面,您可以在其中查看结果:http://jsbin.com/oruri5/2/edit

#2

Use the <xmp> tag.

使用

标记。&lt;/p&gt;

E.g.

<xmp>

<html>
<body>This is my html inside html.</body>
</html>

</xmp>

You can also add styles and formatting inside <xmp> as well.

您还可以在

中添加样式和格式。&lt;/p&gt;

#3

How about replacing the incoming texts by < and > The tags should be visible in source view, but not "in normal view".

如何用<替换传入的文本?和>标签应该在源视图中可见,但不能在“普通视图”中显示。

#4

You could use some javascript to change elements on the fly.

您可以使用一些JavaScript来动态更改元素。

If you use jQuery:

如果你使用jQuery:

$( 'pre' ).text( $( 'pre' ).html() );

does the trick.

诀窍。

#5

The easiest way I know is to replace the < and > with < and > that way it's not html anymore. There are several other codes like these for & symbols, etc.

我知道最简单的方法是将 <和> 替换为<和>这样它不再是HTML了。还有其他几个代码,例如&符号等。

Where is the text coming from? If it's in javascript than you're easiest way would be to do a regex replace in javascript.

文字来自哪里?如果它是在javascript中比你最简单的方法是在javascript中进行正则表达式替换。

#6

You have to write stuff like &fdaf; because the browser refuses to believe that you mean <pre> for everything. This is the correct behavior, else how would you ever escape from a <pre> section? You have to go through the doc and for every less-than sign substitute <. You do not have to do that for the greater-than sign or for ampersand (usually).

你必须写像&fdaf;因为浏览器拒绝相信你的意思是

。这是正确的行为,否则你将如何逃离部分?你必须通过文档和每个小于号的替换<。您不必为大于号或者&符号(通常)执行此操作。

#7

Don't use <xmp>, <plaintext> and <listing> Use as suggested by MDN:

不要使用

,&lt;plaintext&gt;和&lt;listing&gt;按照MDN的建议使用:&lt;/p&gt;

Use the <pre> element or, if semantically adequate, the <code> element
instead. Note that you will need to escape the '<' character as '&lt;'
to make sure it is not interpreted as markup."

As you can see in this link: MDN xmp

正如您在此链接中看到的:MDN xmp

#8

to build on @mkluwe's answer, here is an example:

建立@ mkluwe的答案,这是一个例子:

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">        </script>
  </head>
  <body>
    <pre>
      <a href="http://localhost:3000/l/1/2/3" target="_blank">
        <img src="http://localhost:3000/b/1/2/3/4" target="_blank">
      </a>
    </pre>
    <script>
      $( 'pre' ).text( $( 'pre' ).html() );
    </script>
  </body>
</html>

#1