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

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

1 引言

先来看个问答：
stackoverflow: Why was the xmp HTML tag deprecated? [duplicate]
这个问题感觉问得好啊：为什么

</code>标签被遗弃了啊？</p> <p><code><xmp></code>标签是什么？<br> 它是能真正显示html源码的一个包含标签。</p> <p>比如下面源码，放在html页面中浏览器打开，是能直接看见<code><h3>aaaa</h3><div>abc</div></code>这些带尖括号的源码的。但如果没有包含<code><xmp></code>，我们知道，它们会被解析渲染成<code>aaa abc</code>，当然，带了浏览器默认样式。</p> <pre><code><xmp> <h3>aaaa</h3> <div>abc</div>

但在HTML5遗弃了这个标签，取而代之的是

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

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

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

2 想办法啊

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

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

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

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

3 还有没有其他办法啊！

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

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

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

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

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

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