換行符在textarea、div、pre中的區別


關於換行符,網上有許多說法,IE早期的瀏覽器是\r\n,有的瀏覽器是\r,但很難找到確切的版本號。經過本人正則匹配測試,chrome、firefox、safari、IE11都是\n,

因此保險起見,若對換行符進行正則匹配,應當同時匹配\n, \r以及\r\n.

值得一提的是\n、\r和\r\n都有換一行的效果,有些同學寫換行時常寫作\n\r,這就相當於換了兩行,因此必須注意!

換行符用於textarea

textarea內的換行便是以換行符的形式實現,換行符也能用於textarea

 

換行符用於一般div

當我們嘗試將\n用於一般div

eg: document.querySelector(".a").innerHTML= "12\n1";

顯示:

未顯示換行,這是因為在默認情況下空白會被忽略,所以無論是文本里的空白、換行都會被當做一個空格處理

若想顯示空白,需添加屬性white-space: pre; 保留換行和空白 或者pre-line 保留換行,忽略空白

增添white-space: pre;顯示:

這時候獲取innerHTML,輸出: 12 1, 

/\n/.test(document.querySelector(".a").innerHTML) // true,

 

換行符用於可編輯div

eg: document.querySelector(".a").innerHTML= "1        2\n1";

顯示:

通過審查元素,可以發現可編輯div自帶white-space: pre;屬性!因此文本空白和換行符都對它有效

而可編輯div內直接進行換行操作,換行又是如何實現的?

進行換行:

再輸出innerHTML

1 2 1 <div>11</div><div>111</div>

因此: 對於可編輯div,換行符有效,但它本身的換行是通過div來實現的,這不同於textarea!

 

一般pre

對於一般pre,文本空格與換行符都有效,也自帶white-space: pre;屬性。

 

可編輯pre

類似於可編輯div,換行符有效,本身的換行通過增添div實現。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM