{"id":80540,"date":"2024-04-22T08:55:51","date_gmt":"2024-04-21T23:55:51","guid":{"rendered":"https://freelance.indieverse.co.jp/media/?p=80540"},"modified":"2025-11-01T16:33:55","modified_gmt":"2025-11-01T07:33:55","slug":"javascript-replace","status":"publish","type":"post","link":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace","title":{"rendered":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説"},"content":{"rendered":"

この記事では、

\n\n

という悩みを抱えている向けに、

\n\n

について解説していきたいと思います。

\n

JavaScriptで文字列を操作する：replaceメソッドの解説

\n

本セクションではJavaScriptのreplaceメソッドに焦点を当て、基本的な使い方から応用技法までを学びましょう。

\n

replaceメソッドによる文字の置換

\n

replaceメソッドを使用すると、文字列内の最初に見つかった部分文字列を、指定した文字列に置換することができます。以下のコードでは、\"Hello world!\"という文字列内の\"world\"を\"JavaScript\"に置換しています。

\n
\n
let str = \"Hello world!\";\r\n\r\nlet newStr = str.replace(\"world\", \"JavaScript\");\r\n\r\nconsole.log(newStr); // \"Hello JavaScript!\"
\n
\n

なお、replaceメソッドの基本的な構文は以下の通りです。

\n
\n
let result = str.replace(regexp|substr, newSubstr|function)
\n
\n\n

replaceAllメソッドによる全文字の置換

\n

replaceAllメソッドは、指定したパターンに一致するテキストを文書全体で置換するために使用します。これはreplaceメソッドと似ていますが、全ての一致を置換する点が異なります。

\n

以下のコードは、\"World\"という単語が複数回出現している文字列を置換する例です。replaceメソッドを使用した場合は1回目の\"World\"のみが\"JavaScript\"に置換されますが、replaceAllメソッドを使用した場合には全ての\"World\"が置換されています。

\n
\n
let str = \"Hello World! World is wonderful.\";\r\n\r\n//replaceを使用した場合\r\nlet newStr = str.replace(\"World\", \"JavaScript\");\r\n\r\nconsole.log(newStr); // \"Hello JavaScript! World is wonderful.\"\r\n\r\n//replaceAllを使用した場合\r\nlet newStrAll = str.replaceAll(\"World\", \"JavaScript\");\r\n\r\nconsole.log(newStrAll); // \"Hello JavaScript! JavaScript is wonderful.\"
\n
\n

正規表現を使用した柔軟な文字列置換

\n

正規表現は、パターンマッチングとテキスト処理の強力なツールです。JavaScriptのreplaceメソッドと組み合わせることで、柔軟な置換操作が可能になります。

\n

正規表現の基本と応用

\n

正規表現を使用することで、特定のパターンに一致するテキストの抽出や置換が簡単に行えます。例えば、全ての空白文字を除去する場合、以下のように書けます。

\n
\n
let str = \"Hello World! \";\r\n\r\nlet newStr = str.replace(/\\s+/g, \"\");\r\n\r\nconsole.log(newStr); // \"HelloWorld!\"
\n
\n

この例では、\\s+の正規表現が1つ以上の空白文字にマッチし、gフラグが全体を対象としています。その結果、全ての空白文字が除去されます。

\n

正規表現とgフラグを用いたグローバル置換

\n

正規表現にg（グローバル）フラグを付けることで、テキスト内の全てのマッチに対して置換を行うことができます。これはreplaceAllメソッドと似ていますが、より柔軟なパターンを指定できるという利点があります。

\n
\n
let str = \"The rain in SPAIN stays mainly in the plain\";\r\n\r\nlet newStr = str.replace(/ain/gi, \"0\");\r\n\r\nconsole.log(newStr); // \"The r0 in SP0 stays m0ly in the pl0\"
\n
\n

この例では、/ain/gi正規表現を使っていて、ainにマッチするすべての文字列を\"0\"に置換しています。iフラグは大文字小文字を区別しないことを意味します。

\n

replaceメソッドの応用例

\n

replaceメソッドはさまざまなシチュエーションで柔軟に活用できる非常に強力なツールです。ここでは、言語処理やデータ処理における応用例をいくつか紹介します。

\n

文字列内の特定パターンの置換

\n

ウェブ開発では、ユーザー入力やテキストデータのクリーニングにreplaceメソッドがよく使われます。特定のフォーマットに合わせるために、特定のパターンや不要な文字を除去するのに役立ちます。

\n
\n
let str = \"This is an email: example@example.com\";\r\n\r\nlet newStr = str.replace(/([a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,4})/, '<a href=\"mailto:$1\">$1</a>');\r\n\r\nconsole.log(newStr); // \"This is an email: <a href=\"mailto:example@example.com\">example@example.com</a>\"
\n
\n

この例では、Eメールアドレスに一致するパターンを、メールリンクのHTMLに置換しています。

\n

関数を使用した動的な文字列置換

\n

replaceメソッドには、第二引数に関数を指定することもできます。これにより、マッチした各部分に対して動的に置換文字列を生成することができます。

\n
\n
let str = \"10 times 20 equals 200\";\r\n\r\nlet newStr = str.replace(/\\b(\\d+)\\b/g, (match, num) => Number(num) * 2);\r\n\r\nconsole.log(newStr); // \"20 times 40 equals 400\"
\n
\n

このコードでは、数字に一致する部分を検出し、その数字を2倍に置換しています。

\n

JavaScriptのreplace関数による高度な文字列操作

\n

JavaScriptのreplace関連関数を駆使することで、編集作業やデータ処理を大幅に自動化し、効率化することができます。

\n

改行コードの置換や空白の削除

\n

テキストデータの整形や前処理では、不要な空白や改行の削除がしばしば必要になります。

\n
\n
let str = \"This\\nis a\\nmultiline\\ntext.\";\r\n\r\nlet newStr = str.replace(/\\n/g, \" \");\r\n\r\nconsole.log(newStr); // \"This is a multiline text.\"
\n
\n

この例では、改行コードを単一のスペースに置換して、テキストを1行に整形しています。

\n

数値や特殊文字の置換パターン

\n

特定の条件に基づいた数値や特殊文字の置換も、replace関数を使って簡単に実装できます。

\n
\n
let str = \"I have 100 dollars and 15 cents.\";\r\n\r\nlet newStr = str.replace(/(\\d+)/g, \"$$$1\");\r\n\r\nconsole.log(newStr); // \"I have $100 dollars and $15 cents.\"
\n
\n

このコードでは、数字に一致するすべての部分を、その前にドル記号を付加する形で置換しています。

\n

replaceとreplaceAllの違いと使い分け

\n

replaceメソッドとreplaceAllメソッドは似ていますが、replaceメソッドは最初に見つかった部分のみを置換し、replaceAllは文書全体のマッチするすべての部分を置換します。この違いを正しく理解し、それぞれの場面で適切に使い分けることが重要です。

\n

replaceメソッドとreplaceAllメソッドの比較

\n

replaceメソッドは、正規表現にgフラグを使用することでreplaceAllメソッドと同様の振る舞いをすることが可能です。しかしreplaceAllメソッドはこのフラグなしでも文書全体の置換を行います。

\n
\n
let str = \"fooBar fooBar fooBar\";\r\n\r\nconsole.log(str.replace(/foo/g, \"bar\")); // \"barBar barBar barBar\"\r\n\r\nconsole.log(str.replaceAll(\"foo\", \"bar\")); // \"barBar barBar barBar\"
\n
\n

IE11など古いブラウザでの対応策

\n

replaceAllメソッドは比較的新しいため、古いブラウザではサポートされていないことがあります。そのような場合、replaceメソッドと正規表現の組み合わせを利用することで同様の結果を得ることができます。

\n
\n
let str = \"fooBar fooBar fooBar\";\r\n\r\nlet newStr = str.replace(/foo/g, \"bar\"); // IE11でも問題なく動作する\r\n\r\nconsole.log(newStr); // \"barBar barBar barBar\"
\n
\n

また、Node.jsでreplaceAllメソッドを使用してエラーになるケースもあります。これは、replaceAllメソッドがバージョンが15からのみサポートしているためです。

\n

このようにreplaceAllメソッドはブラウザごとに互換性が異なるので注意しましょう。以下の表は、ブラウザの互換性をまとめたものです。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Chrome 85 (Released 2020-08-25)
Edge85(Released 2020-08-27)
Firefox77(Released 2020-06-02)
Opera71 (Released 2020-09-15)
Safari13.1 (Released 2020-03-24)
 Chrome Android85 (Released 2020-08-25)
Firefox for Android79 (Released 2020-07-28)
Opera Android60 (Released 2020-09-23)
Safari on iOS13.4 (Released 2020-03-24)
Samsung Internet14.0 (Released 2021-04-17)
WebView Android85 (Released 2020-08-25)
Deno1.2 (Released 2020-07-13)
Node.js15.0.0 (Released 2020-10-20)
\n

参照：MDN Web Docs: String.prototype.replaceAll()

\n

文字列操作の補助技：splitとjoinの組み合わせ

\n

時には、replaceやreplaceAllよりもsplitとjoinを組み合わせた方が直感的に問題を解決できることがあります。これは特に、特定の文字やパターンで文字列を区切り、それぞれの部分を変換した後に再組み立てしたい場合に便利です。

\n

splitとjoinによる置換の実例

\n

splitは、パターンを受け取り、String をパターン検索によって部分文字列の順序付きリストに分割し、これらの部分文字列を入れた配列を返します。またjoin は Arrayインスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。

\n

以下の例では、カンマで区切られた文字列内の数字を括弧で囲みます。

\n
\n
let str = \"1,2,3,4,5\";\r\n\r\nlet parts = str.split(\",\");\r\n\r\nlet transformedParts = parts.map(part => `(${part})`);\r\n\r\nlet newStr = transformedParts.join(\",\");\r\n\r\nconsole.log(newStr); // \"(1),(2),(3),(4),(5)\"
\n
\n

このアプローチは、元の文字列を部分的に分解し、各部分を個別に処理してから再結合する場合に特に有用です。

\n

JavaScriptの文字列操作は非常に強力で、データ処理からUIの動的変更まで幅広い用途に使用できます。本記事で紹介したreplaceメソッドを始めとする文字列操作の技術をマスターすることで、JavaScript開発の幅を広げることができるでしょう。

\n","protected":false},"excerpt":{"rendered":"

JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。

\n","protected":false},"author":105,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[192],"tags":[316],"class_list":["post-80540","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-java"],"aioseo_notices":[],"meta_description":"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ...","_links":{"self":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts/80540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts"}],"about":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/types/post"}],"author":[{"embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/users/105"}],"replies":[{"embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/comments?post=80540"}],"version-history":[{"count":10,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts/80540/revisions"}],"predecessor-version":[{"id":93419,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/posts/80540/revisions/93419"}],"wp:attachment":[{"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/media?parent=80540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/categories?post=80540"},{"taxonomy":"post_tag","embeddable":true,"href":"https://freelance.indieverse.co.jp/media/wp-json/wp/v2/tags?post=80540"}],"curies":[{"name":"wp","href":"https://api.w.org/{rel}","templated":true}]}}