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

JavaScriptのlastIndexプロパティとは？正規表現のマッチ位置を取得する方法

lastIndexプロパティとは

JavaScriptにおける「lastIndex」プロパティは、正規表現オブジェクトが持つプロパティの一つで、直前のマッチが終了した位置（インデックス）を返します。そして、次回の検索はその位置から再開されるという仕組みになっています。

重要な注意点として、lastIndexプロパティは「g」（グローバル）フラグが設定されている場合にのみ機能します。「g」フラグがない状態では、lastIndexは常に0のまま変化しないため、連続した検索を行うことができません。

以下は、JavaScriptでlastIndexプロパティを使用する際のコード例です。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<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;
    }
    .sample,
    .result {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript lastIndex Property</h1>
<div class="sample">The king bought an expensive ring.</div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、文字列内の「ing」のインデックス位置を確認できます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let resultEle = document.querySelector(".result");
    let regex = new RegExp("ing", "g");
    regex.test(sampleEle.innerHTML);
    document.querySelector(".Btn").addEventListener("click", () => {
        resultEle.innerHTML += '"ing" found Current Index = ' + regex.lastIndex + "<br>";
        regex.test(sampleEle.innerHTML);
        resultEle.innerHTML += '"ing" found Current Index = ' + regex.lastIndex;
    });
</script>
</body>
</html>

実行結果

JavaScriptのlastIndexプロパティとは？正規表現のマッチ位置を取得する方法

上記のコードを実行すると、サンプル文字列「The king bought an expensive ring.」に対して「ing」というパターンで検索が行われます。

「CLICK HERE」ボタンをクリックすると −

JavaScriptのlastIndexプロパティとは？正規表現のマッチ位置を取得する方法

コードの解説

このサンプルでは、new RegExp("ing", "g")によって「g」フラグ付きの正規表現オブジェクトを作成しています。最初のtest()メソッドの呼び出しで「king」の中の「ing」がマッチし、lastIndexにはその終了位置が記録されます。

ボタンをクリックするたびにregex.lastIndexの値を表示し、再度test()メソッドを呼び出すことで、前回のマッチ位置の続きから次の検索が実行されます。このように、「ing」は文字列内に2箇所（「king」と「ring」）存在するため、クリックのたびに異なるインデックス位置が順番に表示されていきます。

まとめ

  • lastIndexプロパティは、直前のマッチ終了位置のインデックスを保持する
  • 次回の検索はlastIndexの位置から再開される
  • 「g」フラグが設定されている場合のみ機能する
  • test()やexec()メソッドと組み合わせて、文字列内のすべてのマッチを順に取得できる

  1. JavaScriptのsourceプロパティとは？正規表現パターンテキストを取得する方法を解説

    JavaScriptのsourceプロパティは、RegExp（正規表現）オブジェクトに設定されたパターン文字列そのものを返すプロパティです。g（グローバルマッチ）やi（大文字・小文字を区別しない）などのフラグは結果に含まれず、マッチング対象となる純粋な正規表現テキストのみを取得できます。 動的に正規表現を組み立てたい場合や、デバッグ時に実際に適用されているパターンを確認したい場合などに活用できる便利なプロパティです。 基本構文 const regex = /pattern/flags; console.log(regex.source); // パターン文字列のみが返される サンプルコード

  2. JavaScriptのlastIndexプロパティの使い方を解説！正規表現のマッチ位置を取得する方法

    JavaScriptのlastIndexプロパティとは JavaScriptのlastIndexプロパティは、正規表現によるマッチが発生したインデックス位置（文字位置）を返すプロパティです。このプロパティを利用すると、次回のマッチ検索はその位置から再開されます。 重要なポイントとして、lastIndexプロパティが機能するのは、正規表現に「g」（グローバル）フラグが設定されている場合のみです。「g」フラグがない場合、lastIndexは常に0のまま変化しません。 lastIndexプロパティの主な特徴 マッチが見つかった位置の次のインデックスを記録します test()メソッドやexec()メ