這是一篇不正經(jīng)實(shí)現(xiàn)方案報(bào)道。

1 引言

先來(lái)看個(gè)問(wèn)答：
stackoverflow: Why was the xmp HTML tag deprecated? [duplicate]
這個(gè)問(wèn)題感覺(jué)問(wèn)得好?。簽槭裁?code><xmp>標(biāo)簽被遺棄了?。?/p>

<xmp>標(biāo)簽是什么？
它是能真正顯示html源碼的一個(gè)包含標(biāo)簽。

比如下面源碼，放在html頁(yè)面中瀏覽器打開(kāi)，是能直接看見(jiàn)<h3>aaaa</h3><div>abc</div>這些帶尖括號(hào)的源碼的。但如果沒(méi)有包含<xmp>，我們知道，它們會(huì)被解析渲染成aaa abc，當(dāng)然，帶了瀏覽器默認(rèn)樣式。

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

但在HTML5遺棄了這個(gè)標(biāo)簽，取而代之的是<pre></pre> <code></code>，但這兩個(gè)玩意兒本質(zhì)只是保留空白符（code標(biāo)簽還有默認(rèn)字體樣式），實(shí)際要配合尖括號(hào)的轉(zhuǎn)碼使用。也就是說(shuō)，< > 要分別使用 < >代替。

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

老實(shí)講，要手動(dòng)轉(zhuǎn)碼這個(gè)過(guò)程就不是很實(shí)用了啊。
無(wú)奈，英文渣，也不知道全面那個(gè)問(wèn)答里面有沒(méi)有人給出了什么好的建議啊

2 想辦法啊

其實(shí)也沒(méi)啥好辦法了啊。只能乖乖做轉(zhuǎn)碼唄。
能手動(dòng)寫(xiě)在html里面還好說(shuō)，但作為web服務(wù)的前端，很多人的數(shù)據(jù)都是后端給吧。
作為夾心又弱勢(shì)的前端，再往前就是被UI蹂躪，往后就是被后端拋棄啊。后端給數(shù)據(jù)的時(shí)候不給轉(zhuǎn)碼咋整嘛。

好吧，只能自己用正則轉(zhuǎn)碼下了。
代碼如下：

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';
});

轉(zhuǎn)是轉(zhuǎn)了，就是如果data里面數(shù)據(jù)量大的話，這性能也是。。。。。

3 還有沒(méi)有其他辦法??！

其實(shí)如果有append操作，可以試一下以下兩種方式?。?/p>

• jQuery可以考慮ele.text(data)這種文本賦值；
• 原生JavaScript可以考慮createTextNode(data)創(chuàng)建文本節(jié)點(diǎn)。

嗯！因?yàn)槎贾付宋谋荆琩ata不知道咋地，就乖乖的真的是文本了，不會(huì)幺蛾子的被解析渲染了。

-------------------------------------并不是很華麗的分割線-----------------------------------

許久沒(méi)有登錄了，突然收到了騰訊云+社區(qū)的邀請(qǐng)，其實(shí)感覺(jué)自己的技術(shù)文寫(xiě)得又少又不深，沒(méi)啥臉面被邀請(qǐng)啊。但既然邀請(qǐng)了，厚著臉皮就試試看了。
一下這個(gè)內(nèi)容，是申請(qǐng)時(shí)候需要放置的一個(gè)鏈接在最新一片文章，用來(lái)驗(yàn)證是我本人在申請(qǐng)咯。
嗯，好的。出發(fā)~

我的博客即將同步至騰訊云+社區(qū)，邀請(qǐng)大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=wetsia134e5i