JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

JavaScriptで文字列を検索する方法

JavaScriptで文字列の中から特定の文字列を探すには、search()メソッドを使用します。このメソッドは、引数に渡した文字列（または正規表現）が対象の文字列内で最初に一致した位置（インデックス）を返し、見つからなかった場合は -1 を返します。

以下は、JavaScriptで文字列を検索するサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
   body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   }
   .result {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>Searching a string in JavaScript</h1>
<div class="sample">The spring season is about to come.</div>
<div style="color: green;" class="result"></div>
<button class="btn">CLICK HERE</button>
<h3>
Click on the above button to find the string 'spring' in the above string
</h3>
<script>
   let btnEle = document.querySelector(".btn");
   let sampleEle = document.querySelector(".sample").innerHTML;
   let resEle = document.querySelector(".result");
   btnEle.addEventListener("click", () => {
      resEle.innerHTML = "The string spring is found at position " + sampleEle.search("spring");
   });
</script>
</body>
</html>

出力結果

上記のコードを実行すると、ブラウザには次のような画面が表示されます。

JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

続いて、ページ上の「CLICK HERE」ボタンをクリックしてみましょう。

JavaScriptで文字列を検索する方法【search()メソッドの使い方を解説】

ボタンをクリックすると、「spring」という文字列が見つかった位置が緑色のテキストで表示されます。この例では、対象の文字列「The spring season is about to come.」の中で「spring」は先頭から4文字目に位置しているため、インデックス番号「4」が返されます。

ポイントまとめ

  • search()メソッドは、文字列内での一致位置（インデックス）を数値で返す
  • 該当する文字列が存在しない場合は -1 を返す
  • 引数に正規表現を指定することも可能で、柔軟なパターン検索に対応
  • 用途によっては、indexOf() や includes() といった類似メソッドも活用できる
  1. JavaScript配列で要素を検索する方法を徹底解説！find()メソッドの使い方

    JavaScriptで配列の中から特定の要素を検索したい場面は非常に多くあります。本記事では、最もよく使われるfind()メソッドを中心に、実際に動作するサンプルコードとともに分かりやすく解説します。 find()メソッドとは find()メソッドは、配列の各要素に対して指定したテスト関数（コールバック関数）を実行し、条件を満たした最初の要素の値を返します。条件に一致する要素が存在しない場合は undefined を返します。 基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback: 各要素をテストする関数

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum