JSで文字列の分割

JavaScript の文字列分割です。
.splitメソッドを使いますが、便利な反面、ハマりどころもあるので少し詳しく紹介します。

通常の文字による分割

カンマ区切りのデータ(改行なし)を単純に分割したいとき。
splitメソッドの引数に分割したい文字(文字列も OK)を渡します。

const str = 'a,b,c,d'  
const arr = str.split(',')  

console.log(arr)  
// [ 'a', 'b', 'c', 'd' ]  

うむ。基本の「き」。

正規表現による分割

業務でよく使うやつです。
正規表現を使えるとプログラミングの幅がグンと拡がりますね。
今回は空白文字(\s)と全角スペース(0x3000)文字の両方で分割したいと思います。

対象文字列「'a b 全 角'」にはちょっとした罠を仕掛けてあります。
実はaとbの間は半角スペース 2 個です。
期待する結果は[ 'a', 'b', '全', '角' ]です。

NG:空白文字と全角スペースをパイプでつなぐ

単純に考えるとコレでいけるんじゃないでしょうか？

//aとbの間は半角スペース2個、「全」と「角」の間が全角スペース  
const str = 'a  b 全　角'  
const arr = str.split(/\s|\u3000/)  

console.log(arr)  
// [ 'a', '', 'b', '全', '角' ]  

おや、aとbの間に空文字が分割されましたね。
おしい。

NG:対象文字をカッコで囲んで、連続する空白文字に対応

対象文字を、(と)でくくり、+で繰り返し表現に対応してみます。

const str = 'a  b 全　角'  
const arr = str.split(/(\s|\u3000)+/)  

console.log(arr)  
// [ 'a', ' ', 'b', ' ', '全', '　', '角' ]  

さっきより悪くなってる。

なんで？

じつは、正規表現内でカッコを書いてしまうと、キャプチャ対象文字列として一緒に出力されてしまいます。
?:でキャプチャ対象外であることを記載すると、期待通りの文字列になります。

OK: (?: ~ )でキャプチャ対象外にする

const str = 'a  b 全　角'  
const arr = str.split(/(?:\s|\u3000)+/)  

console.log(arr)  
// [ 'a', 'b', '全', '角' ]  

OK:文字クラス利用でもっとかっこよく

今回のケースで言うと、区切りの対象文字は空白文字、または全角文字の 1 文字(とその組み合わせの繰り返し)です。
この場合は[と]でくくり、文字クラスとして表現することでわかりやすく簡潔に書くことができます。
全角・半角織り交ぜた意地悪な文字列を分割してみましょう。

const str = 'a  b 全　　角 　全　 　角'  
const arr = str.split(/[\s\u3000]+/)  

console.log(arr)  
// [ 'a', 'b', '全', '角', '全', '角' ]  

期待通りに分割されました！