ユーニックス総合研究所

トップ プロフィール ポートフォリオ カテゴリー バックナンバー 検索 クエリ シリーズ RSS お問い合わせ 記事一覧

 前へ  |  次へ 

JavaScriptのreplaceの使い方: 文字列を特定の文字列で置き換える

18, 2020-08-17

目次

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の使用例です。

普通の文字列を使った特定文字列の置き換え

文字列中の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引数の役割として正しいものを答えよ

  1. 文字列にマッチするパターンを記述する

  2. 文字列の長さを計算する

  3. 置き換え後の文字列を指定する

Q2: replaceの第2引数に渡せるものとして正しいものを答えよ

  1. 関数

  2. 配列

  3. 文字列

Q3: replaceで複数の文字列を置き換えしたい場合、正しいものを答えよ

  1. 第1引数に配列を指定する

  2. 第1引数に正規表現を渡しiフラグを加える

  3. 第1引数に正規表現を渡しgフラグを加える

正解

Q1: 3
Q2: 1, 3
Q3: 3

関連記事

関連動画

更新日:  2023-02-02
カテゴリー: JavaScript
タグ: 

 前へ  |  次へ 

この記事のアンケートを送信する
カテゴリー
関連記事