如何在html页面显示html标签源码

这是一篇不正经实现方案报道。

1 引言

先来看个问答：
stackoverflow: Why was the xmp HTML tag deprecated? [duplicate]
这个问题感觉问得好啊：为什么<xmp>标签被遗弃了啊？

<xmp>标签是什么？
它是能真正显示html源码的一个包含标签。

比如下面源码，放在html页面中浏览器打开，是能直接看见<h3>aaaa</h3><div>abc</div>这些带尖括号的源码的。但如果没有包含<xmp>，我们知道，它们会被解析渲染成aaa abc，当然，带了浏览器默认样式。

<xmp>
 <h3>aaaa</h3>
<div>abc</div>
</xmp>

但在HTML5遗弃了这个标签，取而代之的是<pre></pre> <code></code>，但这两个玩意儿本质只是保留空白符（code标签还有默认字体样式），实际要配合尖括号的转码使用。也就是说，< > 要分别使用 < >代替。

<pre>
 &lt;h3&gt; aaaa&lt;/h3&gt;
&lt;div&gt;abc&lt;/div&gt;
</pre>

老实讲，要手动转码这个过程就不是很实用了啊。
无奈，英文渣，也不知道全面那个问答里面有没有人给出了什么好的建议啊

2 想办法啊

其实也没啥好办法了啊。只能乖乖做转码呗。
能手动写在html里面还好说，但作为web服务的前端，很多人的数据都是后端给吧。
作为夹心又弱势的前端，再往前就是被UI蹂躏，往后就是被后端抛弃啊。后端给数据的时候不给转码咋整嘛。

好吧，只能自己用正则转码下了。
代码如下：

var  data = '<h3>aaaa</h3><div>abc</div>';
var rel = data.replace(/[<>]/ig, function(m,p,o){
  if(m === '<') return '&lt;';
  if(m === '>') return '&gt';
});

转是转了，就是如果data里面数据量大的话，这性能也是。。。。。

3 还有没有其他办法啊！

其实如果有append操作，可以试一下以下两种方式啊：

• jQuery可以考虑ele.text(data)这种文本赋值；
• 原生JavaScript可以考虑createTextNode(data)创建文本节点。

嗯！因为都指定了文本，data不知道咋地，就乖乖的真的是文本了，不会幺蛾子的被解析渲染了。

-------------------------------------并不是很华丽的分割线-----------------------------------

许久没有登录了，突然收到了腾讯云+社区的邀请，其实感觉自己的技术文写得又少又不深，没啥脸面被邀请啊。但既然邀请了，厚着脸皮就试试看了。
一下这个内容，是申请时候需要放置的一个链接在最新一片文章，用来验证是我本人在申请咯。
嗯，好的。出发~

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=wetsia134e5i