• JavaScript

【簡単】JavaScriptを使って任意の文字列が配列内にあるか検索する方法【indexOfメソッド】

JavaScriptを使って任意の文字列を配列から検索、一致した文字列が入ってるか探りたい。

本記事ではJavaScriptのindexOfメソッドを使って簡単な文字列検索フォームを作り、このような悩みを解決します。

実装サンプル

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

配列から文字列を検索する簡単なフォームサンプルです。

配列には以下スポーツ名が宣言されてます。

var sports = ["野球", "バドミントン", "バスケットボール"];

検索ボックスに任意のスポーツ名を入れます。

スポーツ名が上記配列内にあれば【配列に含まれてます。】を出力。

無かったら【配列に含まれてません。】を出力するようになってます。

実装方法は次章より説明します。

配列から文字列を検索するJavaScriptコード例

     // 配列
  var sports = ["野球", "バドミントン", "バスケットボール"];
    // 検索ボタンID
  var btn = document.getElementById("btn");
    // 出力テキストID
  var txt = document.getElementById("txt");
    // 検索ボタンをクリックしたら
  btn.addEventListener("click", function () {
    // テキストボックスID
    var input = document.getElementById("input");
    // テキストボックスの値を取得
    var val = input.value;
    // テキストボックスに入力された文字列が配列内にあったら
    if (sports.indexOf(val) !== -1) {
      txt.textContent = "配列に含まれてます。";
    } else {
      txt.textContent = "配列に含まれてません。";
    }
  });

前章の実装サンプルで使ってた配列から文字列を検索するフォームのJavaScriptコードです。

検索フォームなのでaddEventListener()関数等を使い、検索ボタンをクリックしたらinputテキストボックス内の値を取得するコードを書いてます。

文字列が一致してるかの確認にはindexOfメソッドを用います。

配列内に任意の文字列があるかの確認には以下のようにindexOfメソッドとif文を用いて記述します。

  if (配列.indexOf(任意の文字列) !== -1) {
    console.log("任意の文字列が含まれてる");
  } else {
    console.log("任意の文字列が含まれてない");
  }

indexOfメソッドは検索する対象が含まれてなかったら、返り値として-1を返すのでそれを利用し、配列内に含まれてる・含まれてないを判定してます。

以上の流れで実装できます。