【JavaScript】replace()で文字列を置換する方法｜replaceAll・正規表現・実務パターン集

この記事で学べること

• replace()メソッドの基本構文と「最初の1つだけ置換」の仕組み
• 全置換する3つの方法（正規表現gフラグ・replaceAll・split+join）
• 正規表現フラグ（g / i / m）を活用した高度な置換パターン
• キャプチャグループ（$1, $2）と後方参照による構造変換
• コールバック関数を使った動的な置換処理
• 実務で即使える置換パターン集（HTML除去・電話番号・カンマ区切り・XSS対策）
• replace()のよくあるミスと注意点

// 構文
const newStr = str.replace(pattern, replacement);

// pattern:    検索する文字列 または 正規表現
// replacement: 置換する文字列 または コールバック関数
// 戻り値:     置換後の新しい文字列（元の文字列は変化しない）

const message = 'Hello, World!';

// "World" を "JavaScript" に置換
const result = message.replace('World', 'JavaScript');

console.log(result);   // "Hello, JavaScript!"
console.log(message);  // "Hello, World!"（元の文字列は変わらない）

Hello, JavaScript!
Hello, World!

ポイント：replace() は元の文字列を変更せず、常に新しい文字列を返します。結果を使うには変数に代入する必要があります。

const text = 'りんご と みかん と りんご と ぶどう';

// 文字列で検索すると、最初の「りんご」だけが置換される
const result = text.replace('りんご', 'バナナ');

console.log(result);
// "バナナ と みかん と りんご と ぶどう"
// → 2つ目の「りんご」はそのまま！

バナナ と みかん と りんご と ぶどう

注意：replace() に文字列パターンを渡した場合、最初の一致のみが置換されます。すべての一致を置換したい場合は、次のセクションで解説する方法を使ってください。

// CSVデータからカンマを除去したい
const csv = '1,000,000';

// ❌ 最初のカンマしか除去されない
csv.replace(',', '');  // "1000,000"

// ❌ 2回呼んでも2つまで
csv.replace(',', '').replace(',', '');  // "1000000"（たまたま成功）

// → カンマの数が不定なら、この方法は危険

const text = 'りんご と みかん と りんご と ぶどう';

// 正規表現 + gフラグですべての「りんご」を置換
const result = text.replace(/りんご/g, 'バナナ');

console.log(result);
// "バナナ と みかん と バナナ と ぶどう"

バナナ と みかん と バナナ と ぶどう

const price = '1,000,000';

// すべてのカンマを除去
const num = price.replace(/,/g, '');

console.log(num);  // "1000000"

const text = 'りんご と みかん と りんご と ぶどう';

// split で「りんご」を区切りとして分割 → join で「バナナ」で結合
const result = text.split('りんご').join('バナナ');

console.log(result);
// "バナナ と みかん と バナナ と ぶどう"

split + join のメリット：正規表現の特殊文字（. * + ? ( ) [ ] など）をエスケープする必要がありません。ユーザー入力をそのまま検索文字列に使える安全な方法です。

// 構文
const newStr = str.replaceAll(pattern, replacement);

// pattern に文字列を渡すと、すべての一致を置換
// pattern に正規表現を渡す場合は、gフラグ必須

const text = 'りんご と みかん と りんご と ぶどう';

// replaceAll() ですべての「りんご」を置換
const result = text.replaceAll('りんご', 'バナナ');

console.log(result);
// "バナナ と みかん と バナナ と ぶどう"

バナナ と みかん と バナナ と ぶどう

const text = 'abc123def456';

// ✅ gフラグ付き → OK
text.replaceAll(/[0-9]+/g, 'NUM');  // "abcNUMdefNUM"

// ❌ gフラグなし → TypeError!
text.replaceAll(/[0-9]+/, 'NUM');
// TypeError: String.prototype.replaceAll called with a non-global RegExp

おすすめ：ES2021以降の環境（Node.js 15+、Chrome 85+、Safari 13.1+）であれば、単純な全置換には replaceAll() を使うのがもっとも読みやすく安全です。

const text = 'Hello hello HELLO';

// iフラグなし：完全一致のみ
text.replace(/hello/g, 'Hi');
// "Hello Hi HELLO"（小文字の hello だけ）

// giフラグ：大文字小文字を無視してすべて置換
text.replace(/hello/gi, 'Hi');
// "Hi Hi Hi"

Hello Hi HELLO
Hi Hi Hi

const text = '犬と猫とうさぎがいます';

// 「犬」「猫」「うさぎ」をすべて「動物」に置換
const result = text.replace(/犬|猫|うさぎ/g, '動物');

console.log(result);
// "動物と動物と動物がいます"

const text = '犬と猫とうさぎがいます';

// パターンごとに異なる置換先を指定
const map = { '犬': 'dog', '猫': 'cat', 'うさぎ': 'rabbit' };

const result = text.replace(/犬|猫|うさぎ/g, (match) => map[match]);

console.log(result);
// "dogとcatとrabbitがいます"

// 例1: 日付フォーマットの変換（YYYY/MM/DD → YYYY年MM月DD日）
const date = '2025/03/15';

const jpDate = date.replace(
  /(d{4})/(d{2})/(d{2})/,
  '$1年$2月$3日'
);

console.log(jpDate);  // "2025年03月15日"

// 例2: 姓名の入れ替え（"姓 名" → "名 姓"）
const name = 'Tanaka Taro';

const swapped = name.replace(/(w+)s(w+)/, '$2 $1');

console.log(swapped);  // "Taro Tanaka"

// 例3: HTMLタグを変換（em → strong）
const html = '<em>重要</em>なお知らせ';

const result = html.replace(
  /<em>(.+?)</em>/g,
  '<strong>$1</strong>'
);

console.log(result);
// "<strong>重要</strong>なお知らせ"

// $& の活用：一致した部分をカッコで囲む
const text = 'JavaScript is great';

const result = text.replace(/w+/g, '【$&】');

console.log(result);
// "【JavaScript】 【is】 【great】"

str.replace(pattern, function(match, p1, p2, ..., offset, string) {
  // match:  一致した文字列全体
  // p1, p2: キャプチャグループ（あれば）
  // offset: 一致した位置（インデックス）
  // string: 元の文字列全体
  return replacementString;
});

const text = 'りんご3個、みかん5個、ぶどう2個';

// 数値を見つけるたびに2倍にする
const result = text.replace(/d+/g, (match) => {
  return Number(match) * 2;
});

console.log(result);
// "りんご6個、みかん10個、ぶどう4個"

りんご6個、みかん10個、ぶどう4個

const title = 'hello world from javascript';

const titleCase = title.replace(/w/g, (char) => {
  return char.toUpperCase();
});

console.log(titleCase);
// "Hello World From Javascript"

const template = '{{name}}さん、{{item}}を{{count}}個注文しました';

const data = {
  name: '田中',
  item: 'コーヒー',
  count: '3'
};

const result = template.replace(
  /{{(w+)}}/g,
  (match, key) => data[key] || match
);

console.log(result);
// "田中さん、コーヒーを3個注文しました"

田中さん、コーヒーを3個注文しました

コールバック関数のメリット：静的な置換文字列では実現できない、条件分岐・計算・外部データ参照を含む柔軟な置換が可能です。実務ではテンプレートエンジンやサニタイズ処理でよく使われます。

// CSSのrgb値を16進カラーコードに変換
const css = 'color: rgb(255, 128, 0); background: rgb(0, 0, 255);';

const result = css.replace(
  /rgb((d+),s*(d+),s*(d+))/g,
  (match, r, g, b) => {
    const hex = [r, g, b]
      .map(n => Number(n).toString(16).padStart(2, '0'))
      .join('');
    return '#' + hex;
  }
);

console.log(result);
// "color: #ff8000; background: #0000ff;"

function stripHtmlTags(html) {
  return html.replace(/<[^>]*>/g, '');
}

// 使用例
const html = '<h1>タイトル</h1><p>本文の<strong>テキスト</strong>です</p>';

console.log(stripHtmlTags(html));
// "タイトル本文のテキストです"

タイトル本文のテキストです

注意：この正規表現による方法は簡易的なものです。セキュリティ上重要な場面（XSS対策など）では、DOMParser や専用ライブラリを使うことを推奨します。

// 携帯電話（090/080/070）のフォーマット
function formatMobilePhone(num) {
  return num.replace(/(d{3})(d{4})(d{4})/, '$1-$2-$3');
}

console.log(formatMobilePhone('09012345678'));
// "090-1234-5678"

// 固定電話（03, 06など市外局番2桁）のフォーマット
function formatLandlinePhone(num) {
  return num.replace(/(d{2,4})(d{2,4})(d{4})/, '$1-$2-$3');
}

console.log(formatLandlinePhone('0312345678'));
// "03-1234-5678"

function formatPostalCode(code) {
  // ハイフンを除去してから再フォーマット
  const digits = code.replace(/D/g, '');
  return digits.replace(/(d{3})(d{4})/, '〒$1-$2');
}

console.log(formatPostalCode('1000001'));  // "〒100-0001"
console.log(formatPostalCode('100-0001')); // "〒100-0001"

function addCommas(num) {
  return String(num).replace(/(d)(?=(d{3})+(?!d))/g, '$1,');
}

console.log(addCommas(1234567890));  // "1,234,567,890"
console.log(addCommas(9800));        // "9,800"
console.log(addCommas(500));         // "500"（3桁以下は変化なし）

正規表現の解説：/(d)(?=(d{3})+(?!d))/g は「後ろに3桁の数字の塊が1つ以上続く数字」に一致します。先読み (?=...) と否定先読み (?!d) を組み合わせた高度なパターンです。

より簡単な方法：実務では Number(1234567).toLocaleString() を使うほうが簡単です。ただし、正規表現版はカスタマイズ性が高い（小数点対応など）というメリットがあります。

function normalizeNewlines(text) {
  // 
（Windows）と 
（旧Mac）をすべて 
 に統一
  return text.replace(/
?/g, '
');
}

// テスト
const mixed = 'Line1
Line2
Line3
Line4';
const result = normalizeNewlines(mixed);

console.log(result.split('
'));
// ["Line1", "Line2", "Line3", "Line4"]

なぜ /
?/g で十分？
（Windows改行）は
の後に
があるパターン。
（旧Mac改行）は
の後に
がないパターン。どちらも
?（
の後に
が0個か1個）にマッチし、
に置換されます。

function escapeHtml(str) {
  const escapeMap = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    ''': '&#39;'
  };

  return str.replace(/[&<>"']/g, (char) => escapeMap[char]);
}

// 使用例
const userInput = '<script>alert("XSS")</script>';

console.log(escapeHtml(userInput));
// "&lt;script&gt;alert(&quot;XSS&quot;)&lt;/script&gt;"

<script>alert("XSS")</script>

重要：innerHTMLでユーザー入力を表示する場合は必ずエスケープしてください。textContentを使う場合はブラウザが自動的にエスケープするため不要です。

// 連続する空白を1つにまとめる
const messy = 'Hello    World   !';
messy.replace(/s+/g, ' ');  // "Hello World !"

// 前後の空白を除去（trim()と同じ動作）
const padded = '  Hello World  ';
padded.replace(/^s+|s+$/g, '');  // "Hello World"

// 空行を除去（連続改行を1つにまとめる）
const text = 'Line1


Line2

Line3';
text.replace(/
{2,}/g, '
');  // "Line1
Line2
Line3"

function linkify(text) {
  const urlPattern = /(https?://[^s<>"]+)/g;
  return text.replace(
    urlPattern,
    '<a href="$1" target="_blank" rel="noopener">$1</a>'
  );
}

// 使用例
const text = '詳細は https://example.com を参照';

console.log(linkify(text));
// '詳細は <a href="https://example.com"...>https://example.com</a> を参照'

// キャメルケース → スネークケース
function camelToSnake(str) {
  return str.replace(/[A-Z]/g, (c) => '_' + c.toLowerCase());
}

console.log(camelToSnake('firstName'));       // "first_name"
console.log(camelToSnake('backgroundColor')); // "background_color"

// スネークケース → キャメルケース
function snakeToCamel(str) {
  return str.replace(/_([a-z])/g, (match, c) => c.toUpperCase());
}

console.log(snakeToCamel('first_name'));       // "firstName"
console.log(snakeToCamel('background_color')); // "backgroundColor"

let text = 'Hello World';

// ❌ 戻り値を使わない → text は変わらない
text.replace('World', 'JavaScript');
console.log(text); // "Hello World"（変わっていない！）

// ✅ 戻り値を変数に代入する
text = text.replace('World', 'JavaScript');
console.log(text); // "Hello JavaScript"

// ❌ ピリオドは正規表現では「任意の1文字」
'3.14 + 3x14'.replace(/3.14/g, 'π');
// "π + π"（3x14 も一致してしまう！）

// ✅ バックスラッシュでエスケープ
'3.14 + 3x14'.replace(/3.14/g, 'π');
// "π + 3x14"（正しい結果）

エスケープが必要な特殊文字：. * + ? ^ $ { } ( ) | [ ] ─ これらを文字として検索するには でエスケープしてください。

// ユーザー入力を正規表現に使う場合はエスケープが必要
function escapeRegex(str) {
  return str.replace(/[.*+?^${}()|[]\]/g, '\$&');
}

// 使用例
const userInput = 'price: $100 (tax)';
const escaped = escapeRegex(userInput);
// "price: \$100 \(tax\)"

const regex = new RegExp(escaped, 'g');
// これで安全に検索・置換できる

// ❌ 置換文字列の$が特殊パターンとして解釈される
'price'.replace('price', '$100');
// "$100" ではなく "00" になる場合がある（$1 がキャプチャ参照と解釈）

// ✅ $$ で $ をリテラルとして挿入
'price'.replace('price', '$$100');
// "$100"

おすすめの使い分け：

• 最初の1つだけ置換 → replace(string, rep)
• 単純な全置換 → replaceAll()（ES2021+）または split().join()
• パターンで全置換 → replace(/regex/g, rep)
• 動的な置換（計算・条件分岐） → replace(regex, callback)
• ユーザー入力で全置換 → replaceAll() または split().join()