JavaScript replaceとは？使い方や学習方法も紹介

「JavaScript replaceはどのように使うの？」
「JavaScript replaceで正規表現を使えるようになりたい！」
「replaceを使ってもうまく表示できない…」

この記事に訪れたあなたはこのような悩みを持っていませんか？

文字を置き換えるのに便利なreplaceは、正規表現を使うといろんな置き換えができるようになります。しかし正規表現を使うのは難しく、上手く表示ができず諦めてしまう方も多くいるでしょう。

そこで今回はJavaScript replaceの使い方や注意点を紹介！正規表現について、サンプルコードと合わせて解説します。

具体的な内容は以下の通りです。

この記事を読めば、replaceや正規表現をマスターできるようになりますよ。

JavaScript replaceとは？

JavaScript replaceは指定した文字を別の文字に置き換える機能です。コードを書いていると、「文を書き換えて表示させたいな…」と思う場面はありませんか？

こういったときにreplaceが役に立ちます。どのように使われるのか、サンプルコードを見てみましょう。

let text = "Hello world"
console.log(text.replace("world","island"))

// 実行結果
Hello island

上記のコードの2行目を見ると、replaceが使われていますね。

第一引数に変換する文を、第二引数に変換したい文を入れます。

実行してみると、しっかりとworldがislandに置き換わりましたね。

「Helloも一緒に別の文字に置き換えたいな…」という人は、replaceの後ろにreplaceを付けるとできますよ。

let text = "Hello world"
console.log(text.replace("Hello","Good morning").replace("world","island"))

// 実行結果
Good morning island

まずは最初のreplaceが実行されて、Helloが別の文字に置き換わります。そして次のreplaceが実行されて、worldが別の文字に置き換わるんですね。

正規表現を使ってreplaceする方法

replaceは別の文字に置き換えてくれますが、指定した1か所しか置き換えてくれません。

長い文章で、たくさんの文字を置き換えたいとなったとき、replaceが多くなって見づらくなってしまいますよね。

そんな時に役立つのが正規表現です。正規表現を使えば、以下の内容を1回のreplaceで表せるようになりますよ。

それぞれポイントを押さえながら解説していきますね。

すべての指定の文字を置き換える

今までのreplaceは最初の1か所のみを置き換えるので、すべての文字を置き換えたいときには何回もreplaceを付けなくてはいけません。

「もっと簡単に置き換えられないかな…」と困っている人は「g」を使ってみましょう。

let text = "abcabcabcdefAbc"
console.log(text.replace(/ab/g,"cd"))

// 実行結果
cdccdccdcdefAbc

2行目を見ると、変換する文字の周りを「/」で括って最後に「g」を付けていますね。

これが正規表現の1つです。

「g」を付けることによって、text文にあるすべてのabが変換したい文字に置き換わってくれるんですね。

大文字小文字を区別せずに置き換える

「すべての指定の文字を置き換える」では、すべてのabを置き換えていました。ですが、最後にあるAbは置き換えてくれません。

もしあなたが「大文字のアルファベットも一緒に置き換えて欲しい！」と思ったなら、「i」を使ってreplaceしましょう。

let text = "abcabcabcdefAbc"
console.log(text.replace(/ab/gi,"cd"))

// 実行結果
Cdccdccdcdefcdc

実行すると、しっかりと最後のAbまで置き換えてくれましたね。

「/」の後ろには「gi」がついています。まずは「g」で全ての文字を指定して、「i」で大文字と小文字を区別しないように置き換えているんですね。

ちなみに「ig」でも同じような結果になります。順番は特に気を付けるポイントは無いので、あなたが見やすい方で書けば問題ありません。

一番後ろの文字を置き換える

一番最後の文字を置き換える方法もあります。以下のサンプルコードを見てみましょう。

let text = "abcabcabcdefAbc"
console.log(text.replace(/bc$/,"cd"))

// 実行結果
abcabcabcdefAcd

実行すると最後のbcが㏅に置き換わっていますね。2行目を見ると、「$」がbcの後ろについています。

「$」をつけると、末尾から変換する文字を探し、変換したい文字に置き換えてくれるんですね。

先頭から変換する文字を探す方法もあり、「^」を使います。

let text = "abcabcabcdefAbc"
console.log(text.replace(/^ab/,"cd"))

// 実行結果
cdcabcabcdefAbc

気を付ける点は、先頭か末尾の文字だけしか置き換えないところ。変換する文字を「/ab$/」にして実行すると、実行結果は全く変わりません。

先頭か末尾の文字が変換する文字ではない場合、文字の置き換えは発生しないので注意してくださいね。

複数の文字列を置き換える

「g」を使えば全ての指定した文字を置き換えてくれますが、指定する文字が複数ある場合はどうすればいいのでしょうか？

複数の文字列を指定したいときは「|」を使うといいでしょう。

let text = "abcabcabcdefAbc"
console.log(text.replace(/ab|de/g,"cd"))

// 実行結果
cdccdccdccdfAbc

2行目の変換する文字を見てみると、「/ab|de/g」と縦長の棒が入っているのがわかります。

「|」は変換する文字を複数指定でき、「|」を2回以上使うと3個以上の文字を指定できるようになるんですね。

任意の1文字や2文字以上を指定して置き換える

今までは変換する文字を直接指定して置き換えていましたが、任意の文字を指定して変換することもできます。

「文字列にb…が入っていたら変換してほしい！」と思ったら「.」を使うといいですよ。

let text = "abcabcabcdefAbc"
console.log(text.replace(/.b/g,"cd"))

// 実行結果
cdccdccdcdefcdc

実行するとabとAbが変換したい文字に置き換わっていますね。変換したい文字に「.」を入れると、任意の1文字を指定してくれるんです。

任意の2文字以上を指定したいなら「.*」を入れましょう。

let text = "abcabcabcdefAbc"
console.log(text.replace(/a.*a/g,"cd"))

// 実行結果
cdbcdefAbc

実行するとabcabcaが変換したい文字に置き換わっていますね。

ただし最初に見つかったaから、一番最後に見つかったaを置き換えます。置き換わる文字がabcaではない点に注意しましょう。

$1や$2を使って置き換える

「時間の表記を変えたいな…」と思ったことはありませんか？正規表現を使ったreplaceで時間の表記を変えれますよ。

let text = "2021年9月6日　13:36"
console.log(text.replace(/(\d+):(\d+)/g,"$1時$2分"))

// 実行結果
2021年9月6日　13時36分

実行してみると、違った表記で出力されましたね。どのようにして表記が変わったのか細かく見ていきます。

まずは変換する文字を見てみると、「/(\d+):(\d+)/g」となっています。(\d+)は数字を表しているので、ここでは13:36が変換する文字になるんですね。

そして変換したい文字を見ると、「”$1時$2分”」となっています。

$1や$2があり、実行結果から$1には13が、$2には36が入っていることがわかりました。

ここで変換する文字に注目してみましょう。一つ目の(\d+)には13が、(\d+)には36が入っていますよね。

つまり最初の()には$1が、次の()には$2が対応しているんです。

$1や$2を使った正規表現は、()を使って対応させると覚えておくといいでしょう。

JavaScript replaceの使い方

正規表現を使うとreplaceはいろんな置き換えができるんですね。次は正規表現でreplaceを使ってみましょう。

サンプルコードを載せますので、「この問題がわからなかった…」と思った人は、どのようにして動いているのか見ながら考えてみてくださいね。

使用例1：アルファベットの文字を取り除く

まずは以下の配列からアルファベットを取り除いてみましょう。

let list = ["田中a","鈴木abc","西川def","佐藤Abc"]

配列のすべての要素にアルファベットがあるため、for文でアルファベットを取り除けばよさそうですね。

replaceには文字を置き換えるだけでなく、文字を取り除くこともできます。

変換したい文字を「””」にすると、変換したい文字の部分だけを消せるんですね。

これらを踏まえて、作成したコードが以下のようになります。

let list = ["田中a","鈴木abc","西川def","佐藤Abc"]
for(let i=0; i<list.length; i++){
list[i] = list[i].replace(/(\w+)/,"")
}
console.log(list)

// 実行結果
[ '田中', '鈴木', '西川', '佐藤' ]

変換したい文字を見ると、「/(\w+)/」となっていますね。(\w+)はアルファベットを指定しています。最後の要素にはAbcがありますが、(\w+)は大文字も含まれるので「i」を付ける必要はありません。

最後にlistを出力してアルファベットが取り除ければ成功です。

使用例2：全ての”/”を置き換える

次は以下の配列にある「/」をさんに置き換えてみましょう。

let list = ["田中/","鈴木/","西川//","佐藤///"]

「/」をさんに置き換えるだけなら、変換した文字を「”/”,”さん”」にすれば解決できます。しかし「西川//」のように複数ある場合はすべての「/」を取り除けないので、正規表現を使う必要があります。

ところが正規表現を使うと、「/ / /」のように「/」が続いてエラーが起きてしまいました。「もしかして/は変換できないのかな？」と疑問に思ってしまいますが、「/」は「[]」を使うと置き換えられますよ。

let list = ["田中/","鈴木/","西川//","佐藤///"]
for(let i=0; i<list.length; i++){
list[i] = list[i].replace(/[/].*/,"さん")
}
console.log(list)

// 実行結果
[ '田中さん', '鈴木さん', '西川さん', '佐藤さん' ]

実行すると、しっかりと「/」がすべて取り除かれ、さんが後ろにつきました。

「[/].」のように後ろに「.」を付けることによって、1文字以上の/が指定の対象となってすべての「/」が置き換えられるわけなんですね。

使用例3：一番最後の指定した文字を置き換える

次は以下の文章で、最後の人民だけを国民に変えてみましょう。

let text = “人民の人民による人民のための”

今までは末尾の文字列を置き換えることをしました。しかし今回は末尾ではなく、最後の人民を置き換えるので「$」では使えません。

ではどのようにして、最後の人民を置き換えるのでしょうか？最後の人民を置き換えるには、「$1」や「.*」を利用しましょう。

let text = "人民の人民による人民のための"
text = text.replace(/(.*)人民/,"$1国民")
console.log(text)

// 実行結果
人民の人民による国民のための

実行すると、最後の人民が国民に置き換わっていますね。変換したい文字を見てみると「/(.*)人民/」となっています。

「.」は2文字以上の文字列を指していました。また後ろに人民を付けていますが、「(.)人民」は最後の人民までを指すと解説しましたね。

変換する文字は「”$1国民”」になっています。ここで$1は最後の人民までを指していた「(.*)」が入っていました。

結果として最後の人民が国民に置き換わっているようになるわけなんですね。

使用例4：()の中以外の句読点を取り除く

次は以下の文章から、()の外にある句読点を取り除いてみましょう。

let text = "彼は、あれは何だったのか気になった。(しかし、追及はしなかった。)"

句読点を取り除くには「/[、。]/g」でできました。[、。]は「、」と「。」を指定するので、ここではすべての句読点が入るわけなんですね。

ですがこのままだと、()の中の句読点も取り除かれてしまいます。どうすれば()の中身は句読点が残り、()の外の句読点は取り除けるのでしょうか？

ポイントは()の中にある句読点か条件を立てることです。以下のコードを見てみましょう。

function comp(n){
if(n.length == 1) return ""
return n
}

let text = "彼は、あれは何だったのか気になった。(しかし、追及はしなかった。)"
text = text.replace(/([(].*[)]|[、。])/g,comp)
console.log(text)

// 実行結果
彼はあれは何だったのか気になった(しかし、追及はしなかった。)

一体どんな処理がされているのか、細かく見ていきますね。

7行目の変換したい文字を見ると「/([(].[)]|[、。])/g」となっています。「[(].[)]」は()とその中身の文章、「[、。]」は句読点を指していました。

そして「|」は複数の文字を指定することなので、ここでは()の部分と、句読点を指すんですね。

また変換する文字には関数compが指定されています。関数compを見てみるとnが1文字か2文字以上かで返ってくる値を決めていますね。

このnは変換したい文字で受け取った文字列が入ってくるんです。たとえば最初に「、」や「。」を受け取り、それが1文字なので「””」が返ってきます。

一方「(しかし、…)」を受け取ったとき、2文字以上なのでそのままの文字が返ってくるんです。

結果として()の中の句読点は取り除かず、それ以外の句読点だけを取り除けるんですね。

JavaScript replaceの注意点

replaceは最初の文字だけしか置き換えないなどの注意点がありますが、それ以外にも気を付けないといけない点もあります。

「なぜかエラーが出たり、表示されなかったりする…」と困っている人は以下の点に意識してみましょう。

それぞれ解決策を載せながら解説しますね。

注意点1：書き換え後は変数にしないと反映されない

まずは以下のコードを見てみましょう。

let text = "Hello world"
text.replace("world","island")
console.log(text)

// 実行結果
Hello world

実行するとreplaceしたのにもかかわらず、表示された文は元の文章と変わっていません。
なぜなのかはとても簡単で、結果を変数に代入していないからです。

一見replaceをするとそのまま文に反映されそうですが、変数に代入しないといけないんですね。上記のコードを修正すると以下のものになります。

let text = "Hello world"
let kekka = text.replace("world","island")
console.log(kekka)

// 実行結果
Hello island

新しく変数を作らなくても、text変数を使って更新することもできます。ただし変数をconstで定義している場合はエラーが起きてしまうので注意しましょう。

注意点2：replaceAll()やreplaceFirst()は使えない

Javaを触ったことがある人なら、replaceAll()やreplaceFirst()を使ったことがあるでしょう。

replaceAll()はすべての指定した文字を変換してくれるもの、replaceFirst()は最初に指定した文字を変換してくれます。

Javaを触ったことがある人は「JavaScriptでもreplaceAll()が使えるのかな？」と思いますよね。

では実際に使えるのか、試してみましょう。

let text = "abcabcabcdefAbc"
let kekka = text.replaceAll("ab","cd")
console.log(kekka)

// 実行結果
/workspace/Main.js:6
let kekka = text.replaceAll("ab","cd")
^
TypeError: text.replaceAll is not a function

実行するとタイプエラーが起きてしまいました。JavaScriptではreplaceAll()やreplaceFirst()が使えないんですね。

もしJavaScriptですべての指定した文字を置き換えたいなら、正規表現を使ってすべての文字を変換しましょう。

let text = "abcabcabcdefAbc"
let kekka = text.replace(/ab/g,"cd")
console.log(kekka)

// 実行結果
cdccdccdcdefAbc

JavaScript replaceを学習する方法

replaceを使いこなせるといろいろな置き換えができて便利ですが、使いこなせるようになるには学習が必要です。

「置き換えをマスターできるようになりたい！」と思ったあなたは以下の学習方法を試してみましょう。

それぞれ学習するときのポイントを合わせて解説していきますね。

本で学習・勉強する

JavaScriptを学習したい人に一番おすすめなのは、本で学習する方法です。

JavaScriptの参考書なら、replaceの使い方や正規表現についても解説されています。他にもJavaScriptを一通り学べるので、独学にも向いていますよ。

わからない問題があれば、どのように動いているのか1行ずつ見て理解するといいでしょう。コードはたくさん見て理解するほどスキルが身につくので自然にコードが書けるようになるんですね。

また「わからないから、やる気が起きない…」と挫折する前に、JavaScriptに詳しい人に質問することですぐに解決できることもありますよ。

おすすめの参考書は以下の記事で紹介しています。気になった人はぜひ参考にしてみてくださいね。

サイトで学習・勉強する

サイトならreplaceや正規表現について詳しく解説しているサイトも多くありますよ。

例えば「正規表現のgはどうやって使うんだっけ？」と疑問に思ったときは調べるとすぐに出てきます。

具体的なサンプルコードが載っていますので、すぐに「こう使うのか！」と解決できるのはとても便利ですね。

またJavaScriptを一通り学べるサイトもあり、以下のサイトは無料でJavaScriptを学べるんですね。お金を節約したい人にはとてもおすすめできる方法ですよ。

さらに「正規表現で使えるものを一覧で見たい！」という人は以下のサイトを参考にしてみてください。一覧に載っているものはすべて覚える必要はありませんので、replaceで正規表現を使いたいときに見るといいでしょう。

参考正規表現サンプル集 – MEGASOFTMEGASOFT

まとめ

今回はJavaScript replaceについて解説しました。

正規表現はとても難しく、一度記事を読んだだけでは使いこなすのは難しいでしょう。しかしすべてを覚える必要はありません。

正規表現でわからないことがあればその都度調べることで、自然に覚えていきますからね。初めてreplaceを知った人は、「こんな使い方ができるんだ！」程度に思ってもらって問題ないでしょう。

ですが、正規表現を使えた方が便利なのは確かです。replaceの使い方がわかったら、この記事に載っているサンプルコードで正規表現がどのように使われているかを理解しましょう。

よりreplaceを使いこなせるためのスキルが身につきますよ。