使用split根據回車分行

2021-09-01 21:39:29 字數 1549 閱讀 8080

我們經常會拿到乙個多行的文字,需要在前端展示。

但是html不能識別回車,有的時候需要用split來切分段落,然後將切分後的結果形成陣列。那麼怎麼切分呢?

[b]下面是一段js**[/b]

var text = ... ;

var res = text.split(/\n/);

這是一段簡單的**,並且的確可以解決問題。但當我們考慮複雜一點兒的情況時,這段就還有改進的餘地。

這裡「複雜一點兒的情況」主要指作業系統的差別。

(1)在微軟的ms-dos和windows中,使用「回車cr('\r')」和「換行lf('\n')」兩個字元作為換行符;

(2)windows系統裡面,每行結尾是 回車+換行(cr+lf),即「\r\n」;

(3)unix系統裡,每行結尾只有 換行cr,即「\n」;

(4)mac系統裡,每行結尾是 回車cr 即'\r'。

[b]改進1[/b]

所以我們要改進上面的正規表示式,可以改為:

var r = /[\n\r]/;

// \n:換行

// \r:回車

上面的**會解決所有系統下的問題,但會帶來乙個windows下切分文字的bug。對於如下的文字:

var text = 'abc\r\ncde';

會被切分成三行,實際上,我們只希望得到兩行。

[b]於是有了改進2[/b]

var r = /[\n\r]+/;

這個切分開起來比較完美了,但是它忽略了空行。對於如下的文字:

var text = "abc\r\n\r\nddd";

我們會得到兩行,而不是想象中的三行。對於大部分顯示,這是可以接受的,但我們還希望得到更好的。

[b]改進3[/b]

var r = /\r\n|\n\r|[\n\r]/;

這裡有幾點需要注意:

[list]

[*]由於js的正則引擎是nfa的,所以會優先匹配第乙個分支,因此當存在分支時,「長」的分支要在前面,否則「短」分支會先被匹配。即,不能寫成/[\r\n]|\r\n/;

[*]由於回溯的存在,使用[\r\n]的效率高於分支,所以後乙個寫成[\r\n],而不是\r|\n;

[*]規則/\n\r/可以去掉,從而使之精簡。

[/list]

所以以上可以寫成:

var r = /\r\n|[\r\n]/;

[b]補充[/b]

對於不用考慮首末空格的可以考慮使用\s+,效率也較高。

根據URL用split擷取頁碼

split 方法用於把乙個字串分割成字串陣列。注意 split 方法不改變原始字串。string.split separator,limit 引數描述 separator 可選。字串或正規表示式,從該引數指定的地方分割 string object。limit 可選。該引數可指定返回的陣列的最大長度。...

使用標籤分行顯示文字

怎麼可以讓每一句詩詞後面加入乙個折行呢?那就可以用到 標籤了,在需要加回車換行的地方加入 標籤作用相當於word文件中的回車。上節的 改為 語法 xhtml1.0寫法 html4.01寫法 大家注意,現在一般使用 xhtml1.0 的版本的寫法 其它標籤也是 這種版本比較規範。與以前我們學過的標籤不...

使用標籤分行顯示文字

對於上一小節的例子,我們想讓那首詩顯示得更美觀些,如顯示下面效果 怎麼可以讓每一句詩詞後面加入乙個折行呢?那就可以用到 標籤了,在需要加回車換行的地方加入 標籤作用相當於word文件中的回車。上節的 改為 語法 xhtml1.0寫法 html4.01寫法 大家注意,現在一般使用 xhtml1.0 的...