【JavaScript】文字列置換とは？初心者向けにわかりやすく解説
はじめに
JavaScriptで文字列を扱うとき、「一部の文字や単語をほかの文字に置き換えたい」という場面はとても多いです。
例えばWebページ上でユーザーが入力したデータを整形するときや、表示用にフォーマットを変更するときなど、実務でも頻繁に登場する作業といえるでしょう。
ただ、初心者の方にとっては「どのメソッドを使えばいいのか」「正規表現って何だろう」という疑問を抱くかもしれません。
JavaScriptでは主に replace() メソッドや replaceAll() メソッド、そして正規表現を使って文字列を置換する方法があります。
それぞれの使い方やポイントをしっかり押さえておくと、実務でもスムーズにデータの加工ができるようになります。
本記事では、初心者が理解しやすいように具体的なコード例とともに解説を進めていきます。
大文字と小文字の扱い方や、置換対象が複数ある場合の処理方法、さらに実務でよくある文字列のクリーニングやフォーマット変換などを取り上げていきます。
少し長めの内容ですが、記事を通して体系的に学ぶことで、文字列操作に関してより自信を持てるようになっていただけるでしょう。
この記事を読むとわかること
- JavaScriptにおける文字列置換の基本的な方法
replace()メソッドの使い方と正規表現の活用replaceAll()メソッドの特徴と実務での利用シーン- 大文字・小文字の扱いや部分一致などの注意点
- 実務で見かける様々な文字列置換の具体例やユースケース
- パフォーマンス面を考慮した置換方法のポイント
ここからは、一つひとつのポイントを噛み砕きながら解説していきます。
初心者の方も安心して読み進められる内容ですので、ぜひ活用してみてください。
JavaScriptにおける文字列置換の概要
JavaScriptで文字列を置換する場合、メソッドとしては主に replace() が中心的な役割を持っています。
また、近年の仕様で追加された replaceAll() を使うと、重複する部分もまとめて置換しやすい場面があります。
さらに、多様な置換パターンを柔軟に記述したい場合には正規表現を活用すると便利です。
置換のメカニズムはシンプルです。
ある文字列があり、「この文字列のうち、特定の部分を別の文字に変えたい」という要望があるとき、JavaScriptのメソッドに対して「どの部分を」「何に置き換えるか」を指示するだけです。
ところが、単に文字列の一部を変更するだけではなく、例えば文頭だけを置き換えたい、数字だけをマスクしたい、特定のパターン（アルファベットと数字が混ざった文字列など）だけを抽出して変換したい、といった多彩なニーズもあるでしょう。
そうした場面で正規表現が登場すると理解すると、導入しやすいです。
なぜ文字列置換が必要なのか
たとえば、ユーザーが入力するデータには余分な空白や改行が紛れ込んでいるケースが少なくありません。
入力データを処理するときに、それらを正確に取り除かないと正常に動作しなかったり、後段の処理でエラーになったりします。
また、企業システムで扱うログファイルでは個人情報が記録されていることがあり、データを保存するときに名前やIDをマスクする作業が必要になることもあるでしょう。
このように、実際の現場では文字列の一部を安全かつ適切に整形するニーズが頻繁に出てきます。
さらにWebサイト上のテキストで、特定の単語を他の単語に置き換えるだけでなく、ユーザーが入力した文字列がURLかどうかを検出することも考えられます。
その際に正規表現を使ってURL形式かを判定し、問題がなければハイパーリンクに変換するなど、かなり多様な活用の仕方があるのです。
置換メソッドの基本形
JavaScriptの基本的な文字列置換は、以下のように replace() メソッドを利用します。
const originalText = "Hello World!"; const replacedText = originalText.replace("Hello", "Hi"); console.log(replacedText); // "Hi World!"
ここで、第一引数が「検索したい文字列または正規表現」、第二引数が「置き換え後の文字列」と覚えると簡単です。
実務の場面でも、とりあえず単純な文字列を置き換えるだけならこの記法で十分対応できます。
しかし、より多くの同じ単語を一括で置換したい場合や、少し複雑なルールを適用したい場合には正規表現の知識が不可欠になるケースが多いでしょう。
replace() メソッドの基礎
replace() はJavaScriptで最もよく使われる文字列置換のメソッドです。
基本的な使い方はとてもシンプルですが、オプションや正規表現の使い方によってさまざまな置換パターンを実現できます。
ここからは実行の流れをもう少し具体的に見ていきましょう。
簡単な置換コード例
まずは replace() の最も基本的な例を確認します。
例えば、「apple」という単語を「orange」に置き換えたい場合は次のように書きます。
const text = "I like apple pie. Apple juice is also nice."; // この例では、一度だけ"apple"を置換する const newText = text.replace("apple", "orange"); console.log(newText); // "I like orange pie. Apple juice is also nice."
このコードでは「apple」という文字列のうち、最初に見つかった1箇所だけが置換されます。
なぜなら、ただの文字列指定の場合は「先に見つかったものを1回だけ」置き換えるのがデフォルトの挙動だからです。
結果として、文章後半にある "Apple"（先頭が大文字）や2番目の "apple" は置き換えの対象になりません。
そのため、複数箇所を同時に置き換えたい場合や大文字小文字を区別せず置換したい場合には、正規表現とそのフラグを使って指定する必要があります。
実務で想定される活用シーン
実務では次のような場面で単純な置換メソッドが役立ちます。
- デバッグやログ出力の前に、一時的に特定の文字列を別の表現に変更する
- Web画面でエラーを表示するとき、ユーザーに見せる単語を優しい言い回しに差し替える
- 一部のHTMLタグ（例えば
<script>）をエスケープして安全に表示する
こうした場面では、単に一回だけ単語を置き換えればよいケースもあるでしょう。
しかし、同じ単語が複数出てくるテキストを一括で置き換えたいときは「gフラグ」を使った正規表現を活用します。
それについては後ほど詳しく解説します。
replace() で正規表現を使う
先ほど述べたように、文字列を検索する部分を正規表現にすると、置換の幅が一気に広がります。
例えば「文中の数字をすべて別の文字に変える」「大文字小文字を区別しないで指定の単語を探す」など、柔軟な処理が可能になります。
マッチパターンの指定方法
正規表現を使う場合、基本的な書き方は以下のようになります。
const text = "Apple and apple and APPLE."; const newText = text.replace(/apple/, "orange"); console.log(newText); // "Apple and orange and APPLE."
ここで /apple/ が正規表現です。
この正規表現はデフォルトでは大文字小文字を区別するため、"Apple" や "APPLE" は検索対象になりません。
「小文字の 'apple' だけ」をそのまま置換する場合には、この書き方で十分です。
しかし、たいていの実務では大文字小文字の区別をしないでまとめて置換したいケースも多いでしょう。
そのときは正規表現の末尾に i フラグをつけて指定するやり方があります。
const text = "Apple and apple and APPLE."; const newText = text.replace(/apple/i, "orange"); console.log(newText); // "orange and apple and APPLE."
このように書くと「最初に見つかった "Apple" は置換する」けれど、2番目の "apple" や3番目の "APPLE" はそのままです。
あくまでも最初の1箇所だけを置換するという点は同じですので、複数箇所を一度に置換したければ次項で紹介する g フラグが必須です。
フラグ（g,iなど）の活用
正規表現のフラグは、以下のような機能を持ちます。
- g: 文字列全体に対してマッチする箇所をすべて置換する
- i: 大文字小文字を区別しない
- m: 複数行モード（行頭
^、行末$の扱いを複数行にわたって行う）
例えば「文字列中の 'apple' を大文字小文字区別せずに、見つかったものを全部置き換えたい」なら、フラグとして gi を組み合わせます。
const text = "Apple and apple and APPLE."; const newText = text.replace(/apple/gi, "orange"); console.log(newText); // "orange and orange and orange."
こう書くことで、"Apple" "apple" "APPLE" すべてを置換することができます。
実務では複数の単語やパターンをまとめて変換したい場面はよくありますので、この g フラグは覚えておくととても便利です。
文字列置換の注意点
ここまでの説明で基本的な仕組みはつかめたと思いますが、文字列置換を行う際にはいくつかの注意点もあります。
主に大文字小文字の扱いと、部分一致が思わぬ形でマッチしてしまうケースについては意識しておくと良いでしょう。
大文字・小文字の扱い
先ほど紹介した i フラグをつけると、たとえば "Apple" や "APPLE" がすべて同じものとして検索されます。
しかしフラグを付けずに /apple/ と書く場合は、小文字だけが対象です。
大文字小文字を区別しない置換をするなら i フラグを、区別して正確に置き換えたいならフラグはつけない、といった形で明確に選択すると良いでしょう。
また、部分置換をするときに誤って意図しない単語まで変えてしまう可能性がある点にも気をつける必要があります。
例えば「 'app' という文字列が含まれる単語すべてを置き換える」指定をしたら、"application" や "happy" の一部まで変えてしまうことが考えられます。
そうしたトラブルを防ぐためには、正規表現のパターンを '\\bapple\\b'（単語境界を利用）など、厳密に指定するといった工夫が有効です。
部分一致に関する注意点
正規表現を使うときは、どのようにマッチするか細かく把握しておくのが大切です。
例えば以下のコードは「数字をすべてマスクしたい」という意図で書いているとしましょう。
const text = "User ID: 12345, Phone: 090-1234-5678"; const newText = text.replace(/[0-9]/g, "*"); console.log(newText); // "User ID: *****, Phone: ***-****-****"
表面上は期待どおりに数字がすべて * に置き換わっています。
ただ、「ハイフンなど記号は残したいけれど、全角数字はマスクしなくてもいいのか」など、実際に運用するとなると想定しなかったケースが追加で発生する可能性があります。
使われる文字種が想定外に混じっていると、置換結果が正しくなくなる場合もあるため、要件に合わせてパターンを厳密に記述することが重要です。
変数や動的入力を組み合わせた文字列置換
日常的にプログラミングをしていると、ユーザー入力や動的に決定される値を使って置換することがよくあります。
例えば、ユーザーが入力したキーワードで検索し、それを別の文字に置き換えるような処理をする場合です。
このとき注意すべきは、動的入力を正規表現のパターンに埋め込む場合の書き方です。
動的パターンの指定
もし、ユーザーが入力した文字列をそのまま正規表現に渡すときは、記号などが特殊な意味を持つ可能性があるのでエスケープ処理をしておく必要があります。
例えば以下のように、ユーザーが入力する文字列を escapeRegExp() という関数でエスケープしてから正規表現を組み立てるやり方が一般的です。
function escapeRegExp(str) { return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); } const userInput = "apple."; const pattern = new RegExp(escapeRegExp(userInput), "g"); const text = "I love apple. But apple. is part of sentence."; const newText = text.replace(pattern, "orange"); console.log(newText); // "I love orange But orange is part of sentence."
ここでは、.（ドット）など特殊文字を正規表現のメタ文字として認識されないように \\. といった形に変換しています。
こうすることで、予期せぬマッチングが起きるのを防ぎつつ、動的に変化するパターンを安全に扱えるようになります。
入力チェックとの組み合わせ
また、動的に入力された値を置換するにあたっては、そもそも不正な入力がないかどうかをチェックする処理も考えられるでしょう。
実務的には、例えば「ユーザーが入力するメールアドレスらしきものだけを置換対象にする」「URL形式の文字列だけを検出して置き換える」といった流れが想定されます。
そういったときに、先に入力のバリデーションを行ってから正規表現でマッチさせると、より安全かつ的確な文字列操作ができるはずです。
複数箇所をまとめて置換したい場合
文字列を置換するとき、多くの方がまず「同じ単語が複数出てきたら全部置き換えたい」という要望を持ちます。
このような一括置換を可能にするのが、正規表現の g フラグや、別途用意された replaceAll() です。
置換対象が重複するケース
先ほど触れたとおり、replace() に正規表現を渡し、その際に g フラグを付けることで複数箇所を一度に置換できます。
ただ、重複するパターンがあっても基本的には一つひとつ順番にマッチして置換していくので、置換結果がさらに次のマッチの対象になるような状況には気をつける必要があります。
例えば「先に一部を置換した結果、次のマッチングに影響する」という連鎖反応が起こる場合です。
そうした連鎖を避けたいときは、置換結果をいったん別の文字にしてから再度別のメソッドを走らせるなど、段階を分けることもあります。
連鎖的置換を防ぐ方法
例えば以下のようなイメージです。
let text = "apple is tasty. apples are also good."; text = text.replace(/apple/g, "orange"); console.log(text); // "orange is tasty. oranges are also good."
この場合、"apples" の "apple" 部分も apple にマッチします。
結果的に "apples" が "oranges" になって連鎖的に複数形のところまで置き換わるため、「意図した通りの置換になった」とも言えますが、場合によっては予期せぬ連鎖が発生することもあります。
もし厳密に「apple」という単語だけを置換したいのであれば、単語境界 \b を活用し /\bapple\b/g のように指定すると、"apples" などは対象外にできます。
このように正規表現の指定を少し工夫するだけで、思わぬ置換ミスを防げます。
replaceAll() メソッドについて
replaceAll() は文字列内に存在する同じ文字列のすべてを置換するメソッドです。
文字列そのものを置換する場合のみ動作し、正規表現を指定する場合はエラーとなる仕様が特徴です。
つまり、正規表現を使わずに「特定の文字列すべてを一括置換したい」ときに便利なメソッドといえます。
replace() と replaceAll() の違い
replace(): 第一引数に文字列または正規表現を指定可能。正規表現を使えばgフラグで複数マッチを置換可能replaceAll(): 第一引数として文字列しか受け付けない。見つかった文字列をすべて置換
例えば以下のコードを見てみましょう。
const text = "banana, banana, BANANA"; const newText1 = text.replace("banana", "orange"); console.log(newText1); // "orange, banana, BANANA" const newText2 = text.replaceAll("banana", "orange"); console.log(newText2); // "orange, orange, BANANA"
replace() では最初に見つかった1箇所のみが置換されるのに対して、replaceAll() は "banana" が見つかった箇所すべてを置換します。
一方で、"BANANA" の大文字部分は区別されるためそのまま残ります。
大文字小文字を区別せずにすべて置換したい場合は正規表現の i フラグと g フラグを併用した replace() を使ったほうが柔軟です。
実務で使う場面と活用例
replaceAll() はたとえば、JSON形式の文字列から制御文字を取り除く場面や、マークアップ言語っぽいプレースホルダーをまとめて置き換えるときに役立ちます。
単純に文字列ベースで大量の重複箇所を置換するときは replaceAll() のほうが読みやすく、意図が明確に伝わる点もメリットです。
ただし、複雑なパターンや大文字小文字を無視した検索をしたい場合は、これまで紹介した正規表現を使った replace() のほうが自由度が高いでしょう。
置換結果の活用方法
文字列を置換したあと、その置換結果をどう使うかによって処理の流れも異なります。
基本的には「新しい文字列を変数に格納して、その後で別の処理に回す」ことが多いですが、場合によってはHTML要素に挿入したり、ログ出力したりすることもあるでしょう。
別の変数への保存
最もシンプルなのは、置換結果を新しい変数に代入して、それを関数の戻り値として渡すやり方です。
例えば、ログインユーザー名のフォーマットを整形したり、プレビュー画面用のデータを作ったりするときに、置換後の文字列を次の処理に受け渡すことになるでしょう。
そうすることで、現状のデータと将来的な変更後のデータを区別して扱うことができます。
画面表示やログ出力との連携
置換結果をそのまま画面に表示したい場合には、以下のようにDOM操作と組み合わせる例を考えられます。
const originalText = "Hello <script>alert('XSS');</script>"; // HTMLタグをエスケープして安全に表示できる状態にする const safeText = originalText.replace(/</g, "<").replace(/>/g, ">"); document.getElementById("content").textContent = safeText;
この例ではユーザーが入力した <script> タグをそのまま実行させたくないので、< と > をHTMLエンティティに変換しています。
こうしておけば、ブラウザはそれを単なる文字列として扱い、スクリプトは実行されなくなります。
ログを出力するときも同様で、文字列をなんらかの形式で整形し、セキュリティを意識しながら安全に保存しておくのが望ましいでしょう。
正規表現の高度な使い方
ここでは、より複雑な置換パターンに挑戦したい方に向けて、正規表現の高度な仕組みを簡単に紹介します。
キャプチャ機能やLookbehind、Lookaheadを使うと、単なる文字列の検索置換を超えた柔軟な操作が可能です。
キャプチャを使った置換パターン
キャプチャとは、正規表現でマッチした部分をグループ化し、そのグループを置換後の文字列に再利用できる機能です。
例えば、「テキストの中で数字があれば、その数字の前後に特定の文字を挿入する」ような処理が可能になります。
const text = "Item1 price: 100, Item2 price: 200"; const newText = text.replace(/(Item\d+) price: (\d+)/g, "$1 ⇒ $2円"); console.log(newText); // "Item1 ⇒ 100円, Item2 ⇒ 200円"
この正規表現では (Item\d+) と (\d+) の部分がキャプチャグループにあたり、置換後の文字列で $1 と $2 で参照しています。
こうすることで、マッチした部分をそのまま流用してフォーマットを変更する、という処理が容易に実現できます。
LookbehindやLookaheadの活用
LookbehindとLookaheadは、マッチの前後にある特定のパターンを条件にする機能です。
例えば、金額の数字の前に「￥」が付いていれば置換したいけれど、付いていないなら無視する、といったことができます。
ただし、一部のブラウザではサポート状況に差があるケースがあったため、利用を検討する場合はブラウザの対応状況を把握しておくと良いでしょう。
しかし最近では多くのモダンブラウザが対応してきています。
Lookbehind（先読み）やLookahead（後読み）を使うときは、正規表現が複雑になりがちなので、まずは簡単なパターンから試してみるのがおすすめです。
実務でよくある文字列置換のシーン
実務で本当によく登場する文字列置換のパターンをいくつか挙げてみます。
正規表現や replace() の活用イメージがより具体的になるかと思います。
テキストクリーニング
ユーザーが入力したコメントやチャットの内容から、不要な改行や連続したスペースを一括で置き換える処理です。
例えば複数のスペースが連続していたら1つのスペースに変える、改行コードを区切り文字に置換する、といった操作が典型的な例でしょう。
特にメッセージアプリなどではテキストの整形が欠かせないため、正規表現を使って一括変換することが多くなります。
フォーマット変換
半角カナを全角カナに統一したり、特定のパターンを日付形式（YYYY/MM/DD）に変えたりするなど、フォーマットをそろえるための置換もよく行われます。
たとえば日本語の文章に混在する英数字を、すべて半角にそろえるといった場合、正規表現を使って「全角英数字」を対象に部分的に変換することが有効でしょう。
こうした文字列変換ロジックをあらかじめ用意しておくと、複数のシステムで共通のテキスト変換が行えます。
置換処理によるパフォーマンス面への影響
大規模なデータや連続する置換処理を行う場合、性能面にも気を配る必要があります。
JavaScriptで文字列操作を大量に実行すると、メモリやCPUにそれなりの負荷がかかることがあるためです。
大量の文字列を扱う場合
大きなテキストファイルや膨大なログデータを一度に置換しようとすると、実行時間が長引くことがあります。
正規表現は便利ですが、複雑なパターンを大量に評価すると処理が遅くなる可能性があります。
もし本当に膨大なデータを扱うなら、サーバーサイドの言語でストリーム処理をしつつ置換を行うなど、アプリケーション全体の設計を見直すのが賢明です。
また、実務的には「一度で全部置換を完了させず、バッチ処理などに分割して実行する」「前処理でまとめて整形しておき、フロントエンドでは最終的な微調整のみ行う」など、パフォーマンスを考慮した実装パターンを使うことが多いでしょう。
フロントエンドで一括置換しようとすると、ブラウザがフリーズするリスクもあるので注意が必要です。
ネットワークとの連携をする場合
もしサーバーから取得したデータをJavaScriptで加工するなら、ネットワークの応答時間と合わせて処理時間も考慮する必要があります。
大量のデータを取得した後、複雑な置換処理をクライアント側で行っていると、その間ユーザーは操作レスポンスが悪く感じてしまうでしょう。
そのため、可能であればバックエンド側で事前に置換処理を行い、フロントエンドでは結果を受け取るだけにするといった設計をするのも一つの考え方です。
JavaScriptの文字列置換は便利ですが、規模や処理内容によってはパフォーマンス上の注意も必要です。
まとめ
JavaScriptの文字列置換は、日々の開発でとてもよく使われる要素です。
replace() メソッドの基本だけを押さえておくだけでも簡単な置換はできますが、より高度な正規表現や replaceAll() を組み合わせることで、複雑なパターンや大量の文字列をすばやく処理できるようになります。
改めてポイントを振り返ると以下のようになります。
replace()は文字列または正規表現を受け取り、一致した最初の1箇所だけを置換- 複数箇所を一括で置換するなら、正規表現と
gフラグを使う - 大文字小文字を無視するなら、正規表現の
iフラグも活用 replaceAll()は文字列のみを対象に、すべての該当箇所を一度に置換- キャプチャ機能やLookahead、Lookbehindなどを使うと、より柔軟な置換が可能
- 実務ではデータのクリーニングやフォーマット変換、ログのマスク処理などで頻繁に登場
- パフォーマンスや誤ったマッチングを防ぐため、正規表現の内容や処理の粒度にも注意する
初心者の方は、まずは単純な replace() や正規表現の g フラグなどを使いこなすところから始めてみると、文字列置換の便利さを実感できるでしょう。
徐々に高度な正規表現やパフォーマンス最適化の考え方を取り入れれば、実務レベルでのニーズをしっかり満たせるはずです。
この記事を参考に、ぜひJavaScriptの文字列置換を活用してみてください。