"sb1126", "twitter"=>"pcwu7", "instagram"=>"pcwu7", "github"=>"pcwu", "medium"=>"pcwu"}" />

pcwu's TIL Notes


[JS] 使用 Regex 來 Split

今天在用 React 做東西時,剛好有一個需求,希望能將 text 的每一個字拆成一個一個 React Component (主要是希望在點擊各個單字時,可以每個單字有自己個別的 onClick)

所以要將 text 依「非字母」作為分隔字元切開存進陣列,所以分隔字元長這樣: (不能使用\w因為會包含數字)

/[^A-Za-z]/

我希望保留文章原始樣貌,所以要用 () 來保留這些分隔字元:

/([^A-Za-z])/

最後因為中間會出現我用不到的 '' 所以使用 fliter 去掉,最後變成這樣:

const text = 'Test 123.\nThis is Huston speaking.';
text.split(/([^A-Za-z])/).filter(text => text)

使用的結果:

[ 'Test',
  ' ',
  '1',
  '2',
  '3',
  '.',
  '\n',
  'This',
  ' ',
  'is',
  ' ',
  'Huston',
  ' ',
  'speaking',
  '.' ]

試試看能不能拼回原樣:

const text = 'Test 123.\nThis is Huston speaking';
text.split(/([^A-Za-z])/).filter(text => text).join('')

沒錯就是我要的:

'Test 123.\nThis is Huston speaking.'

又是一個很容易用了就忘的東西,於是筆記起來!

Reference