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

JavaScriptで正規表現をテスト・実行する方法｜test()とexec()の使い方

JavaScriptでは、RegExpオブジェクトを使って正規表現を扱います。パターンが文字列にマッチするかどうかを確認するには test() メソッドを、実際にマッチした結果を取得するには exec() メソッドを使用します。この記事では、両者の違いと具体的な使い方をサンプルコード付きで解説します。

test()メソッドとexec()メソッドの違い

  • test()メソッド： 正規表現パターンが文字列にマッチすれば true、マッチしなければ false を返すシンプルな真偽判定用メソッドです。
  • exec()メソッド： マッチした場合、マッチした部分文字列などを含む結果の配列を返します。マッチしなかった場合は null を返します。

サンプルコード

以下は、正規表現のテスト（test）と実行（exec）を行うHTML＋JavaScriptのコード例です。

<!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;
   }
   .result,.sample {
      font-size: 20px;
      font-weight: 500;
   }
</style>
</head>
<body>
<h1>正規表現のテストと実行</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="Btn">クリック</button>
<h3>
上のボタンをクリックすると、正規表現のテストと実行が行われます
</h3>
<script>
   let sampleEle=document.querySelector('.sample');
   let resEle = document.querySelector('.result');
   let str = 'Hello world. This is a beautiful world';
   sampleEle.innerHTML =str;
   let pattern = new RegExp("world");
   document.querySelector(".Btn").addEventListener("click", () => {
      resEle.innerHTML += 'pattern.test(str) = ' + pattern.test(str) + '<br>';
      resEle.innerHTML += 'pattern.exec(str) = ' + pattern.exec(str) + '<br>';
   });
</script>
</body>
</html>

コードの解説

  1. 対象となる文字列 'Hello world. This is a beautiful world' を画面に表示しています。
  2. new RegExp("world") により、「world」という文字列にマッチする正規表現パターンを生成します。
  3. ボタンをクリックすると、pattern.test(str) の判定結果と、pattern.exec(str) のマッチ結果が順に表示されます。

実行結果

ページを読み込むと、対象の文字列と「クリック」ボタンが表示されます。ボタンをクリックすると、緑色の領域に次のような結果が出力されます。

  • pattern.test(str) = true：文字列中に「world」が存在するため、true が返されます。
  • pattern.exec(str) = world：マッチした部分文字列「world」を含む配列 ["world"] が返されます。

補足：exec()とgフラグ

exec() は、正規表現に g（グローバル）フラグ を付けて作成した場合、lastIndex プロパティを更新しながらマッチ位置を進めていくため、同じパターンに対して繰り返し呼び出すことで複数のマッチを順番に取得できます。一方、単純に「マッチするかどうか」だけを確認したい場合は test() の方が簡潔で高速です。

  1. JavaScriptの正規表現を使って文字列からスペースを削除する方法

    JavaScriptで文字列内のスペースを削除したい場合は、replace()メソッドと正規表現を組み合わせるのが最も一般的な方法です。正規表現 /\s/g を使うことで、文字列中のすべての空白文字（半角スペース、タブ、改行など）を簡単に取り除くことができます。 基本的な使い方 \s は空白文字全般にマッチする特殊文字で、末尾の g（グローバルフラグ）を付けることで、最初に見つかった1箇所だけでなく、文字列全体のすべてのスペースが置換対象になります。 サンプルコード <html>    <head>    &n

  2. JavaScriptで空白と単語の順序を保持しながら各単語を反転する方法

    はじめに本記事では、文字列を引数として受け取り、その中の各単語の文字順を反転させながら、空白の位置と元の単語の順序はそのまま保持するJavaScript関数の作成方法を解説します。課題の概要作成する関数は、文章を表す文字列 str を第1引数(唯一の引数)として受け取ります。この関数は、文中の各単語に含まれる文字の並びを逆順にします。ただし、空白の位置や単語が出現する順序自体は変えずに維持する必要があります。入出力例たとえば、次の文字列を入力した場合を考えてみましょう。const str = this is some sample string;この場合、期待される出力は以下の通りです。con