換行符在textarea div pre中的區別

2022-05-01 10:15:10 字數 1205 閱讀 9986

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

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

一般pre

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

可編輯pre

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

Linux換行符和Windows換行符的區別與轉換

windows為乙個回車 r cr或 m 和乙個換行 n nl或lf 括號內是其它顯示方法 linux為乙個換行 n mac為乙個回車 r 檢視檔案是否含有windows換行符 windows notepad 檢視 顯示所有符號 linux file test.txt test.txt ascii ...

在Visual Studio,匹配換行符以及空白符

s s r n 忽略換行匹配 是單行 s s r n 多行 因為在visual studio,你若需要匹配換行符以及空白符,需要配合 s s 以及 而 s s是什麼意思呢?大寫的 s是匹配任何非空白字元。小寫的 s是匹配任何空白字元,其中包括空格,製表符和換頁符。而 是將匹配字串錨定到行首或字串首。...

換行符問題

今天,我總算搞清楚 回車 carriage return 和 換行 line feed 這兩個概念的來歷和區別了。在計算機還沒有出現之前,有一種叫做電傳打字機 teletype model 33 的玩意,每秒鐘可以打10個字元。但是它有乙個問題,就是打完一行換行的時候,要用去0.2秒,正好可以打兩個...