【JavaScript】文字列の不要な文字を削除・置換する（正規表現による一括変換）

2026年1月24日

概要

ユーザーが入力したデータからハイフンや空白を取り除いたり、特定のフォーマットに整形したりする処理は、Webフォーム開発において必須の技術です。 JavaScriptの replace() メソッドは、単純な文字の置き換えだけでなく、正規表現（RegExp）を組み合わせることで、文字列全体に含まれる対象文字を一括で変換することができます。本記事では、文字列の一部を置換する方法と、正規表現の g フラグを使用した一括置換のテクニックを解説します。

仕様（入出力）

入力: ハイフン（-）が含まれる製品シリアルコード（例: PRD-2026-X99）。
出力: ハイフンがすべて除去された文字列（例: PRD2026X99）。
動作:
- ボタンを押すと入力フォームの値を読み取る。
- 文字列内のすべてのハイフンを削除（空文字に置換）する。
- 結果を画面に表示する。

基本の使い方

replace() の第一引数に「文字列」を指定すると最初の1つだけが、「正規表現（/pattern/g）」を指定するとすべてが置換されます。

const rawText = "A-B-C";

// 文字列指定：最初に見つかった "-" だけを削除
console.log(rawText.replace("-", "")); 
// 結果: "AB-C"

// 正規表現指定（gフラグ）：すべての "-" を削除
console.log(rawText.replace(/-/g, "")); 
// 結果: "ABC"

コード全文（HTML / JavaScript）

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>String Replace Example</title>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        .form-group { margin-bottom: 15px; }
        label { display: block; margin-bottom: 5px; font-weight: bold; }
        input[type="text"] { padding: 8px; width: 100%; max-width: 300px; font-family: monospace; }
        button { padding: 8px 16px; background-color: #007bff; color: white; border: none; cursor: pointer; border-radius: 4px; }
        button:hover { background-color: #0056b3; }
        .result-box { margin-top: 20px; padding: 10px; background-color: #f4f4f4; border-left: 5px solid #333; }
    </style>
</head>
<body>

    <div class="form-group">
        <label for="serialInput">製品シリアルコード (例: ABCD-1234-EFGH)</label>
        <input type="text" id="serialInput" value="ABCD-1234-EFGH">
    </div>

    <button id="formatBtn">フォーマット整形</button>

    <div id="resultArea" class="result-box">ここに結果が表示されます</div>

    <script src="app.js"></script>
</body>
</html>

JavaScript

/**
 * HTML要素の参照を取得
 */
const serialInput = document.querySelector("#serialInput");
const formatBtn = document.querySelector("#formatBtn");
const resultArea = document.querySelector("#resultArea");

/**
 * フォーマット実行処理
 * @param {Event} event 
 */
const handleFormat = (event) => {
    // フォーム送信によるリロードを防止（formタグ内にある場合など）
    event.preventDefault();

    // 入力値を取得
    const originalCode = serialInput.value;

    if (!originalCode) {
        resultArea.textContent = "値を入力してください。";
        return;
    }

    // ハイフン(-)をすべて空文字に置換して削除
    // /-/g という正規表現を使用します
    const formattedCode = originalCode.replace(/-/g, "");

    // 結果を表示
    resultArea.innerHTML = `
        <strong>整形前:</strong> ${originalCode}<br>
        <strong>整形後:</strong> ${formattedCode}
    `;
    
    console.log(`変換完了: ${formattedCode}`);
};

// クリックイベントの登録
formatBtn.addEventListener("click", handleFormat);

カスタムポイント

空白の削除: ハイフンだけでなく、スペースも削除したい場合は正規表現を /[-\s]/g に変更します。\s は空白文字（スペース、タブなど）を表します。JavaScript// ハイフンと空白をすべて削除 const cleanText = text.replace(/[-\s]/g, "");
モダンな記述（replaceAll）: ES2021以降の環境であれば、正規表現を使わずに replaceAll("-", "") と記述することですべての置換が可能です。可読性を重視する場合に有効です。

注意点

元の文字列は変化しない: JavaScriptの文字列はイミュータブル（不変）です。text.replace(...) を実行しても変数 text の中身は書き換わりません。必ず戻り値を新しい変数に代入してください。
正規表現の特殊文字: . * + ? などの記号を文字として置換したい場合、バックスラッシュ \ でエスケープする必要があります（例: replace(/\./g, "")）。
全角ハイフン: キーボード入力によっては半角ハイフン - ではなく、全角ハイフン － や長音符 ー が使われることがあります。これらを網羅する場合は /[-\u30FC\uFF0D]/g のような厳密な指定が必要です。

応用

改行コードの削除

テキストエリアなどで入力された改行（\n）を取り除き、1行のテキストにする例です。

const textAreaValue = "一行目\n二行目\n三行目";

// 改行コード（\n）をすべて空文字に置換
// 複数の種類の改行コードに対応するため \r\n と \n と \r を対象にする
const singleLineText = textAreaValue.replace(/[\r\n]+/g, "");

console.log(singleLineText); // "一行目二行目三行目"

まとめ

文字列の特定の文字を「すべて」置換したい場合、従来は replace(/パターン/g, "") の正規表現パターンが定石でした。現在は replaceAll() も選択肢に入りますが、複雑な条件（「ハイフンまたは空白」など）を指定できる正規表現は依然として強力なツールです。用途に合わせて使い分けましょう。

よかったらシェアしてね！