{"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":"<p>この記事では、</p>\n<ul>\n<li>特定の文字列を別の文字列に置換する方法を知りたい</li>\n<li>テキスト内の全ての指定した文字や単語を置換したい</li>\n<li>正規表現を使用して複雑なパターンの文字列を置換したい方法を探している</li>\n<li>プログラミング初心者として、replace関数の基本的な使い方を学びたい</li>\n<li>JavaScriptのreplace関数とreplaceAll関数の違いと使い分けについて知りたい</li>\n</ul>\n<p>という悩みを抱えている向けに、</p>\n<ul>\n<li>JavaScriptでの文字列置換の基本から応用まで</li>\n<li>正規表現を駆使した効率的な文字列操作</li>\n<li>replace関数とreplaceAll関数の違いとその使い分け</li>\n</ul>\n<p>について解説していきたいと思います。</p>\n<h2>JavaScriptで文字列を操作する：replaceメソッドの解説</h2>\n<p>本セクションではJavaScriptの<code>replace</code>メソッドに焦点を当て、基本的な使い方から応用技法までを学びましょう。</p>\n<h3>replaceメソッドによる文字の置換</h3>\n<p><code>replace</code>メソッドを使用すると、文字列内の最初に見つかった部分文字列を、指定した文字列に置換することができます。以下のコードでは、<code>\"Hello world!\"</code>という文字列内の<code>\"world\"</code>を<code>\"JavaScript\"</code>に置換しています。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let str = \"Hello world!\";\r\n\r\nlet newStr = str.replace(\"world\", \"JavaScript\");\r\n\r\nconsole.log(newStr); // \"Hello JavaScript!\"</code></pre>\n</div>\n<p>なお、<code>replace</code>メソッドの基本的な構文は以下の通りです。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let result = str.replace(regexp|substr, newSubstr|function)</code></pre>\n</div>\n<ul>\n<li><code>regexp|substr</code>は、置換対象の文字列または正規表現パターンです。</li>\n<li><code>newSubstr|function</code>は、置換後の文字列または置換を定義する関数です。</li>\n</ul>\n<h3>replaceAllメソッドによる全文字の置換</h3>\n<p><code>replaceAll</code>メソッドは、指定したパターンに一致するテキストを文書全体で置換するために使用します。これは<code>replace</code>メソッドと似ていますが、全ての一致を置換する点が異なります。</p>\n<p>以下のコードは、<code>\"World\"</code>という単語が複数回出現している文字列を置換する例です。<code>replace</code>メソッドを使用した場合は1回目の<code>\"World\"</code>のみが<code>\"JavaScript\"</code>に置換されますが、<code>replaceAll</code>メソッドを使用した場合には全ての<code>\"World\"</code>が置換されています。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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.\"</code></pre>\n</div>\n<h2>正規表現を使用した柔軟な文字列置換</h2>\n<p>正規表現は、パターンマッチングとテキスト処理の強力なツールです。JavaScriptの<code>replace</code>メソッドと組み合わせることで、柔軟な置換操作が可能になります。</p>\n<h3>正規表現の基本と応用</h3>\n<p>正規表現を使用することで、特定のパターンに一致するテキストの抽出や置換が簡単に行えます。例えば、全ての空白文字を除去する場合、以下のように書けます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let str = \"Hello World! \";\r\n\r\nlet newStr = str.replace(/\\s+/g, \"\");\r\n\r\nconsole.log(newStr); // \"HelloWorld!\"</code></pre>\n</div>\n<p>この例では、<code>\\s+</code>の正規表現が1つ以上の空白文字にマッチし、<code>g</code>フラグが全体を対象としています。その結果、全ての空白文字が除去されます。</p>\n<h3>正規表現とgフラグを用いたグローバル置換</h3>\n<p>正規表現に<code>g</code>（グローバル）フラグを付けることで、テキスト内の全てのマッチに対して置換を行うことができます。これは<code>replaceAll</code>メソッドと似ていますが、より柔軟なパターンを指定できるという利点があります。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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\"</code></pre>\n</div>\n<p>この例では、<code>/ain/gi</code>正規表現を使っていて、<code>ain</code>にマッチするすべての文字列を<code>\"0\"</code>に置換しています。<code>i</code>フラグは大文字小文字を区別しないことを意味します。</p>\n<h2>replaceメソッドの応用例</h2>\n<p>replaceメソッドはさまざまなシチュエーションで柔軟に活用できる非常に強力なツールです。ここでは、言語処理やデータ処理における応用例をいくつか紹介します。</p>\n<h3>文字列内の特定パターンの置換</h3>\n<p>ウェブ開発では、ユーザー入力やテキストデータのクリーニングにreplaceメソッドがよく使われます。特定のフォーマットに合わせるために、特定のパターンや不要な文字を除去するのに役立ちます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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})/, '&lt;a href=\"mailto:$1\"&gt;$1&lt;/a&gt;');\r\n\r\nconsole.log(newStr); // \"This is an email: &lt;a href=\"mailto:example@example.com\"&gt;example@example.com&lt;/a&gt;\"</code></pre>\n</div>\n<p>この例では、Eメールアドレスに一致するパターンを、メールリンクのHTMLに置換しています。</p>\n<h3>関数を使用した動的な文字列置換</h3>\n<p>replaceメソッドには、第二引数に関数を指定することもできます。これにより、マッチした各部分に対して動的に置換文字列を生成することができます。<code></code></p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let str = \"10 times 20 equals 200\";\r\n\r\nlet newStr = str.replace(/\\b(\\d+)\\b/g, (match, num) =&gt; Number(num) * 2);\r\n\r\nconsole.log(newStr); // \"20 times 40 equals 400\"</code></pre>\n</div>\n<p>このコードでは、数字に一致する部分を検出し、その数字を2倍に置換しています。</p>\n<h2>JavaScriptのreplace関数による高度な文字列操作</h2>\n<p>JavaScriptのreplace関連関数を駆使することで、編集作業やデータ処理を大幅に自動化し、効率化することができます。</p>\n<h3>改行コードの置換や空白の削除</h3>\n<p>テキストデータの整形や前処理では、不要な空白や改行の削除がしばしば必要になります。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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.\"</code></pre>\n</div>\n<p>この例では、改行コードを単一のスペースに置換して、テキストを1行に整形しています。</p>\n<h3>数値や特殊文字の置換パターン</h3>\n<p>特定の条件に基づいた数値や特殊文字の置換も、replace関数を使って簡単に実装できます。<code></code></p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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.\"</code></pre>\n</div>\n<p>このコードでは、数字に一致するすべての部分を、その前にドル記号を付加する形で置換しています。</p>\n<h2>replaceとreplaceAllの違いと使い分け</h2>\n<p><code>replace</code>メソッドと<code>replaceAll</code>メソッドは似ていますが、<code>replace</code>メソッドは最初に見つかった部分のみを置換し、<code>replaceAll</code>は文書全体のマッチするすべての部分を置換します。この違いを正しく理解し、それぞれの場面で適切に使い分けることが重要です。</p>\n<h3>replaceメソッドとreplaceAllメソッドの比較</h3>\n<p><code>replace</code>メソッドは、正規表現に<code>g</code>フラグを使用することで<code>replaceAll</code>メソッドと同様の振る舞いをすることが可能です。しかし<code>replaceAll</code>メソッドはこのフラグなしでも文書全体の置換を行います。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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\"</code></pre>\n</div>\n<h3>IE11など古いブラウザでの対応策</h3>\n<p><code>replaceAll</code>メソッドは比較的新しいため、古いブラウザではサポートされていないことがあります。そのような場合、<code>replace</code>メソッドと正規表現の組み合わせを利用することで同様の結果を得ることができます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>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\"</code></pre>\n</div>\n<p>また、<code>Node.js</code><span>で<code>replaceAll</code>メソッドを使用してエラーになるケースもあります。これは、<code>replaceAll</code>メソッドがバージョンが15からのみサポートしているためです。</span></p>\n<p><span>このように<code>replaceAll</code>メソッドはブラウザごとに互換性が異なるので注意しましょう。以下の表は、ブラウザの互換性をまとめたものです。</span></p>\n<table style=\"border-collapse: collapse; width: 100%; height: 312px;\">\n<tbody>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 120px; text-align: center;\" rowspan=\"5\"><i class=\"fas fa-desktop\"></i></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>Chrome </span></td>\n<td style=\"width: 33.3333%; height: 24px;\">85<span> (Released 2020-08-25)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Edge</span></td>\n<td style=\"width: 33.3333%; height: 24px;\">85<span>(Released 2020-08-27)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Firefox</span></td>\n<td style=\"width: 33.3333%; height: 24px;\">77<span>(Released 2020-06-02)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Opera</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>71</span><span> (Released 2020-09-15)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Safari</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>13.1</span><span> (Released 2020-03-24)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 144px; text-align: center;\" rowspan=\"6\"><i class=\"fas fa-tablet-screen-button\"></i></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span> Chrome Android</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>85</span><span> (Released 2020-08-25)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Firefox for Android</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>79</span><span> (Released 2020-07-28)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Opera Android</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>60</span><span> (Released 2020-09-23)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Safari on iOS</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>13.4</span><span> (Released 2020-03-24)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Samsung Internet</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>14.0</span><span> (Released 2021-04-17)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>WebView Android</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>85</span><span> (Released 2020-08-25)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 48px; text-align: center;\" rowspan=\"2\"><i class=\"fas fa-server\"></i></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>Deno</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>1.2</span><span> (Released 2020-07-13)</span></td>\n</tr>\n<tr style=\"height: 24px;\">\n<td style=\"width: 33.3333%; height: 24px;\"><span>Node.js</span></td>\n<td style=\"width: 33.3333%; height: 24px;\"><span>15.0.0</span><span> (Released 2020-10-20)</span></td>\n</tr>\n</tbody>\n</table>\n<p>参照：<a href=\"https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/replaceAll\" target=\"_blank\" rel=\"noopener\">MDN Web Docs: String.prototype.replaceAll()</a></p>\n<h2>文字列操作の補助技：splitとjoinの組み合わせ</h2>\n<p>時には、<code>replace</code>や<code>replaceAll</code>よりも<code>split</code>と<code>join</code>を組み合わせた方が直感的に問題を解決できることがあります。これは特に、特定の文字やパターンで文字列を区切り、それぞれの部分を変換した後に再組み立てしたい場合に便利です。</p>\n<h3>splitとjoinによる置換の実例</h3>\n<p><code>split</code><span>は、パターンを受け取り、</span><code>String </code><span>をパターン検索によって部分文字列の順序付きリストに分割し、これらの部分文字列を入れた配列を返します。また<code>join</code> は <code>Array</code>インスタンスのメソッドで、配列の全要素を順に連結した新しい文字列を返します。</span></p>\n<p>以下の例では、カンマで区切られた文字列内の数字を括弧で囲みます。</p>\n<div class=\"hcb_wrap\">\n<pre class=\"prism line-numbers lang-js\" data-lang=\"JavaScript\"><code>let str = \"1,2,3,4,5\";\r\n\r\nlet parts = str.split(\",\");\r\n\r\nlet transformedParts = parts.map(part =&gt; `(${part})`);\r\n\r\nlet newStr = transformedParts.join(\",\");\r\n\r\nconsole.log(newStr); // \"(1),(2),(3),(4),(5)\"</code></pre>\n</div>\n<p>このアプローチは、元の文字列を部分的に分解し、各部分を個別に処理してから再結合する場合に特に有用です。</p>\n<p>JavaScriptの文字列操作は非常に強力で、データ処理からUIの動的変更まで幅広い用途に使用できます。本記事で紹介した<code>replace</code>メソッドを始めとする文字列操作の技術をマスターすることで、JavaScript開発の幅を広げることができるでしょう。</p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。</p>\n","protected":false},"author":1,"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":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。\" />\n\t<meta name=\"robots\" content=\"max-image-preview:large\" />\n\t<meta name=\"author\" content=\"DAI\"/>\n\t<link rel=\"canonical\" href=\"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace\" />\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" />\n\t\t<meta property=\"og:locale\" content=\"ja_JP\" />\n\t\t<meta property=\"og:site_name\" content=\"インディバースフリーランスメディア - Indieverse Freelanceの公式メディアです\" />\n\t\t<meta property=\"og:type\" content=\"article\" />\n\t\t<meta property=\"og:title\" content=\"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア\" />\n\t\t<meta property=\"og:description\" content=\"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。\" />\n\t\t<meta property=\"og:url\" content=\"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace\" />\n\t\t<meta property=\"article:published_time\" content=\"2024-04-21T23:55:51+00:00\" />\n\t\t<meta property=\"article:modified_time\" content=\"2025-11-01T07:33:55+00:00\" />\n\t\t<meta name=\"twitter:card\" content=\"summary\" />\n\t\t<meta name=\"twitter:title\" content=\"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア\" />\n\t\t<meta name=\"twitter:description\" content=\"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。\" />\n\t\t<script type=\"application/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\/\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#blogposting\",\"name\":\"\\u3010JavaScirpt\\u3011replace\\u5b8c\\u5168\\u30de\\u30cb\\u30e5\\u30a2\\u30eb | \\u7f6e\\u63db, \\u62bd\\u51fa, \\u30e1\\u30bf\\u6587\\u5b57\\u306e\\u5229\\u7528\\u306a\\u3069\\u3092\\u89e3\\u8aac - \\u30a4\\u30f3\\u30c7\\u30a3\\u30d0\\u30fc\\u30b9\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u30e1\\u30c7\\u30a3\\u30a2\",\"headline\":\"\\u3010JavaScirpt\\u3011replace\\u5b8c\\u5168\\u30de\\u30cb\\u30e5\\u30a2\\u30eb | \\u7f6e\\u63db, \\u62bd\\u51fa, \\u30e1\\u30bf\\u6587\\u5b57\\u306e\\u5229\\u7528\\u306a\\u3069\\u3092\\u89e3\\u8aac\",\"author\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\"},\"publisher\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/#organization\"},\"datePublished\":\"2024-04-22T08:55:51+09:00\",\"dateModified\":\"2025-11-01T16:33:55+09:00\",\"inLanguage\":\"ja\",\"mainEntityOfPage\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#webpage\"},\"isPartOf\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#webpage\"},\"articleSection\":\"javascript, Java\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#listItem\",\"position\":1,\"name\":\"\\u30db\\u30fc\\u30e0\",\"item\":\"https:\\/\\/freelance.dividable.net\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming#listItem\",\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming#listItem\",\"position\":2,\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\",\"item\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript#listItem\",\"name\":\"javascript\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#listItem\",\"name\":\"\\u30db\\u30fc\\u30e0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript#listItem\",\"position\":3,\"name\":\"javascript\",\"item\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#listItem\",\"name\":\"\\u3010JavaScirpt\\u3011replace\\u5b8c\\u5168\\u30de\\u30cb\\u30e5\\u30a2\\u30eb | \\u7f6e\\u63db, \\u62bd\\u51fa, \\u30e1\\u30bf\\u6587\\u5b57\\u306e\\u5229\\u7528\\u306a\\u3069\\u3092\\u89e3\\u8aac\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming#listItem\",\"name\":\"\\u30d7\\u30ed\\u30b0\\u30e9\\u30df\\u30f3\\u30b0\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#listItem\",\"position\":4,\"name\":\"\\u3010JavaScirpt\\u3011replace\\u5b8c\\u5168\\u30de\\u30cb\\u30e5\\u30a2\\u30eb | \\u7f6e\\u63db, \\u62bd\\u51fa, \\u30e1\\u30bf\\u6587\\u5b57\\u306e\\u5229\\u7528\\u306a\\u3069\\u3092\\u89e3\\u8aac\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/category\\/programming\\/javascript#listItem\",\"name\":\"javascript\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#organization\",\"name\":\"Indieverse Freelance\",\"description\":\"Indieverse Freelance\\u306e\\u516c\\u5f0f\\u30e1\\u30c7\\u30a3\\u30a2\\u3067\\u3059\",\"url\":\"https:\\/\\/freelance.dividable.net\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\",\"url\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster\",\"name\":\"DAI\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#webpage\",\"url\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace\",\"name\":\"\\u3010JavaScirpt\\u3011replace\\u5b8c\\u5168\\u30de\\u30cb\\u30e5\\u30a2\\u30eb | \\u7f6e\\u63db, \\u62bd\\u51fa, \\u30e1\\u30bf\\u6587\\u5b57\\u306e\\u5229\\u7528\\u306a\\u3069\\u3092\\u89e3\\u8aac - \\u30a4\\u30f3\\u30c7\\u30a3\\u30d0\\u30fc\\u30b9\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u30e1\\u30c7\\u30a3\\u30a2\",\"description\":\"JavaScript\\u306ereplace\\/replaceAll\\u306e\\u9055\\u3044\\u3068\\u4f7f\\u3044\\u5206\\u3051\\u3001\\u6b63\\u898f\\u8868\\u73fe\\u3084g\\u30fbi\\u30d5\\u30e9\\u30b0\\u3001\\u95a2\\u6570\\u7f6e\\u63db\\u307e\\u3067\\u57fa\\u672c\\u304b\\u3089\\u5fdc\\u7528\\u3092\\u30b3\\u30fc\\u30c9\\u4f8b\\u3067\\u89e3\\u8aac\\u3057\\u307e\\u3059\\u3002\\u521d\\u5fc3\\u8005\\u3067\\u3082\\u5b89\\u5fc3\\u306e\\u6587\\u5b57\\u5217\\u7f6e\\u63db\\u30fb\\u62bd\\u51fa\\u30fb\\u30e1\\u30bf\\u6587\\u5b57\\u306e\\u4f7f\\u3044\\u65b9\\u3092\\u7db2\\u7f85\\u3057\\u307e\\u3059\\u3002\",\"inLanguage\":\"ja\",\"isPartOf\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/programming\\/javascript\\/javascript-replace#breadcrumblist\"},\"author\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\"},\"creator\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/author\\/wpmaster#author\"},\"datePublished\":\"2024-04-22T08:55:51+09:00\",\"dateModified\":\"2025-11-01T16:33:55+09:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\/\\/freelance.dividable.net\\/#website\",\"url\":\"https:\\/\\/freelance.dividable.net\\/\",\"name\":\"\\u30a4\\u30f3\\u30c7\\u30a3\\u30d0\\u30fc\\u30b9\\u30d5\\u30ea\\u30fc\\u30e9\\u30f3\\u30b9\\u30e1\\u30c7\\u30a3\\u30a2\",\"description\":\"Indieverse Freelance\\u306e\\u516c\\u5f0f\\u30e1\\u30c7\\u30a3\\u30a2\\u3067\\u3059\",\"inLanguage\":\"ja\",\"publisher\":{\"@id\":\"https:\\/\\/freelance.dividable.net\\/#organization\"}}]}\n\t\t</script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア","description":"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。","canonical_url":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https://schema.org","@graph":[{"@type":"BlogPosting","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#blogposting","name":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア","headline":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説","author":{"@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author"},"publisher":{"@id":"https://freelance.indieverse.co.jp/media/#organization"},"datePublished":"2024-04-22T08:55:51+09:00","dateModified":"2025-11-01T16:33:55+09:00","inLanguage":"ja","mainEntityOfPage":{"@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#webpage"},"isPartOf":{"@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#webpage"},"articleSection":"javascript, Java"},{"@type":"BreadcrumbList","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/#listItem","position":1,"name":"ホーム","item":"https://freelance.indieverse.co.jp/media/","nextItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming#listItem","name":"プログラミング"}},{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming#listItem","position":2,"name":"プログラミング","item":"https://freelance.indieverse.co.jp/media/category/programming","nextItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming/javascript#listItem","name":"javascript"},"previousItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/#listItem","name":"ホーム"}},{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming/javascript#listItem","position":3,"name":"javascript","item":"https://freelance.indieverse.co.jp/media/category/programming/javascript","nextItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#listItem","name":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説"},"previousItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming#listItem","name":"プログラミング"}},{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#listItem","position":4,"name":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説","previousItem":{"@type":"ListItem","@id":"https://freelance.indieverse.co.jp/media/category/programming/javascript#listItem","name":"javascript"}}]},{"@type":"Organization","@id":"https://freelance.indieverse.co.jp/media/#organization","name":"Indieverse Freelance","description":"Indieverse Freelanceの公式メディアです","url":"https://freelance.indieverse.co.jp/media/"},{"@type":"Person","@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author","url":"https://freelance.indieverse.co.jp/media/author/wpmaster","name":"DAI"},{"@type":"WebPage","@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#webpage","url":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace","name":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア","description":"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。","inLanguage":"ja","isPartOf":{"@id":"https://freelance.indieverse.co.jp/media/#website"},"breadcrumb":{"@id":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace#breadcrumblist"},"author":{"@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author"},"creator":{"@id":"https://freelance.indieverse.co.jp/media/author/wpmaster#author"},"datePublished":"2024-04-22T08:55:51+09:00","dateModified":"2025-11-01T16:33:55+09:00"},{"@type":"WebSite","@id":"https://freelance.indieverse.co.jp/media/#website","url":"https://freelance.indieverse.co.jp/media/","name":"インディバースフリーランスメディア","description":"Indieverse Freelanceの公式メディアです","inLanguage":"ja","publisher":{"@id":"https://freelance.indieverse.co.jp/media/#organization"}}]},"og:locale":"ja_JP","og:site_name":"インディバースフリーランスメディア - Indieverse Freelanceの公式メディアです","og:type":"article","og:title":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア","og:description":"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。","og:url":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace","article:published_time":"2024-04-21T23:55:51+00:00","article:modified_time":"2025-11-01T07:33:55+00:00","twitter:card":"summary","twitter:title":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説 - インディバースフリーランスメディア","twitter:description":"JavaScriptのreplace/replaceAllの違いと使い分け、正規表現やg・iフラグ、関数置換まで基本から応用をコード例で解説します。初心者でも安心の文字列置換・抽出・メタ文字の使い方を網羅します。"},"aioseo_meta_data":{"post_id":"80540","title":null,"description":null,"keywords":null,"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":{"id":"#aioseo-article-67f5c8ceb9b72","slug":"article","graphName":"Article","label":"記事","properties":{"type":"BlogPosting","name":"#post_title","headline":"#post_title","description":"#post_excerpt","image":"","keywords":"","author":{"name":"#author_name","url":"#author_url"},"dates":{"include":true,"datePublished":"","dateModified":""}}},"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"}}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"limit_modified_date":false,"created":"2024-04-15 11:33:37","updated":"2025-09-09 01:19:53","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https://freelance.indieverse.co.jp/media/\" title=\"ホーム\">ホーム</a>\n\t\t</span><span class=\"aioseo-breadcrumb-separator\">»</span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https://freelance.indieverse.co.jp/media/category/programming\" title=\"プログラミング\">プログラミング</a>\n\t\t</span><span class=\"aioseo-breadcrumb-separator\">»</span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https://freelance.indieverse.co.jp/media/category/programming/javascript\" title=\"javascript\">javascript</a>\n\t\t</span><span class=\"aioseo-breadcrumb-separator\">»</span><span class=\"aioseo-breadcrumb\">\n\t\t\t【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説\n\t\t</span></div>","aioseo_breadcrumb_json":[{"label":"ホーム","link":"https://freelance.indieverse.co.jp/media/"},{"label":"プログラミング","link":"https://freelance.indieverse.co.jp/media/category/programming"},{"label":"javascript","link":"https://freelance.indieverse.co.jp/media/category/programming/javascript"},{"label":"【JavaScirpt】replace完全マニュアル | 置換, 抽出, メタ文字の利用などを解説","link":"https://freelance.indieverse.co.jp/media/programming/javascript/javascript-replace"}],"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/1"}],"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}]}}