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

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

JavaScriptのlastIndexプロパティとは

JavaScriptのlastIndexプロパティは、正規表現によるマッチが発生したインデックス位置（文字位置）を返すプロパティです。このプロパティを利用すると、次回のマッチ検索はその位置から再開されます。

重要なポイントとして、lastIndexプロパティが機能するのは、正規表現に「g」（グローバル）フラグが設定されている場合のみです。「g」フラグがない場合、lastIndexは常に0のまま変化しません。

lastIndexプロパティの主な特徴

  • マッチが見つかった位置の次のインデックスを記録します
  • test()メソッドやexec()メソッドと組み合わせて使用されます
  • 「g」フラグが設定された正規表現オブジェクトでのみ値が更新されます
  • 連続して呼び出すことで、文字列内のすべてのマッチ位置を順番に取得できます

lastIndexプロパティの実装例

以下は、JavaScriptのlastIndexプロパティを使用して、文字列内の「ing」というパターンのマッチ位置を順番に取得するサンプルコードです。

<!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>

コードの解説

このコードでは、以下のような処理が行われています。

  1. new RegExp("ing", "g")で、「g」フラグ付きの正規表現オブジェクトを作成します。
  2. 最初にregex.test()を実行することで、最初のマッチ（「king」内の「ing」）が検出され、lastIndexにその終了位置が記録されます。
  3. ボタンをクリックすると、現在のlastIndexの値を表示し、再度test()を呼び出して次のマッチ（「ring」内の「ing」）を検索します。
  4. これにより、マッチが見つかるたびにlastIndexが更新され、次の検索開始位置として利用されます。

実行結果

ページを開くと、サンプル文字列「The king bought an expensive ring.」とボタンが表示されます。

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

「CLICK HERE」ボタンをクリックすると、以下のように「ing」が見つかったインデックス位置が順番に表示されます。

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

まとめ

lastIndexプロパティは、正規表現のマッチ位置を管理するための重要なプロパティです。「g」フラグと組み合わせることで、文字列内の複数のマッチを順番に処理できるようになります。ループ処理と組み合わせれば、すべてのマッチ位置を効率的に取得することも可能です。正規表現を活用した文字列処理を行う際は、ぜひlastIndexプロパティの動きを理解しておきましょう。

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

    lastIndexプロパティとは JavaScriptにおける「lastIndex」プロパティは、正規表現オブジェクトが持つプロパティの一つで、直前のマッチが終了した位置（インデックス）を返します。そして、次回の検索はその位置から再開されるという仕組みになっています。 重要な注意点として、lastIndexプロパティは「g」（グローバル）フラグが設定されている場合にのみ機能します。「g」フラグがない状態では、lastIndexは常に0のまま変化しないため、連続した検索を行うことができません。 以下は、JavaScriptでlastIndexプロパティを使用する際のコード例です。 サンプルコード

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

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