正規表現なし！JavaScript で文字が含まれているかチェックする3選

フォームの作成でチェック機能は必須とも言えますよね。

一番メジャーなチェック機能が「特定の文字が含まれているか？」でしょう。

メールアドレス、パスワードなどで使われるからです。

コーディングのやり方を調べると「正規表現」にたどり着くことが多いのですが、駆け出しエンジニアやデザイナーの方には少し敬遠されるかと思います。

「フォームはプラグインかGoogleフォームしか使ったことがない」
「ちょっとしたチェック機能くらいは知っておきたい」
「正規表現を勉強したけど何が何だか分からず挫折した」

本日はそんな方に向けた内容になります。

JavaScriptに限らず「配列の中に〇〇があるか？」「文章に”あ”が含まれるか？」のような、検索機能を作ることは多くあります。

考え方さえ理解してしまえば言語やシュチュエーションが違っても自力でキャッチアップできるようになるはずなので一度は練習しておきましょう。

動画もありますので良ければどうぞ。

JavaScript で特定の文字が含まれているか確認する方法①

まずはとにかく特定の文字の有無を調べる方法です。

const myString = "JavaScriptで文字を検索する";

const a1 = myString.includes("検索");
console.log(a1);　// trueと出力される

「includes」という関数がJavaScript にあって、文字通り「含まれているか」を検索してくれます。

含まれている場合はtrue、含まれていない場合はfalseを返します。

これは場所に関わらずマッチしているかを探すだけなので最初はこれから覚えると良いかもしれません。

テキストだけでなく配列の中の要素を探すときにもincludesは使用できます。

const arr = ["Web制作", "Webマーケ", "動画編集"];
let result = arr.includes("Web制作");
console.log(result); // trueと出力される

配列の場合は「何番目に〇〇があるか？」という使い方もできて便利です。

const arr = ["Web制作", "Webマーケ", "動画編集"];
// ここを修正
let result = arr.includes("Web制作", 1);
console.log(result); // falseと出力される

includesの第二引数にはインデックス番号を指定できて、先ほどの「Web制作があるか？」ではなく「インデックス番号の1番がWeb制作か？」という意味合いになります。

同じように見えますが使い方が違いますよね。

配列の場合はAPIなどで「0番目に〇〇があれば△△と判断する」といった感じの使い方がよくあります。

ちなみに文字列にしても配列にしてもincludesは完全一致を判定するので「一部の文字が合う」とかは無いです。

ECサイトやメディアサイトで絞り込み、検索機能に使用することができますね。

「特定の文字から始まるか？」という場合もあるかと思います。

事前に細かいルールを決めていて「含まれているか？」だけでなく、「〇〇から始まる」という少し厳しめなチェックは以下のように行います。

const myString = "JavaScriptで文字を検索する";

const a2 = myString.startsWith("JavaScript");
console.log(a2); // 「true」と出力される

「startsWith」という関数を使います。

間違えやすいのですが「starts」という複数形になっています。

さらに言うと「特定の文字で終わるか？」という場合も考えられますね。

こちらもJavaScriptですでに用意された関数があります。

const myString = "JavaScriptで文字を検索する";

const a3 = myString.endsWith("検索する");
console.log(a3); // 「false」と出力される

「endsWith」という関数で「〇〇で終わるか？」を調べてくれます。

こちらも「ends」と複数形になっていることに注意しましょう。

以上のように「含まれているか？」「〇〇から始まるか？」「〇〇で終わるか？」の3つを覚えておくだけで結構なパターンはカバーできます。

そこから派生して複雑なチェックになってから正規表現の出番でしょう。

ちなみに自分は正規表現しか使ったことなくて、「最初に知っておけば良かった」と思っていますｗ