JavaScriptで部分一致を使いこなす5つの方法

はじめに
●部分一致の基本
●部分一致の使い方
●部分一致の応用例
- ○サンプルコード4：検索フォームのオートコンプリート機能
- ○サンプルコード5：ハイライト表示
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptで部分一致を使いこなすことができるようになります。

部分一致とは、ある文字列が別の文字列の一部に含まれているかどうかを調べる方法です。

JavaScriptで部分一致を使いこなすことで、検索機能やオートコンプリート機能などを実装する際に役立ちます。

この記事では、部分一致の基本や使い方、応用例をサンプルコード付きで解説し、注意点やカスタマイズ方法も紹介します。

どんなことが解決できるか明確にすることで、JavaScript初心者でも安心して読み進めることができます。

●部分一致の基本

部分一致とは、ある文字列が別の文字列の一部に含まれているかどうかを調べる方法です。

JavaScriptでは、主に文字列の検索や配列内の要素検索などで部分一致が使われます。

部分一致を実現するためには、文字列のメソッドや正規表現が用いられます。

●部分一致の使い方

部分一致を実現する方法はいくつかありますが、ここでは代表的な3つの方法を紹介します。

○サンプルコード1：文字列の検索

このコードでは、indexOfメソッドを使って文字列の部分一致検索を行っています。

この例では、mainStrにsearchStrが含まれているかを調べています。

const mainStr = "こんにちは、世界！";
const searchStr = "んにちは";

if (mainStr.indexOf(searchStr) !== -1) {
  console.log("部分一致が見つかりました。");
} else {
  console.log("部分一致が見つかりませんでした。");
}

○サンプルコード2：配列内の部分一致検索

このコードでは、Array.prototype.filter()とindexOfメソッドを使って、配列内の要素を部分一致検索しています。

この例では、words配列内にsearchStrが含まれている要素を検索しています。

const words = ["apple", "banana", "cherry", "grape"];
const searchStr = "ap";

const result = words.filter(word => word.indexOf(searchStr) !== -1);
console.log(result); // ["apple", "grape"]

○サンプルコード3：正規表現を使った部分一致検索

このコードでは、正規表現を使って部分一致検索を行っています。

この例では、mainStrにsearchStrが含まれているかを調べています。

const mainStr = "こんにちは、世界！";
const searchStr = "んにちは";
const regex = new RegExp(searchStr);

if (regex.test(mainStr)) {
  console.log("部分一致が見つかりました。");
} else {
  console.log("部分一致が見つかりませんでした。");
}

●部分一致の応用例

部分一致は、検索機能やオートコンプリート機能など様々な場面で使われます。

ここでは2つの応用例を紹介します。

○サンプルコード4：検索フォームのオートコンプリート機能

このコードでは、inputイベントリスナーと部分一致検索を使って、検索フォームのオートコンプリート機能を実装しています。

この例では、ユーザーが入力したテキストに基づいて、候補リストを表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オートコンプリート機能の実装</title>
  <style>
    #suggestions {
      display: none;
      list-style-type: none;
      padding: 0;
      margin: 0;
      border: 1px solid #ccc;
      background-color: #fff;
    }
    #suggestions li {
      padding: 4px 8px;
      cursor: pointer;
    }
    #suggestions li:hover {
      background-color: #eee;
    }
  </style>
</head>
<body>
  <input type="text" id="search" placeholder="検索...">
  <ul id="suggestions"></ul>

  <script>
    const data = ["apple", "banana", "cherry", "grape", "orange", "pineapple", "strawberry"];
    const search = document.getElementById("search");
    const suggestions = document.getElementById("suggestions");

    search.addEventListener("input", () => {
      const searchText = search.value;
      if (searchText === "") {
        suggestions.style.display = "none";
        return;
      }

      const filteredData = data.filter(item => item.indexOf(searchText) !== -1);
      suggestions.innerHTML = "";

      filteredData.forEach(item => {
        const li = document.createElement("li");
        li.textContent = item;
        suggestions.appendChild(li);
      });

      suggestions.style.display = "block";
    });
  </script>
</body>
</html>

○サンプルコード5：ハイライト表示

このコードでは、正規表現を使って部分一致検索を行い、検索に一致した部分をハイライト表示する方法を紹介しています。

この例では、content内のsearchTextに一致する部分をハイライト表示しています。

const content = "部分一致検索は、文字列や配列内の要素を検索する際に非常に便利です。";
const searchText = "検索";

const regex = new RegExp(`(${searchText})`, "gi");
const highlightedContent = content.replace(regex, "<mark>$1</mark>");

console.log(highlightedContent);
// "部分一致<mark>検索</mark>は、文字列や配列内の要素を<mark>検索</mark>する際に非常に便利です。"

●注意点と対処法

部分一致検索を行う際の注意点として、大文字と小文字の違いによって一致しない場合があります。

この問題を解決するためには、検索対象と検索文字列の両方を小文字または大文字に変換してから比較することが効果的です。

下記のサンプルコードでは、toLowerCase()メソッドを使って文字列を小文字に変換し、部分一致検索を行っています。

const content = "JavaScriptは、大文字と小文字が区別されます。";
const searchText = "小文字";

const lowerContent = content.toLowerCase();
const lowerSearchText = searchText.toLowerCase();

if (lowerContent.indexOf(lowerSearchText) !== -1) {
  console.log("部分一致が見つかりました。");
} else {
  console.log("部分一致が見つかりませんでした。");
}