Javascript 你也許不知道的split小技巧! split with regex!

前言

split一直是js中一個相當常見且實用的方法，藉由將字串依照自己指定的方式轉為陣列，可以讓我們做出很多操作，在許多時候會配合join方法使用，字串反轉就是個相當好的例子

const txt = 'Hello world'
const reversedTxt = txt.split('').reverse().join('')
console.log(reversedTxt) // dlrow olleH

不過其實split可以搭配正規表達式使用，讓它的用途更加彈性，馬上往下看今天的主題~!

Split with regex

其實說起來並沒有什麼特別的，我們都知道正規表達式可以適用在許多字串的情境，split只是其中一種，來看一個簡單的例子了解要如何配合regex使用split吧!

你當然可以分數次處理這堆資料，不過這時候只要簡單的一行就可以完美搞定了:D

const rawData = ['2020/04/14', '2020-04-14', '2020.04.14']
const result = rawData.map(date => date.split(/[/\.-]/).join(''))
console.log(result) // ["20200414", "20200414", "20200414"]

在上方短短的程式碼中，我們利用正規表達式匹配了所有的 . 、 / 以及 -，這邊特別注意一下-在正規表達式中有表達範圍的意思(A-Z表示A到Z的所有大寫字母)，若只是想單純匹配-符號，記得放在最後面~!
能成功匹配後剩下的就是只要字串中有以上的條件，我們就進行切割，最終達成我們希望的結果! 算是一個挺方便的小技巧，我們再來看看另一個使用情境吧，這是我當時在刷codewars時的應用!

實戰練習-Simple string characters

題目要求你要回傳一個陣列，其中包含該字串中的大寫數量、小寫數量、數字數量以及特殊符號的數量。
藉由以上的方法，我們知道可以透過正則的匹配去排除掉我們不需要的元素，且排除的數量為回傳陣列的長度 – 1，看一下簡單的例子。

'Danny-Wang-is-a-boy'.split('-') // ["Danny", "Wang", "is", "a", "boy"]
// 其中包含了4個減號，也就是陣列長度 - 1的結果

了解到這一點之後，我們只要分別處理大寫、小寫、數字與特殊符號的正規表達式就可以輕鬆完成題目要求!

Simple string characters: solution

function solve(str) {
   return [/[A-Z]/, /[a-z]/, /\d/, /[\W]/].map(rgx => str.split(rgx).length - 1)
}

solve("*'&ABCDabcde12345") // [4, 5, 5, 3]

結語

上方的解法當時看到時真的覺得相當有意思，雖然說可讀性較差，但你不得不承認這相當的clever 😀
方法當然不止這一種，只是想藉由這個題目帶出split配合regex的另一種應用情境!
善用這些基本的方法可以讓你免去許多麻煩~! 希望這篇文章讓你有所收穫，我們下次再見囉!