文字列を置き換える方法 - JavaScriptのreplaceメソッド完全ガイド
JavaScriptのreplaceメソッドを使った文字列置換の方法を初心者向けに詳しく解説。基本的な使い方から正規表現を使った高度な置換まで実例付きで説明します。
みなさん、文字列の中身を変えたいと思ったことはありませんか？
「ユーザーが入力した文字の一部を修正したい」「テキストデータをきれいに整形したい」「特定の文字を別の文字に変えたい」
こんな場面は、プログラミングでとてもよくあることですよね。 実は、JavaScriptには文字列を簡単に置き換える便利な機能があるんです。
この記事では、JavaScriptのreplaceメソッドを使った文字列置換について初心者向けに分かりやすく解説します。 基本的な使い方から実践的な活用例まで、一緒に学んでいきましょう！
replaceメソッドって何？基本を知ろう
文字列置換の正体
replaceメソッドとは、文字列の中の特定の部分を別の文字列に置き換える機能です。
簡単に言うと、「この文字をあの文字に変えて」という指示を簡単に実行できる便利な道具なんです。 ユーザー入力の修正やデータの整形など、様々な場面で活躍します。
// replaceメソッドの基本的な構文let 新しい文字列 = 元の文字列.replace(検索文字, 置換文字);
// 実際の使用例let greeting = "こんにちは世界";let newGreeting = greeting.replace("世界", "JavaScript");
console.log(newGreeting); // "こんにちはJavaScript"console.log(greeting); // "こんにちは世界"（元の文字列は変わらない）この例では、"世界"という文字を"JavaScript"に置き換えています。 重要なポイントは、元の文字列は変更されず、新しい文字列が作られることです。
どんな時に使うの？
replaceメソッドは、こんな場面でよく使われます。
// ユーザー入力の修正let userInput = "私の名前わ田中です";let corrected = userInput.replace("わ", "は");console.log(corrected); // "私の名前は田中です"
// データの整形let phoneNumber = "090-1234-5678";let formatted = phoneNumber.replace("-", "");console.log(formatted); // "09012345678"（最初のハイフンのみ削除）
// 表示用テキストの変更let status = "処理中です...";let completed = status.replace("処理中", "完了");console.log(completed); // "完了です..."日常的な文字列処理で、とても頼りになる機能ですね。
基本的な置換パターンを覚えよう
単純な文字列置換
最も基本的な使い方から始めましょう。
// シンプルな置換let message = "今日は雨です";let sunny = message.replace("雨", "晴れ");console.log(sunny); // "今日は晴れです"
// 数字の置換let score = "得点は80点でした";let newScore = score.replace("80", "95");console.log(newScore); // "得点は95点でした"
// 記号の置換let email = "user@example.com";let masked = email.replace("@", "[at]");console.log(masked); // "user[at]example.com"このように、どんな文字列でも簡単に置換できます。
最初の一致だけ置換される
replaceメソッドには大切な特徴があります。
let fruit = "りんご、りんご、みかん";let changed = fruit.replace("りんご", "バナナ");
console.log(changed); // "バナナ、りんご、みかん"最初に見つかった「りんご」だけが「バナナ」に置き換わります。 2番目の「りんご」はそのまま残っているのが分かりますね。
大文字小文字は区別される
英語の文字列では、大文字と小文字の違いに注意が必要です。
let text = "Hello World";
// 大文字小文字が一致しない場合let notMatched = text.replace("hello", "Hi");console.log(notMatched); // "Hello World"（変更されない）
// 正確に一致する場合let matched = text.replace("Hello", "Hi");console.log(matched); // "Hi World"正確に文字が一致する部分だけが置換されます。
全ての文字を置換する方法
replaceAllメソッドを使おう
同じ文字が複数ある場合、全部を置換したいことがありますよね。
// 全ての「りんご」を「バナナ」に置換let fruit = "りんご、りんご、みかん、りんご";let allChanged = fruit.replaceAll("りんご", "バナナ");
console.log(allChanged); // "バナナ、バナナ、みかん、バナナ"replaceAllメソッドを使うことで、該当する文字列をすべて一度に置換できます。
古い方法（正規表現を使用）
replaceAllが使えない古い環境では、正規表現を使います。
// 正規表現のgフラグで全置換let fruit = "りんご、りんご、みかん、りんご";let allChanged = fruit.replace(/りんご/g, "バナナ");
console.log(allChanged); // "バナナ、バナナ、みかん、バナナ"/りんご/gのgは「global（全体）」という意味で、全ての一致する部分を置換します。
使い分けのコツ
どちらの方法を使うか迷った時の指針です。
// シンプルな文字列の場合 → replaceAll が簡単let simple = "test test test";let result1 = simple.replaceAll("test", "demo");
// 複雑なパターンの場合 → 正規表現が便利let complex = "価格：1000円、割引：200円";let result2 = complex.replace(/\d+/g, "***"); // 数字を全て置換console.log(result2); // "価格：***円、割引：***円"用途に応じて適切な方法を選びましょう。
関数を使った賢い置換
置換内容を動的に決める
replace メソッドでは、置換する文字列の代わりに関数を使うことができます。
// 数字を見つけて2倍にするlet prices = "りんご100円、みかん150円";let doubled = prices.replace(/\d+/g, function(match) { return parseInt(match) * 2;});
console.log(doubled); // "りんご200円、みかん300円"この例では、見つかった数字（match）を取得して、それを2倍にした値で置換しています。
アロー関数でもっと簡潔に
ES6のアロー関数を使うと、さらに読みやすく書けます。
// 温度の単位変換（摂氏を華氏に）let temperature = "今日の気温は25度です";let fahrenheit = temperature.replace(/\d+/g, (celsius) => { return Math.round((parseInt(celsius) * 9/5) + 32);});
console.log(fahrenheit); // "今日の気温は77度です"関数を使うことで、単純な置換では実現できない複雑な処理も可能になります。
条件に応じた置換
特定の条件を満たす場合だけ置換する例です。
// 1000以上の数字にカンマを追加let numbers = "商品A: 500円、商品B: 1500円、商品C: 12000円";let formatted = numbers.replace(/\d+/g, (match) => { let num = parseInt(match); if (num >= 1000) { return num.toLocaleString(); // カンマ区切りにする } return match; // 1000未満はそのまま});
console.log(formatted); // "商品A: 500円、商品B: 1,500円、商品C: 12,000円"このように、見つかった値に応じて異なる処理を行うことができます。
実際に使える便利なパターン
ユーザー入力の整形
フォームで入力された電話番号を整形する例です。
function formatPhoneNumber(input) { // まず、数字以外を全て除去 let numbersOnly = input.replace(/\D/g, ""); // 11桁の場合（携帯電話） if (numbersOnly.length === 11) { return numbersOnly.replace(/(\d{3})(\d{4})(\d{4})/, "$1-$2-$3"); } // 10桁の場合（固定電話） if (numbersOnly.length === 10) { return numbersOnly.replace(/(\d{2,4})(\d{2,4})(\d{4})/, "$1-$2-$3"); } return input; // 形式が不明な場合はそのまま返す}
// 使用例console.log(formatPhoneNumber("09012345678")); // "090-1234-5678"console.log(formatPhoneNumber("03-1234-5678")); // "03-1234-5678"console.log(formatPhoneNumber("0312345678")); // "03-1234-5678"この関数では、まず数字以外を削除してから適切な形式に整形しています。
HTMLタグの除去
HTMLが含まれた文字列からタグを除去する例です。
function removeHtmlTags(htmlString) { // HTMLタグを除去 let withoutTags = htmlString.replace(/<[^>]*>/g, ""); // HTMLエンティティを通常の文字に変換 let decoded = withoutTags .replace(/</g, "<") .replace(/>/g, ">") .replace(/&/g, "&") .replace(/"/g, '"') .replace(/'/g, "'"); return decoded.trim(); // 前後の空白も除去}
// 使用例let htmlText = "<p>これは<strong>重要な</strong>お知らせです。</p>";let plainText = removeHtmlTags(htmlText);console.log(plainText); // "これは重要なお知らせです。"Webスクレイピングやデータ処理でよく使われるパターンです。
URL内の特殊文字をエスケープ
URL に使用する文字列を安全な形式に変換する例です。
function createSearchUrl(baseUrl, searchQuery) { // スペースを%20に変換 let encodedQuery = searchQuery.replace(/\s/g, "%20"); // その他の特殊文字もエスケープ encodedQuery = encodedQuery .replace(/&/g, "%26") .replace(/\+/g, "%2B") .replace(/=/g, "%3D"); return baseUrl + "?q=" + encodedQuery;}
// 使用例let searchUrl = createSearchUrl("https://example.com/search", "JavaScript 学習方法");console.log(searchUrl); // "https://example.com/search?q=JavaScript%20学習方法"検索機能やAPI呼び出しで重要な処理です。
正規表現を使った高度な置換
パターンマッチングで柔軟な処理
正規表現を使うことで、より柔軟な文字列置換ができます。
// メールアドレスの一部をマスキングfunction maskEmail(email) { return email.replace(/(.{1,3})[^@]*(@.*)/, "$1***$2");}
console.log(maskEmail("tanaka@example.com")); // "tan***@example.com"
// 日付フォーマットの変換function convertDateFormat(dateString) { // YYYY-MM-DD を DD/MM/YYYY に変換 return dateString.replace(/(\d{4})-(\d{2})-(\d{2})/, "$3/$2/$1");}
console.log(convertDateFormat("2024-12-25")); // "25/12/2024"括弧で囲んだ部分（キャプチャグループ）を$1、$2として参照できます。
複数の処理を組み合わせる
複数の置換処理を連続して実行する例です。
function normalizeText(text) { return text .replace(/\s+/g, " ") // 連続する空白を1つに統一 .replace(/[！]/g, "!") // 全角感嘆符を半角に .replace(/[？]/g, "?") // 全角疑問符を半角に .replace(/[（]/g, "(") // 全角括弧を半角に .replace(/[）]/g, ")") .trim(); // 前後の空白を除去}
// 使用例let messyText = "これは テスト！！文章です？？（重要）";let cleanText = normalizeText(messyText);console.log(cleanText); // "これは テスト!! 文章です?? (重要)"メソッドチェーンを使って、複数の整形処理を順次適用しています。
条件付きの複雑な置換
特定の条件に応じて異なる置換を行う例です。
function formatPrice(text) { return text.replace(/(\d+)円/g, function(match, price) { let amount = parseInt(price); if (amount >= 10000) { // 1万円以上は「万円」表記 return Math.floor(amount / 10000) + "万" + (amount % 10000 > 0 ? (amount % 10000) : "") + "円"; } else if (amount >= 1000) { // 1000円以上はカンマ区切り return amount.toLocaleString() + "円"; } else { // 1000円未満はそのまま return match; } });}
// 使用例let priceText = "商品A: 500円、商品B: 1500円、商品C: 25000円";let formatted = formatPrice(priceText);console.log(formatted); // "商品A: 500円、商品B: 1,500円、商品C: 2万5000円"金額の表示形式を見やすく調整する実用的な例です。
エラーを避ける安全な使い方
入力値のチェック
予期しない入力に対応する安全な関数を作りましょう。
function safeReplace(text, searchValue, replaceValue) { // 入力値の検証 if (typeof text !== "string") { console.warn("textは文字列である必要があります"); return String(text); // 文字列に変換 } if (searchValue === null || searchValue === undefined) { return text; // 検索値がない場合はそのまま返す } if (replaceValue === null || replaceValue === undefined) { replaceValue = ""; // 置換値がない場合は空文字に } try { return text.replace(searchValue, replaceValue); } catch (error) { console.error("置換処理でエラーが発生:", error.message); return text; }}
// 使用例console.log(safeReplace("Hello World", "World", "JavaScript")); // "Hello JavaScript"console.log(safeReplace(123, "1", "X")); // "X23"console.log(safeReplace("Hello", null, "Hi")); // "Hello"この関数は、どんな入力値でも安全に処理できます。
特殊文字のエスケープ
正規表現で特別な意味を持つ文字を安全に扱う方法です。
function escapeRegExp(string) { // 正規表現で特別な意味を持つ文字をエスケープ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');}
function replaceExact(text, searchValue, replaceValue) { // 特殊文字を含む文字列も正確に置換 let escapedSearch = escapeRegExp(searchValue); let regex = new RegExp(escapedSearch, 'g'); return text.replace(regex, replaceValue);}
// 使用例let mathExpression = "2 + 2 = 4 と 3 + 3 = 6";let result = replaceExact(mathExpression, "+", "plus");console.log(result); // "2 plus 2 = 4 と 3 plus 3 = 6"+記号のような特殊文字も安全に置換できます。
便利なユーティリティ関数
よく使う処理をまとめよう
実際のプロジェクトで役立つユーティリティ関数の例です。
const TextUtils = { // 全角数字を半角に変換 convertToHalfWidth: function(text) { return text.replace(/[０-９]/g, function(match) { return String.fromCharCode(match.charCodeAt(0) - 0xFEE0); }); }, // 半角数字を全角に変換 convertToFullWidth: function(text) { return text.replace(/[0-9]/g, function(match) { return String.fromCharCode(match.charCodeAt(0) + 0xFEE0); }); }, // カタカナをひらがなに変換 katakanaToHiragana: function(text) { return text.replace(/[\u30A1-\u30F6]/g, function(match) { return String.fromCharCode(match.charCodeAt(0) - 0x60); }); }, // ひらがなをカタカナに変換 hiraganaToKatakana: function(text) { return text.replace(/[\u3041-\u3096]/g, function(match) { return String.fromCharCode(match.charCodeAt(0) + 0x60); }); }, // 複数の空白を1つに統一 normalizeSpaces: function(text) { return text.replace(/\s+/g, " ").trim(); }};
// 使用例console.log(TextUtils.convertToHalfWidth("１２３")); // "123"console.log(TextUtils.convertToFullWidth("123")); // "１２３"console.log(TextUtils.katakanaToHiragana("コンニチハ")); // "こんにちは"console.log(TextUtils.hiraganaToKatakana("こんにちは")); // "コンニチハ"これらの関数は、日本語を扱うWebアプリケーションでとても便利です。
効率的な複数置換
一度に複数の置換を行う効率的な方法です。
function multipleReplace(text, replacements) { // 置換対象を正規表現パターンに結合 let pattern = Object.keys(replacements) .map(key => key.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')) // エスケープ .join('|'); let regex = new RegExp(pattern, 'g'); return text.replace(regex, function(matched) { return replacements[matched]; });}
// 使用例let text = "リンゴとミカンとバナナを買いました";let replacements = { "リンゴ": "Apple", "ミカン": "Orange", "バナナ": "Banana"};
let translated = multipleReplace(text, replacements);console.log(translated); // "AppleとOrangeとBananaを買いました"たくさんの置換処理を効率的に実行できます。
まとめ
JavaScriptの文字列置換は、適切な方法を選ぶことでとても強力な機能になります。
重要なポイントをおさらいしましょう。
- 基本の置換: replaceメソッドで簡単実現
- 全置換: replaceAllメソッドまたは正規表現のgフラグ
- 動的な置換: 関数を使って柔軟な処理
- 安全な処理: 入力値チェックとエラーハンドリング
実践で役立つテクニックも身につきました。
- ユーザー入力の整形と検証
- データの変換と正規化
- 文字エンコードの変換
- 効率的な複数置換処理
用途に応じた使い分けが大切です。
- シンプルな置換: replace/replaceAll
- パターンマッチング: 正規表現
- 複雑な条件: 関数による動的処理
- 大量データ: 効率化されたユーティリティ
これらの技術をマスターすることで、ユーザー入力の処理、データの整形、テキストの変換など、様々な場面で効率的な文字列操作ができるようになります。 ぜひ実際のプロジェクトで活用して、より使いやすいWebアプリケーションを作ってみてくださいね！