JavaScript | 第9章「正規表現」

JavaScript

2019.01.022025.10.14

リアルタイムでマッチ結果が見えるインタラクティブ実験ツール
機能
コード全体（コピペで動く）
使い方例
応用カスタマイズ案

リアルタイムでマッチ結果が見えるインタラクティブ実験ツール

では、初心者が「正規表現の仕組みをリアルタイムで体感」できる
インタラクティブ実験ツール（HTML + JavaScript）を作ります。

機能

入力した正規表現がリアルタイムに評価される
入力したテキスト内で マッチした部分をハイライト表示
フラグ（g, i, m, s）をチェックボックスで切り替え可能
エラー（正規表現の構文ミス）も安全にキャッチして表示

コード全体（コピペで動く）

保存してブラウザで開くだけで動作します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>正規表現リアルタイム実験ツール</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f7f9fc;
    padding: 2rem;
    color: #333;
  }
  h1 { font-size: 1.5rem; }
  .card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: 1rem;
  }
  textarea, input {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    margin-top: 0.3rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
  }
  label { margin-right: 1rem; }
  .output {
    background: #fafafa;
    border: 1px dashed #ccc;
    padding: 1rem;
    margin-top: 1rem;
    white-space: pre-wrap;
    border-radius: 8px;
  }
  .highlight {
    background: #ffeb3b;
    color: #000;
    border-radius: 4px;
    padding: 0 2px;
  }
  .error {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>

<h1>🧠 正規表現リアルタイム実験ツール</h1>
<p>正規表現とテキストを入力すると、マッチ部分がリアルタイムでハイライトされます。</p>

<div class="card">
  <label>🔍 正規表現パターン:</label>
  <input type="text" id="pattern" value="\\d+" placeholder="例: \\d+（数字にマッチ）" />

  <div style="margin-top: 0.5rem;">
    <label><input type="checkbox" id="flag-g" checked> g（全体検索）</label>
    <label><input type="checkbox" id="flag-i"> i（大文字小文字無視）</label>
    <label><input type="checkbox" id="flag-m"> m（複数行）</label>
    <label><input type="checkbox" id="flag-s"> s（改行も含む）</label>
  </div>

  <label style="margin-top: 1rem;">📝 テキスト:</label>
  <textarea id="text" rows="6">I have 2 dogs and 12 cats.</textarea>

  <div id="error" class="error"></div>

  <div class="output" id="output"></div>
</div>

<script>
  const patternInput = document.getElementById('pattern');
  const textInput = document.getElementById('text');
  const output = document.getElementById('output');
  const errorDiv = document.getElementById('error');
  const flags = ['g', 'i', 'm', 's'];

  function update() {
    const text = textInput.value;
    const pattern = patternInput.value;

    const activeFlags = flags.filter(f => document.getElementById('flag-' + f).checked).join('');

    try {
      const regex = new RegExp(pattern, activeFlags);
      errorDiv.textContent = '';

      let result = '';
      if (text.length === 0) {
        output.textContent = '(テキストを入力してください)';
        return;
      }

      // ハイライト処理
      result = text.replace(regex, match => `<span class="highlight">${match}</span>`);
      output.innerHTML = result || '(マッチなし)';

    } catch (e) {
      errorDiv.textContent = '⚠️ 正規表現エラー: ' + e.message;
      output.textContent = '';
    }
  }

  document.querySelectorAll('input, textarea').forEach(el => el.addEventListener('input', update));
  update();
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>正規表現リアルタイム実験ツール</title>
<style>
  body {
    font-family: "Segoe UI", sans-serif;
    background: #f7f9fc;
    padding: 2rem;
    color: #333;
  }
  h1 { font-size: 1.5rem; }
  .card {
    background: #fff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-top: 1rem;
  }
  textarea, input {
    width: 100%;
    padding: 0.6rem;
    font-size: 1rem;
    margin-top: 0.3rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
  }
  label { margin-right: 1rem; }
  .output {
    background: #fafafa;
    border: 1px dashed #ccc;
    padding: 1rem;
    margin-top: 1rem;
    white-space: pre-wrap;
    border-radius: 8px;
  }
  .highlight {
    background: #ffeb3b;
    color: #000;
    border-radius: 4px;
    padding: 0 2px;
  }
  .error {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>

<h1>🧠 正規表現リアルタイム実験ツール</h1>
<p>正規表現とテキストを入力すると、マッチ部分がリアルタイムでハイライトされます。</p>

<div class="card">
  <label>🔍 正規表現パターン:</label>
  <input type="text" id="pattern" value="\\d+" placeholder="例: \\d+（数字にマッチ）" />

  <div style="margin-top: 0.5rem;">
    <label><input type="checkbox" id="flag-g" checked> g（全体検索）</label>
    <label><input type="checkbox" id="flag-i"> i（大文字小文字無視）</label>
    <label><input type="checkbox" id="flag-m"> m（複数行）</label>
    <label><input type="checkbox" id="flag-s"> s（改行も含む）</label>
  </div>

  <label style="margin-top: 1rem;">📝 テキスト:</label>
  <textarea id="text" rows="6">I have 2 dogs and 12 cats.</textarea>

  <div id="error" class="error"></div>

  <div class="output" id="output"></div>
</div>

<script>
  const patternInput = document.getElementById('pattern');
  const textInput = document.getElementById('text');
  const output = document.getElementById('output');
  const errorDiv = document.getElementById('error');
  const flags = ['g', 'i', 'm', 's'];

  function update() {
    const text = textInput.value;
    const pattern = patternInput.value;

    const activeFlags = flags.filter(f => document.getElementById('flag-' + f).checked).join('');

    try {
      const regex = new RegExp(pattern, activeFlags);
      errorDiv.textContent = '';

      let result = '';
      if (text.length === 0) {
        output.textContent = '(テキストを入力してください)';
        return;
      }

      // ハイライト処理
      result = text.replace(regex, match => `<span class="highlight">${match}</span>`);
      output.innerHTML = result || '(マッチなし)';

    } catch (e) {
      errorDiv.textContent = '⚠️ 正規表現エラー: ' + e.message;
      output.textContent = '';
    }
  }

  document.querySelectorAll('input, textarea').forEach(el => el.addEventListener('input', update));
  update();
</script>

</body>
</html>

HTML

使い方例

やりたいこと	正規表現
数字をすべて探す	`\d+`
単語を全部取る	`\w+`
大文字で始まる単語	`\b[A-Z]\w*`
「cat」または「dog」	`cat
行の先頭の数字	`^\d+`（＋`m`フラグON）

応用カスタマイズ案

✅ 正規表現の説明（リアルタイムで構文解析）を追加
✅ 結果の個数・位置を表示
✅ 「貪欲／非貪欲」切り替え実験モード
✅ 教材モード（「次の課題：郵便番号をマッチせよ！」）

月	火	水	木	金	土	日
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31