前置き
今回は正規表現!
【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にアンダースコアを入れることは
ダメではないけどハイフン がオススメです🍒
ハイフン(-)を使用することをおすすめします。
✅では、動作チェック
今回は以前のGoogleFormを活用します。
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_71f669f00640c841c187b1b942733ed0.png?resize=904%2C346)
この状態で…
まずは誤ったURL。
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_0aa59f97d45c6d3662abc312226d5f19.png?resize=684%2C366)
よしよし。
今度は正しいURLで。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_a2691f9cdbb6377cd45973dceada516e.png?resize=684%2C316)
送信!
![](https://i2.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_527d9016520f7c32791567a84c826c49.png?resize=718%2C270)
できましたね😄
メールアドレス
^\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
✅ 動作チェック!
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_9da7637517e994f3b9659cb1aab602a5.png?resize=890%2C378)
まずは誤ったメールアドレス。
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_7cd30dae3a95235a18f6cb9ff72a39c1.png?resize=704%2C352)
よしよし。
今度は正しい方で。
![](https://i0.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_31daa559f5cf7c1182d4870d76fcd7c2.png?resize=718%2C320)
送信!
![](https://i1.wp.com/nuxt.alizlab.com/wp-content/uploads/2020/06/picture_pc_527d9016520f7c32791567a84c826c49-1.png?resize=718%2C270)
いけました〜😄🎉