前置き
今回は正規表現！
【Nuxt.js】Form実践編：GoogleFormと独自フォーム連携
https://note.com/aliz/n/n9c6deafe0633
ここのバリデーションの設定で使いました🌟
もちろんコードに反映させることも可能です。
正規表現の意味は様々なページで乗ってるので
ここでは実際に使われる表現で
簡単なものから理解しやすいよう解説します。
基本
まずはメタ文字の種類の把握！
ここが参考になります！
まずは一文を理解するのではなく、
単語を分割し、簡単に理解しましょう♪
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
✅動作チェック！
まずは誤ったメールアドレス。
よしよし。
今度は正しい方で。
送信！
いけました〜😄🎉
このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab