フォームの作成でチェック機能は必須とも言えますよね。
一番メジャーなチェック機能が「特定の文字が含まれているか?」でしょう。
メールアドレス、パスワードなどで使われるからです。
コーディングのやり方を調べると「正規表現」にたどり着くことが多いのですが、駆け出しエンジニアやデザイナーの方には少し敬遠されるかと思います。
「フォームはプラグインかGoogleフォームしか使ったことがない」
「ちょっとしたチェック機能くらいは知っておきたい」
「正規表現を勉強したけど何が何だか分からず挫折した」
本日はそんな方に向けた内容になります。
動画もありますので良ければどうぞ。
JavaScript で特定の文字が含まれているか確認する方法①
まずはとにかく特定の文字の有無を調べる方法です。
const myString = "JavaScriptで文字を検索する";
const a1 = myString.includes("検索");
console.log(a1); // trueと出力される
「includes」という関数がJavaScript にあって、文字通り「含まれているか」を検索してくれます。
含まれている場合はtrue、含まれていない場合はfalseを返します。
これは場所に関わらずマッチしているかを探すだけなので最初はこれから覚えると良いかもしれません。
JavaScript で特定の文字が含まれているか確認する方法②
「特定の文字から始まるか?」という場合もあるかと思います。
事前に細かいルールを決めていて「含まれているか?」だけでなく、「〇〇から始まる」という少し厳しめなチェックは以下のように行います。
const myString = "JavaScriptで文字を検索する";
const a2 = myString.startsWith("JavaScript");
console.log(a2); // 「true」と出力される
「startsWith」という関数を使います。
間違えやすいのですが「starts」という複数形になっています。
JavaScript で特定の文字が含まれているか確認する方法③
さらに言うと「特定の文字で終わるか?」という場合も考えられますね。
こちらもJavaScriptですでに用意された関数があります。
const myString = "JavaScriptで文字を検索する";
const a3 = myString.endsWith("検索する");
console.log(a3); // 「false」と出力される
「endsWith」という関数で「〇〇で終わるか?」を調べてくれます。
こちらも「ends」と複数形になっていることに注意しましょう。
以上のように「含まれているか?」「〇〇から始まるか?」「〇〇で終わるか?」の3つを覚えておくだけで結構なパターンはカバーできます。
そこから派生して複雑なチェックになってから正規表現の出番でしょう。
ちなみに自分は正規表現しか使ったことなくて、「最初に知っておけば良かった」と思っていますw