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