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