17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【JavaScript】文字列の配列で正規表現にマッチするものだけを取り出す方法

Last updated at Posted at 2017-08-01

JavaScript の this を理解する多分一番分かりやすい説明という記事を読んで、bindメソッド (Function.prototype.bind1)をビルトイン関数やビルトインメソッドと組み合わせて面白そうな例を作れないか考えてみたところ、RegExp.prototype.test2Array.prototype.filter3と組み合わせ、文字列の配列で正規表現にマッチするものだけを取り出す例を思いついたので紹介します。

(2017/08/15追記)
"bindメソッドは要らなかった" を追記しました

サンプル

文字列の配列から郵便番号の書式に合うものだけを取り出します

['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test.bind(/^[0-9]{3}-[0-9]{4}$/))

実行結果は以下の通りです

Node.js
> ['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test.bind(/^[0-9]{3}-[0-9]{4}$/))
[ '213-3123', '213-4212' ]

RegExp.prototype.test/./.testでも呼び出せるので、もう少しシンプルに書くこともできます

['123-413','213-3123','213-4212','4333-4343'].filter(/./.test.bind(/^[0-9]{3}-[0-9]{4}$/))

bindメソッドでRegExp.prototype.testthis/^[0-9]{3}-[0-9]{4}$/に強制しているので、/./testメソッドを呼び出すためだけにある正規表現リテラルということになります。
当初はArray.prototype.slice[].sliceで呼び出せるように、//.testでも大丈夫だろうと思っていましたが、これはコメントアウトになってしまうので/./.testのように何か1文字はスラッシュの間に必要となるようです。

実行結果は以下の通りです

Node.js
> ['123-413','213-3123','213-4212','4333-4343'].filter(/./.test.bind(/^[0-9]{3}-[0-9]{4}$/))
[ '213-3123', '213-4212' ]

ECMAScript 6以上の仕様は使っていないので、Internet Explorer 11でも動作しました。
ブラウザ上のURLバーに直接打ち込むと、実行できます。

javascript:alert(['123-413','213-3123','213-4212','4333-4343'].filter(/./.test.bind(/^[0-9]{3}-[0-9]{4}$/)).join());

実行結果は以下の通りです

ie11_filter_regexp.png

bindメソッドは要らなかった

Array.prototype.filter3の第2引数(省略可能)で、第1引数で指定されたコールバック関数のthisを束縛できるようです。
よって、bindメソッドを使わずに標題のことを実現できました。

['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test,/^[0-9]{3}-[0-9]{4}$/)

bindメソッドを使うよりもシンプルに書け、可読性もこちらの方が良いかと思います。

実行結果は以下の通りです

Node.js
> ['123-413','213-3123','213-4212','4333-4343'].filter(RegExp.prototype.test,/^[0-9]{3}-[0-9]{4}$/)
[ '213-3123', '213-4212' ]

参考文献

  1. Function.prototype.bind() - JavaScript | MDN

  2. RegExp.prototype.test() - JavaScript | MDN

  3. Array.prototype.filter() - JavaScript | MDN 2

17
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?