說一說「換行」踩的坑

前言

最近遇到這樣一個需求：
須要在頁面中顯示一段第三方文本信息。這些文本徹底由第三方本身定義，咱們負責顯示在頁面便可，第三方要求這些文本須要換行顯示便可。

咱們都知道在 HTML 中，用</br>標籤能夠實現換行，轉義字符\n也能夠實現換行。雖然效果同樣，可是這兩種換行的方式使用起來卻不一樣。

1.使用</br>換行

這種方式使用起來比較簡單，用 jQuery.html( )方法便可。
示例：

var content = '您肯定要刪除</br>這行代碼嗎？';
$('body').html(content);

結果以下：

可是不少時候這種方法用起來比較危險。好比你須要在頁面中顯示一段第三方文本信息，因爲文原本自第三方，頗有可能被插入了惡意的script 腳本，若是用 html( )方法來顯示這些文本，那頗有可能被攻擊。固然還有一個更加理所固然可是稍微費事的方法，那就是利用正則匹配將全部\n替換爲</br>，將全部其餘 HTML 特殊字符（如<、>、&等)替換爲轉義字符串（也稱字符實體(Character Entity)），這時候就能夠用 $.html( )方法解決了！固然更好的方法應該是經過解析純文本的方法如 text( )來顯示這些文本。

2.使用\n換行

這種方式用起來比較坑，因此本文章的重點就是這一部分。
由於以前知道 alert 彈框中要實現換行，只能經過\n的方式，而不能經過</br>的方式。

(1) alert 彈框使用</br>換行結果

示例：

var content = '您肯定要刪除</br>這行代碼嗎？';
alert(content);

結果爲：

能夠看到，經過</br>的方式並無法實現換行。

(2) alert 彈框使用\n換行結果

示例：

var content = '您肯定要刪除\n這行代碼嗎？';
alert(content);

結果爲：

(3) .innerHTML/ html( )方法中使用\n換行結果

對於大多數HTML元素，不論是原生的 innerHTML屬性仍是 jQuery的 html( )方法都不能實現換行。但也有例外，好比下文介紹的textarea,pre元素。
示例：

var content = '您肯定要刪除\n這行代碼嗎？';
//$('body').html(content);
document.getElementsByTagName('body')[0].innerHTML=content;

結果以下：

發現了嗎，原本的換行符變成了空格！
我想緣由應該是這樣的：在字符串中的\n其實和你在字符串中輸入 enter 鍵換行的效果是同樣的，在 HTML 裏多於一個空格都按照一個空格顯示，因此本來的換行符就變成了一個空格。但其實這個換行符依然在 HTML 中，此時你用 console.log($('body').html( ))查看，你會看到控制檯打印出來的字符串是有空行效果的。

(4) innerText/ text( )方法中使用\n換行結果

奇怪的事情發生了，用 jQuery 的 text( )方法沒法換行（對於大多數元素結果是如此，但也有例外，好比下文介紹的textarea,pre元素。），但使用原生的 innerText 屬性竟然就能實現換行了！
示例1：

var content = '您肯定要刪除\n這行代碼嗎？';
$('body').text(content);

結果以下：

示例2：

var content = '您肯定要刪除\n這行代碼嗎？';
document.getElementsByTagName('body')[0].innerText=content;

結果以下：

頓時以爲好開心，終於找到一個經過\n來實現換行的方法了！
但是忽然就開心不起來了，由於 firefox 不支持 innerText 屬性，它有另一個對應的屬性 textContent，那它是否支持經過\n來換行呢？
示例3：

var content = '您肯定要刪除\n這行代碼嗎？';
document.getElementsByTagName('body')[0].textContent=content;

結果以下：

和示例1同樣的結果，仍是不能實現換行。。。。
因此經過 innerText 這種方式只能支持除 firefox 外的瀏覽器，並非完美的解決方案。

(5) 利用 pre 元素使用\n換行結果

咱們知道pre標籤是一個特殊的標籤，標籤中文本的全部空格和換行符都會被保留。在pre元素上使用 html( )/innerHTML/text( )/innerText等方式，發現都是能夠實現換行的。

示例1：

<!--此方法不能實現換行-->
<pre>您肯定要刪除\n這行代碼嗎？</pre>

<!--此方法能夠實現換行-->
<pre>您肯定要刪除
這行代碼嗎？</pre>

示例2：

var content = '您肯定要刪除\n這行代碼嗎？';

//如下方法都是能夠實現換行的
document.getElementsByTagName('pre')[0].innerHTML=content;
document.getElementsByTagName('pre')[0].innerText=content;
$('pre').html(content);
$('pre').text(content);

(6)利用 textarea 元素使用\n換行結果

報着試一試的態度，我嘗試了下經過設置 textarea 元素的 value 屬性來實現換行，發現竟然真實現了！因而我還嘗試在textarea 元素上使用 html( )/innerHTML/text( )/innerText等方式，發現都是能夠實現的！！
示例：

var content = '您肯定要刪除\n這行代碼嗎？';
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屬性就解決啦~~

結語

看來在使用\n方式實現換行時，是否能用html()/innerHTML/text()/innerText，取決於在哪一個 HTML 元素上使用這些方法。對於那些會保留純文本中原有空格、換行符的 HTML 元素如<pre>、<textarea>等，使用這4個方法都能實現換行。