正規表現なし！JavaScript で特定の文字が含まれているかチェックする方法【indexOf,lastIndexOf,includes,charAt,startsWith,endsWith】

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

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

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

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

「フォームはプラグインか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サイトやメディアサイトで絞り込み、検索機能に使用することができますね。

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」と複数形になっていることに注意しましょう。

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

文字があるか無いかという切り口ではなく「指定された文字が存在するインデックス番号を返す」というアプローチも利用できます。

例えばindexOfというメソッドは引数に指定した文字が文章内に最初に登場するインデックス番号を返します。

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

const a4 = myString.indexOf("a");
console.log(a4); // 「1」と出力される

逆に引数に指定した文字が文章内に存在しないときは「-1」を返すという特徴を持っています。

マイナスのインデックス番号は存在しないためです。

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

const a4 = myString.indexOf("ｗ");
console.log(a4); // 「-1」と出力される

そのため以下のようにindexOfの返す値を条件分岐にして、特定の文字が文章内に含まれているかどうかを確認することに利用できるのです。

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

const a4 = myString.indexOf("ｗ");

if(a4 == -1){
  console.log("ｗがありません")
}else{
  console.log("ｗがあります")
}

if(a4 < 0){
  console.log("ｗがありません")
}else{
  console.log("ｗがあります")
}

ちなみにindexOfは引数に指定した文字が文章内に複数存在するときには早い方の番号を返します。

同じようなメソッドでlastIndexOfというメソッドがあり、こちらは引数に指定した文字が文章内に存在するときには遅い方の番号を返します。

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

const a4 = myString.indexOf("a"); // 1を返す
const a5 = myString.lastIndexOf("a"); // 3を返す

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

このようなインデックス番号を使った文字検索のメソッドは他にもあり、charAtというメソッドも利用できる場合があります。

charAtというメソッドは引数に渡したインデックス番号に概要する文字を文章内から抜き出してくれます。

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

const a5 = myString.charAt(0);
console.log(a5); // 「J」と出力される

検索したい文字が事前に文章内のどの位置に来るかがわかっている場合にはcharAtが利用できますね。

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

const a5 = myString.charAt(0);

if(a5 == "J"){
  console.log("JavaScriptに関する文章です。")
}else{
  console.log("JavaScriptではありません。")
}

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

またインデックス番号を使ったアプローチもシチュエーションによっては有効です。

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

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

また今回参考にした本はこちらになります。

良ければどうぞ。