はじめに

Next.js + rails アプリでフロント側にパスワードのバリデーションを実装しようと思い、
どうやってやるのかなーと調べていました。
使える正規表現自体は見つかったのですが、表現の内容を理解するためにMDNのページを行ったり来たりして大変だったので
今回使った特殊文字をまとめておきます。
プラスちょっとだけ構造を説明します。

想定している読者

初心者
Javascriptでパスワードのバリデーションを実装したい方
見つけた正規表現を理解せずコピペで使うのは嫌な方

今回使う正規表現

/^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/

数字とアルファベットを最低1文字ずつ含む
6文字以上20文字以下

の文字列にマッチします。

こちらの記事を参考にしました。
言語別：パスワード向けの正規表現

3つに分けたほうが理解しやすいと思ったので、分けて書きます。

Part1

/^(?=.*[a-zA-Z])(?=.*\d)/

特殊表現	意味
^	文頭にマッチ
(?=hoge)	直前の表現にhogeが続く場合のみマッチするようになる
.	任意の1文字にマッチ
*	直前の表現の0回以上の繰り返し
[a-zA-Z]	大/小文字アルファベット1文字にマッチ
\d	アラビア数字1文字にマッチ

Part1は文頭^に対して2つの(?=hoge)がかかっています。
ここでは

「任意の文字の0回以上の繰り返し+何かしらのアルファベット1文字」が後ろに続き(?=.*[a-zA-Z])、
かつ
「任意の文字の0回以上の繰り返し+何かしらの数字1文字」が後ろに続く(?=.*\d)
「文頭」にマッチします。
つまり数字とアルファベットを含む文の文頭にマッチします。

Part2

/.{6,20}/

特殊表現	意味
.	任意の1文字にマッチ
{x,y}	直前の表現のx回以上y回以下の繰り返し

Part2は
任意の文字の6回以上20回以下の繰り返し
にマッチします。
つまり6文字以上20文字以下の文字列にマッチします。

Part3

/$/

特殊表現	意味
$	入力の末尾にマッチ

Part3は入力の末尾にマッチします。それだけです。

まとめて

/^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/
//最初と一緒です

「数字とアルファベットを含む文の文頭」+「6文字以上20文字以下の文字列」+「入力末尾」
つまり
数字とアルファベットを含む6文字以上20文字以下の文字列にマッチする正規表現ができました!