文字列の先頭 ^ と末尾 $

キャレット '^' とドル '$' 文字は正規表現で特別な意味を持っており、“アンカー” と呼ばれます。

キャレット ^ はテキストの先頭にマッチし、ドル $ は – 末尾にマッチします。

例えば、テキストが Mary から始まっているかをテストしてみましょう:

let str1 = "Mary had a little lamb, it's fleece was white as snow";
let str2 = 'Everywhere Mary went, the lamp was sure to go';

alert( /^Mary/.test(str1) ); // true
alert( /^Mary/.test(str2) ); // false

パターン ^Mary は、“文字列が Mary で開始する” を意味します。

次は、テキストがメールアドレスで終わっているかをテストしましょう。

メールアドレスにマッチするには、正規表現 [-.\w]+@([\w-]+\.)+[\w-]{2,20} を使います。これは完全ではありませんが、多くの場合は問題ありません。

文字列がメールアドレスで終わっているかどうかをテストするために、$ をパターンに追加しましょう。:

let reg = /[-.\w]+@([\w-]+\.)+[\w-]{2,20}$/g;

let str1 = 'My email is mail@site.com';
let str2 = 'Everywhere Mary went, the lamp was sure to go';

alert( reg.test(str1) ); // true
alert( reg.test(str2) ); // false

文字列が正確にパターンに従っているかをチェックするのに、両方のアンカーを一緒に使うことも可能です。それはバリデーションでよく使われます。

例えば、str が正確に色(# と 6桁の16進数の形式)であることを確認したいとします。その色のパターンは #[0-9a-f]{6} です。

文字列全体 が正確にマッチするかをチェックするには、^...$ を追加します。:

let str = "#abcdef";

alert( /^#[0-9a-f]{6}$/i.test(str) ); // true

正規表現のエンジンはテキストの開始を探し、次に色、その後すぐにテキストが終わるかを見ます。まさに私たちが必要なものです。

アンカーの長さはゼロです

\b のようなアンカーはテストです。それらの幅はゼロです。

つまり、それらは文字にマッチするのではなく、正規表現エンジンに条件チェック(テキストの開始/終了)を強制させるものです。

アンカーの振る舞いはフラグ m (複数行モード) の有無で変わります。それらについては次のチャプターで見ていきましょう。

タスク

パターン ^$ にはどの文字列がマッチするでしょう?

空文字列だけがマッチします: 開始後すぐに終了するため。

このタスクはアンカーが文字ではなくテスト(評価)であることを改めて実証します。

文字列は空 "" です。エンジンは最初に ^ (入力の開始) にマッチし、すぐに終わり $ です。そのためマッチします。

ネットワークインターフェースの MAC アドレス はコロンで区切られた6つの2桁の16進数で構成されています。

例: '01:32:54:67:89:AB'.

文字列が MAC アドレスかどうかをチェックする正規表現を書いてください。

使用方法:

let reg = /your regexp/;

alert( reg.test('01:32:54:67:89:AB') ); // true

alert( reg.test('0132546789AB') ); // false (コロンなし)

alert( reg.test('01:32:54:67:89') ); // false (5 個, 6 個である必要があります)

alert( reg.test('01:32:54:67:89:ZZ') ) // false (末尾が ZZ)

2桁の16進数は [0-9a-f]{2} (i フラグが有効である想定)です。

数値 NN, そして続いて :NN が5回繰り返される必要があります。:

正規表現は: [0-9a-f]{2}(:[0-9a-f]{2}){5} です。

次に、マッチはテキスト全体を捉える必要があります。: 先頭から始まり、末尾で終わりです。これは ^...$ でパターンをラップすることで実現できます。

最終的に:

let reg = /^[0-9a-fA-F]{2}(:[0-9a-fA-F]{2}){5}$/i;

alert( reg.test('01:32:54:67:89:AB') ); // true

alert( reg.test('0132546789AB') ); // false (コロンなし)

alert( reg.test('01:32:54:67:89') ); // false (5 個, 6 個である必要があります)

alert( reg.test('01:32:54:67:89:ZZ') ) // false (末尾が ZZ)
チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。