怎么在页面中显示html代码怎么写,如何在html页面显示html标签源码

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

1 引言

标签是什么？

它是能真正显示html源码的一个包含标签。

比如下面源码，放在html页面中浏览器打开，是能直接看见

aaaa

abc

这些带尖括号的源码的。但如果没有包含，我们知道，它们会被解析渲染成aaa abc，当然，带了浏览器默认样式。

aaaa

abc

但在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 === '

if(m === '>') return '&gt';

});

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

3 还有没有其他办法啊！

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

jQuery可以考虑ele.text(data)这种文本赋值；

原生JavaScript可以考虑createTextNode(data)创建文本节点。

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

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

许久没有登录了，突然收到了腾讯云+社区的邀请，其实感觉自己的技术文写得又少又不深，没啥脸面被邀请啊。但既然邀请了，厚着脸皮就试试看了。

一下这个内容，是申请时候需要放置的一个链接在最新一片文章，用来验证是我本人在申请咯。

嗯，好的。出发~