文法

【Nuxt.js】正規表現基礎編①:よく使う表現を単語分割で解説!

前置き

今回は正規表現!
【Nuxt.js】Form実践編:GoogleFormと独自フォーム連携
ここのバリデーションの設定で使いました🌟
もちろんコードに反映させることも可能です。
正規表現の意味は様々なページで乗ってるので
ここでは実際に使われる表現で
簡単なものから理解しやすいよう解説します。


基本

まずはメタ文字の種類の把握!
ここが参考になります!
まずは一文を理解するのではなく、
単語を分割し、簡単に理解しましょう♪
https://userweb.mnet.ne.jp/nakama/


インターネットURL

^(http|https)://([\w-]+\.)+[\w-]+(/[\w-./?%&=#]*)?$

◾️^(http|https)://
noteのURLで該当箇所を太字にします。
https://
note.com/
文頭がhttpまたはhttpsから始まる
://はそのままの文字として認識
【メタ文字】
 ・^ 文頭
 ・| いずれか(or)

これは^https?でも置き換えができます。
【メタ文字】
 ・? 直前がないか、1つだけある

◾️([\w-]+\.)+
https://note.com/
単語構成文字を含めた
どれか1文字を1回以上繰り返し
後ろにドット含めて1まとまりとして扱う
それを1回以上繰り返す
note.note.note.でもOKということですね。
【メタ文字】
 ・( ) この中を1まとまりとして扱う
 ・[ ] どれか1文字(or)
 ・\w 単語構成文字、全ての半角英数字
 ・- 不明。。。
    検索しましたが不明のままでした。
    コメントいただけると嬉しいです🍀🙇‍♀️
 ・+ 1回以上(繰り返し)
 ・\. \~で~をメタ文字として扱わない
    .をただのひとつの文字で扱う

◾️[\w-]+
https://note.com/
上と同じです。
半角英数字のどれか1文字を繰り返し。

◾️(/[\w-./?%&=#]*)?$
https://note.com/
2つに分けて考えます。

★(/[どれか1文字]*)
 /以降のいずれか1文字がないか、
 1回以上繰り返し。
 単語構成文字(\w)
 各記号(-./?%&=#)のいずれか1文字。
 [ ]内にも/があるため
 /[ いずれかの文字 / いずれかの文字]はOK!
  https://note.com/でもいいし
  https://note.com/notes/n12345でもいい
 【メタ文字】
   ・* 直前の文字がないか、
      1回以上繰り返し

★( )?$
 ( )このまとまりが
 全くないか1つだけあり、それが文末にくる
  https://note.comでもいい
  https://note.com/でもいいし
  https://note.com/notes/n12345でもいい
 【メタ文字】
  ・? 全くないか1つだけあるか
  ・$ 文末にする

ちなみにURLにアンダースコアを入れることは
ダメではないけどハイフン がオススメです🍒

URL にはアンダースコア(_)ではなく
ハイフン(-)を使用することをおすすめします。

✅では、動作チェック
今回は以前のGoogleFormを活用します。

この状態で…
まずは誤ったURL。

よしよし。
今度は正しいURLで。

送信!

できましたね😄


メールアドレス

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

◾️^\w+
メールアドレスの該当箇所を太字にします。
note
.nuxt@alizlab.com
文頭が半角英数字の繰り返し
(文頭が記号はNG)
【メタ文字】 
・^ 文頭
・\w 単語構成文字、全ての半角英数字

◾️([-+.]\w+)*
note.nuxt@alizlab.com
-か.の後ろに必ず英数字を置くが、
そのまとまりはなくてもいいし繰り返しても良い
-aaa.aaaはOK
--aaa...aaaはOK
-.aaaはNG
【メタ文字】
 ・[ ] どれか1文字(or)
 ・+ 直前の文字が1回は必ず使われ、
  繰り返しもできる
 ・* 直前の文字がないか、1回以上繰り返し

◾️@\w+([-.]\w+)*
note.nuxt@alizlab.com
@の後ろに必ず半角英数字
-か.いずれかと必ず半角英数字のまとまりは
なくてもいいし繰り返しても良い
@alizlab.alizlabはOK
@alizlab-alizlabはOK
@.はNG
@-はNG
@alizlab.はNG
@alizlab-はNG

◾️\.\w+([-.]\w+)*$
note.nuxt@alizlab.com
.という文字から始まりその後ろに必ず半角英数字
-か.いずれかと必ず半角英数字のまとまりが
なくてもいいし、繰り返しても良い
note.nuxt@comはNG

✅ 動作チェック!

まずは誤ったメールアドレス。

よしよし。
今度は正しい方で。

送信!

いけました〜😄🎉

-文法
-, ,

© 2020 aLiz Nuxt