【JavaScript】正規表現でのsplit()とmatch()の違いについて

Question

概要

checkioの「First Words」の問題を解いていて気になったことがあったので質問させていただきます。

問題）文字列から先頭の単語を返す

ただし…
・文字列がピリオドやコンマを含むかもしれない
・アポストロフィーは単語の一部として捉える
・文字列がピリオドやスペースで始まる場合もある

例）
"Hello world"　-> Hello
" a word " -> a
"... and so on ..." -> and　　　　　　　

split()を使う

お決まりのsplitで文字列を区切ってその先頭の単語を返そう！と思い、早速下記の通りに書いてみました。
しかし、"... and so on ..." の場合に期待した値が返って来ません。

function firstWord(text) {
    // your code here
    var split_str = text.split(/[\s|,|.]/);
    return split_str[0];
}
console.log(firstWord("Hello,World")); //Hello
console.log(firstWord("Hello World")); //Hello
console.log(firstWord("don't touch it")); //don't
console.log(firstWord("... and so on ...")); // （何も表示されず…）

match()を使う

しかし、match()を使うと期待通りの値が返ってきました！

function firstWord(text) {
    // your code here
    var split_str = text.match(/[a-zA-Z0-9']+/g);
    return split_str[0];
}
console.log(firstWord("Hello,World")); //Hello
console.log(firstWord("Hello World")); //Hello
console.log(firstWord("don't touch it")); //don't
console.log(firstWord("... and so on ...")); //and

疑問点

ここで一つ疑問なのですが、ピリオドや空文字はエスケープする必要があるメタ文字という認識でいるので
split()を使うやり方でバックスラッシュを用いて指定したはずですが、
どうしてエスケープされてなかったのでしょうか？
よろしければ、split()を使ってこの問題を解くならどうしたらよいか教えてくださると幸いです。

###参考にしたサイト
文字列の分割(split)について：https://programmercollege.jp/column/7649/
JavaScriptで文字列を検索する方法(match)：https://uxmilk.jp/23757

Comments

[miyabi_pudding]

[a-zA-Z0-9']の正規表現が何を示しているのかを調べれば、自ずと答えがみつかるような気がしますが・・・。
そこに関しては調査されましたか？
splitで使ってる正規表現と明らかに違う正規表現なのに、使ってる関数が違うってだけの認識はちょっと甘いかと思います・・・。

[itzuakniami123]

それぞれの関数についての基本について調査はしており、[a-zA-Z0-9']は小文字・大文字含む英数字とアポストロフィーという認識でいます。
match()は「検索対象の文字列.match(正規表現の検索したい文字列)」なので、[a-zA-Z0-9']と表記すべきだと考えました。
個人的にはやり方は違えど考え方は一緒だと思ってやったことが、異なる結果になって返ってしまったので疑問に思いこちらに質問した次第です。

[otn]

/[\s|,|\.]/ は、/[\s,.]/ ですね。縦棒書くと縦棒まで含んじゃう。

[itzuakniami123]

「|」は条件の「または」に該当すると思い
空文字「または」カンマ「または」ピリオドのいずれかを区切り文字とする
という意味で上記のコード（/[\s|,|\.]/）になったのですが、/[\s,.]/でもよかったんですね…！

[miyabi_pudding]

itzuakniami123さん >
大変失礼しました。なるほどです。
本質問は、私も大変に勉強になりました。
ありがとうございます。

[itzuakniami123]

miyabi_takatsuk 様＞
いえいえ、とんでもないです！
まだまだJavaScript勉強中の身なので…
どうしてそうなってしまったかの原因は、ベストアンサーの方の解答で理解することができました。
またこちらで質問させていただくことがあると思うので、お気軽にコメントいただければ幸いです！

Answer 1

var text="... and so on ...";
var result = text.split(/[\s|,|.]/).filter(x=>x!=="")[0];
console.log(result);

Comments

[yambejp]

実際のヒットさせたい文字より前に「.」や空白文字があると
splitでどんどん分割されちゃうので、[0]で拾っても空っぽです
（実際にはもっと後ろの方に収納されている）

[itzuakniami123]

コメントありがとうございます！
コードも空で返ってきてしまう原因の解説も分かりやすく、大変助かりました。
こちらをベストアンサーとさせていただき、クローズとさせていただきます。

Answer 2

split()を使うやり方でバックスラッシュを用いて指定したはずですが、

指定したから区切り文字として認識されています。1文字目に区切り文字の.が来るので、1つ目は空文字列が結果となります。

（なお、文字クラスの中では、.もエスケープ不要です）

Comments

[itzuakniami123]

コメントありがとうございます！
空文字は「\s」で指定しているので、空で返ってくることはないと思ったんですよね…

[maisumakun]

それは無関係です（そもそも、空文字列は\sにも一致しません）。splitは、区切り文字列が連続していた場合には、区切った結果としてから文字列を返してきます。

Answer 3

別解。

function firstWord(text) {
    var split_str = (" "+text).split(/[\s,.]+/);
    return split_str[1];
}

Comments

[itzuakniami123]

コメント・別解のソースコードありがとうございます！