JavaScriptのreplaceの使い方: 文字列を特定の文字列で置き換える
- 作成日: 2020-08-17
- 更新日: 2023-12-28
- カテゴリ: JavaScript
JavaScriptのreplaceの使い方
JavaScriptの文字列(String
)のメソッドにreplace()
があります。
これは文字列の中の特定の部分を、指定した文字列で置き換えるメソッドです。
たとえば↓のように使います。
// 'cat'を'dog'に置き換え
const str = 'This is a cat'
const result = str.replace('cat', 'dog')
console.log(result)
// This is a dog
この記事ではreplace()
メソッドについて↓のコンテンツを見ていきたいと思います。
- 文字列の置き換えとは何なのか?
- replaceの引数
- 普通の文字列による置き換え
- 正規表現による置き換え
- 正規表現による複数置き換え(gフラグ)
- 正規表現による小文字/大文字の無視(iフラグ)
- 置き換え文字列に使える特殊なパターン
- マッチした文字列の交換
- 関数による置き換え
- replaceの使用例
- 問題
文字列の置き換えとは何なのか?
プログラミングでは「文字列」というデータを扱うことが多いです。
文字列とは、可変長または変更不可なデータ構造で、文字が並んでいるものです。
文字列はプログラミング言語における基本的なデータ型で、いろいろなシーンで使われます。
文字列にはいろいろなメソッドがありますが、replace()
はその中のメソッドの1つです。
文字列の置き換えとは、文字列の中の特定の文字列を、別の文字列で置き換えることです。
たとえばThe Big Fat Cat
という文字列があるとします。
この文字列の中のCat
という文字列を別の文字列、たとえばDog
で置き換えたいとします。
そういう場合はreplace()
に置き換え対象の文字列にCat
を指定し、置き換え後の文字列にDog
を指定します。
置き換えられたThe Big Fat Cat
という文字列はThe Big Fat Dog
になり、置き換えが完了します。
このように文字列の置き換えを使うと、すでにある文字列を加工して別の文字列を得ることができます。
文字列置き換えのアルゴリズム
文字列の置き換えは色々なシーンで使われますが、その中でも文字列を解析するプログラムでは非常にたくさん使われる処理です。
そのため処理速度が求められるので、置き換え対象の文字列を検索するアルゴリズムなど、いろいろと考えられています。
文字列検索のアルゴリズムとしては「ボイヤー-ムーア法」などが有名です。
JavaScriptのreplace()
が使っている内部のアルゴリズムについては調べましたが、何を使っているのかわかりませんでした。
しかしおそらく高速なアルゴリズムが使われていることでしょう。
🦝 < 知っている人がいたらコメントで教えて下さい
replaceの引数
文字列のメソッドreplace
は2つの引数を取ります。
- 第1引数: 置き換え対象の文字列(または正規表現)
- 第2引数: 置き換え後の文字列(または関数)
つまりreplace
を使う時、以下のような使用パターンがあることになります。
'文字列'.replace('置き換え対象の文字列', '置き換え後の文字列')
// または
'文字列'.replace(/正規表現/, '置き換え後の文字列')
// または
'文字列'.replace(/正規表現/, (match, offset, string) => {
})
単純に文字列に対して文字列で置き換えたい場合は↓のようにreplace()
を使います。
'文字列'.replace('置き換え対象の文字列', '置き換え後の文字列')
文字列に対して正規表現で文字列を置き換えたい場合は↓のようにreplace()
を使います。
'文字列'.replace(/正規表現/, '置き換え後の文字列')
正規表現による置き換えで具体的な指定をしたい場合は↓を使います。
'文字列'.replace(/正規表現/, (match, offset, string) => {
})
これらの各種のreplace()
の使い方については後述していきます。
普通の文字列による置き換え
普通の文字列を使って置き換えをする場合、replace
の第1引数と第2引数に文字列を指定します。
// 'bird'を'zoo'に置き換え
const str = 'This is a bird'
const result = str.replace('bird', 'zoo')
console.log(result)
// This is a zoo
replace
の第1引数に普通の文字列を指定した場合、置き換えは最初に出現した文字列に対してのみ行われます。
↓を見てもわかるように複数の文字列の置き換えはしません。
// 最初に現れた'bird'を'cat'に置き換え
const str = 'bird and dog and bird'
const result = str.replace('bird', 'cat')
console.log(result)
// cat and dog and bird
複数の置き換えをしたい場合は第1引数に正規表現を指定します。
正規表現による置き換え
正規表現による置き換えをする場合は、第1引数に正規表現を指定します。
正規表現はスラッシュ(/
)で囲んで、その中にパターンを書きます。
// 最初に現れた'cat'を'dog'に置き換え
const str = 'This is a cat. That is a cat'
const result = str.replace(/cat/, 'dog')
console.log(result)
// This is a dog. That is a cat
正規表現はg
フラグを用いない場合、最初にマッチした文字列だけを置き換えます。
正規表現による複数置き換え(gフラグ)
複数のマッチした文字列を置き換えたい場合は、正規表現にg
(global
)フラグを加えます。
こうするとマッチしたすべての文字列に対して置き換えが行われます。
// 複数の'cat'を'dog'に置き換え
const str = 'This is a cat. That is a cat'
const result = str.replace(/cat/g, 'dog')
console.log(result)
// This is a dog. That is a dog
正規表現による小文字/大文字の無視(iフラグ)
小文字と大文字の両方にマッチさせたい場合は、正規表現にi
(ignore
)フラグを加えます。
以下はg
フラグと組み合わせた場合です。
cat
とCAT
の両方にマッチします。
const str = 'The cat says "I AM CAT!"'
const result = str.replace(/cat/gi, 'dog')
console.log(result)
// The dog says "I AM dog!"
置き換え文字列に使える特殊なパターン
replace
の第2引数の置き換え文字列には↓のようなパターンが使えます。
- $$ ... "$" の挿入。
- $& ... マッチした部分文字列の挿入。
- $' ... マッチした部分文字列の直後の文字列の部分を挿入。
- $` ... マッチした部分文字列の直前の文字列の部分を挿入。
- $n ... 0 ~ 100 未満の整数。第一引数が RegExp オブジェクトだった場合に n 番目の括弧でキャプチャされた文字列を挿入。インデックスは 1 始まり。
マッチした文字列の交換
マッチした文字列を交換したい場合は正規表現と置き換え文字列に$1
や$2
を使います。
const str = 'Cat and Dog'
const result = str.replace(/(cat) and (dog)/gi, '$2 and $1')
console.log(result)
// Dog and Cat
関数による置き換え
replace
の第2引数には関数を指定できます。
関数の戻り値が置き換え後の文字列になります。
この関数は↓のような引数を取ります。
- match: マッチした文字列
- p1: replaceの第1引数がRegExpオブジェクトだった場合に渡される対応文字列
- p2:
- ...
- offset: マッチした文字列のオフセット
- string: 処理中の文字列全体
この関数の仕様はぱっと見よくわかりませんが、p1
, p2
, ...
は省略される場合があるということを覚えておけば大丈夫です。
つまり↓のような場合、関数の引数はmatch
, offset
, string
のみになります。
const str = 'The cat'
const result = str.replace(/cat/, (match, offset, string) => {
console.log(`match[${match}] offset[${offset}] string[${string}]`)
// match[cat] offset[4] string[The cat]
return 'dog'
})
console.log(result)
// The dog
逆にRegExp
オブジェクト、例えば\w
を指定した場合は、関数の引数にp1
が加えられ、↓のような引数になります。
const str = 'The cat'
const result = str.replace(/The (\w+)/, (match, p1, offset, string) => {
console.log(`match[${match}] p1[${p1}] offset[${offset}] string[${string}]`)
// match[The cat] p1[cat] offset[0] string[The cat]
return 'The dog'
})
console.log(result)
// The dog
p1
, p2
などはRegExp
オブジェクトの数だけ増えるので、なかなかファンキーな関数と言えます。
正規表現を変更したら忘れずに関数の引数を変更するようにしておきましょう。
replaceの使用例
replace
の使用例です。
@frag key=ad1;
普通の文字列を使った特定文字列の置き換え
文字列中のcat
をdog
に置き換えます。
const str = 'The cat'
const result = str.replace('cat', 'dog')
console.log(result)
// The dog
正規表現で年代の変更
2019
年を2020
年に置き換えます。
const str = '2019/07/23 22:40:32'
const result = str.replace(/^2(\d+)/, '2020')
console.log(result)
// 2020/07/23 22:40:32
正規表現で汚言の伏字化
文字列中の汚言(バカとかボケとか)を伏字xxx
に置き換えます。
const str = '君みたいなバカはきらいだよ。離れてろこのボケナス。'
const result = str.replace(/(バカ|ボケナス)/g, 'xxx')
console.log(result)
// 君みたいなxxxはきらいだよ。離れてろこのxxx。
正規表現でメールアドレスのドメインを削除
メールアドレスのドメインを削除するサンプルです。
const str = 'example@gmail.com'
const result = str.replace(/\@[0-9A-Za-z|.]+/g, '')
console.log(result)
// example
問題
Q1: JavaScriptの文字列のメソッドreplace
の第2引数の役割として正しいものを答えよ
- 文字列にマッチするパターンを記述する
- 文字列の長さを計算する
- 置き換え後の文字列を指定する
Q2: replace
の第2引数に渡せるものとして正しいものを答えよ
- 関数
- 配列
- 文字列
Q3: replace
で複数の文字列を置き換えしたい場合、正しいものを答えよ
- 第1引数に配列を指定する
- 第1引数に正規表現を渡しiフラグを加える
- 第1引数に正規表現を渡しgフラグを加える
正解
Q1: 3
Q2: 1, 3
Q3: 3