最近遇到這樣一個需求：
需要在頁面中顯示一段第三方文本信息。這些文本完全由第三方自己定義，我們負(fù)責(zé)顯示在頁面即可，第三方要求這些文本需要換行顯示即可。
我們都知道在 HTML 中，用</br>標(biāo)簽可以實(shí)現(xiàn)換行，轉(zhuǎn)義字符\n也可以實(shí)現(xiàn)換行。雖然效果一樣，但是這兩種換行的方式使用起來卻不同。
</br>換行這種方式使用起來比較簡單，用 jQuery.html( )方法即可。
示例：
var content = '您確定要刪除</br>這行代碼嗎？';$('body').html(content);結(jié)果如下：
但是很多時(shí)候這種方法用起來比較危險(xiǎn)。比如你需要在頁面中顯示一段第三方文本信息，由于文本來自第三方，很有可能被插入了惡意的script 腳本，如果用 html( )方法來顯示這些文本，那很有可能被攻擊。當(dāng)然還有一個更加理所當(dāng)然但是稍微費(fèi)事的方法，那就是利用正則匹配將所有\n替換為</br>，將所有其他 HTML 特殊字符（如<、>、&等)替換為轉(zhuǎn)義字符串（也稱字符實(shí)體(Character Entity)），這時(shí)候就可以用 $.html( )方法解決了！當(dāng)然更好的方法應(yīng)該是通過解析純文本的方法如 text( )來顯示這些文本。
\n換行這種方式用起來比較坑，所以本文章的重點(diǎn)就是這一部分。
因?yàn)橹爸?alert 彈框中要實(shí)現(xiàn)換行，只能通過\n的方式，而不能通過</br>的方式。
</br>換行結(jié)果示例：
var content = '您確定要刪除</br>這行代碼嗎？';alert(content);結(jié)果為：
可以看到，通過</br>的方式并沒法實(shí)現(xiàn)換行。
\n換行結(jié)果示例：
var content = '您確定要刪除\n這行代碼嗎？';alert(content);結(jié)果為：
\n換行結(jié)果對于大多數(shù)HTML元素，不管是原生的 innerHTML屬性還是 jQuery的 html( )方法都不能實(shí)現(xiàn)換行。但也有例外，比如下文介紹的textarea,pre元素。
示例：
var content = '您確定要刪除\n這行代碼嗎？';//$('body').html(content);document.getElementsByTagName('body')[0].innerHTML=content;結(jié)果如下：
發(fā)現(xiàn)了嗎，本來的換行符變成了空格！
我想原因應(yīng)該是這樣的：在字符串中的\n其實(shí)和你在字符串中輸入 enter 鍵換行的效果是一樣的，在 HTML 里多于一個空格都按照一個空格顯示，所以原本的換行符就變成了一個空格。但其實(shí)這個換行符依然在 HTML 中，此時(shí)你用 console.log($('body').html( ))查看，你會看到控制臺打印出來的字符串是有空行效果的。
\n換行結(jié)果奇怪的事情發(fā)生了，用 jQuery 的 text( )方法無法換行（對于大多數(shù)元素結(jié)果是如此，但也有例外，比如下文介紹的textarea,pre元素。），但使用原生的 innerText 屬性居然就能實(shí)現(xiàn)換行了！
示例1：
var content = '您確定要刪除\n這行代碼嗎？';$('body').text(content);結(jié)果如下：
示例2：
var content = '您確定要刪除\n這行代碼嗎？';document.getElementsByTagName('body')[0].innerText=content;結(jié)果如下：
頓時(shí)覺得好開心，終于找到一個通過\n來實(shí)現(xiàn)換行的方法了！
可是突然就開心不起來了，因?yàn)?firefox 不支持 innerText 屬性，它有另外一個對應(yīng)的屬性 textContent，那它是否支持通過\n來換行呢？
示例3：
var content = '您確定要刪除\n這行代碼嗎？';document.getElementsByTagName('body')[0].textContent=content;結(jié)果如下：
和示例1一樣的結(jié)果，還是不能實(shí)現(xiàn)換行。。。。
所以通過 innerText 這種方式只能支持除 firefox 外的瀏覽器，并不是完美的解決方案。
pre 元素使用\n換行結(jié)果我們知道pre標(biāo)簽是一個特殊的標(biāo)簽，標(biāo)簽中文本的所有空格和換行符都會被保留。在pre元素上使用 html( )/innerHTML/text( )/innerText等方式，發(fā)現(xiàn)都是可以實(shí)現(xiàn)換行的。
示例1：
<!--此方法不能實(shí)現(xiàn)換行--><pre>您確定要刪除\n這行代碼嗎？</pre><!--此方法可以實(shí)現(xiàn)換行--><pre>您確定要刪除這行代碼嗎？</pre>示例2：
var content = '您確定要刪除\n這行代碼嗎？';//以下方法都是可以實(shí)現(xiàn)換行的document.getElementsByTagName('pre')[0].innerHTML=content;document.getElementsByTagName('pre')[0].innerText=content;$('pre').html(content);$('pre').text(content);textarea 元素使用\n換行結(jié)果報(bào)著試一試的態(tài)度，我嘗試了下通過設(shè)置 textarea 元素的 value 屬性來實(shí)現(xiàn)換行，發(fā)現(xiàn)居然真實(shí)現(xiàn)了！于是我還嘗試在textarea 元素上使用 html( )/innerHTML/text( )/innerText等方式，發(fā)現(xiàn)都是可以實(shí)現(xiàn)的?。?br>示例：
var content = '您確定要刪除\n這行代碼嗎？';document.getElementsByTagName('textarea')[0].value=content;//可以實(shí)現(xiàn)document.getElementsByTagName('textarea')[0].innerHTML=content;document.getElementsByTagName('textarea')[0].innerText=content;$('textarea').html(content);$('textarea').text(content);$('textarea').val(content);結(jié)果如下：
回到開頭說的那個需求，因?yàn)榫W(wǎng)頁中只需要展示第三方文本信息，所以可以使用一個 textarea 來代替原本的 div之類的進(jìn)行展示。那么問題來了，我們希望的是僅展示，并不能被編輯，textarea 元素默認(rèn)是可以被編輯的，怎么破呢？這個簡單，給 textarea 元素加上 readonly屬性就解決啦~~
看來在使用\n方式實(shí)現(xiàn)換行時(shí)，是否能用html()/innerHTML/text()/innerText，取決于在哪個 HTML 元素上使用這些方法。對于那些會保留純文本中原有空格、換行符的 HTML 元素如<pre>、<textarea>等，使用這4個方法都能實(shí)現(xiàn)換行。
