關於換行符,網上有許多說法,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實現。