JavaScript

最終更新日:
公開日:

レシピ

文字列

特定の文字を他の文字に置き換える

文字列にある特定の文字を他の文字で置き換える方法について解説します。

この記事のポイント

  • 手軽な完全一致検索と正規表現の2パターンを使うことができる
  • 置き換えを一回のみではなく全件にしたいときは正規表現が便利

目次

文字列からワードを検索して置き換える

replaceメソッドを使うと、文字列から特定のワードを指定して検索し、ヒットしたら指定した文字列に置き換えることができます。

ワードの検索はベタに文字列を指定する完全一致と、正規表現を使った方法のいずれかを使用可能です。
完全一致は手軽に使えますが、詳細な検索条件を指定するときは正規表現の方が融通が効いて便利です。

次の例では文字列「I like cat. cat is so cute.」から「cat」を検索し、該当したら「dog」に置き換えます。

JS コード例

let test = 'I like cat. cat is so cute. black cat, white cat, brown cat.';

// 完全一致
console.log( test.replace( 'cat', 'dog'));
// I like dog. cat is so cute. black cat, white cat, brown cat.

// 正規表現
console.log( test.replace( /cat/, 'dog'));
// I like dog. cat is so cute. black cat, white cat, brown cat.

いずれの方法も1つ目の「I like cat.」の「cat」は置き換わっていますが、それ以降の「cat」は置き換わっていません。
完全一致を使うパターンだとループ処理を用意するなどひと手間かかりますが、正規表現を使う場合はフラグ「g」を使うと簡単に対応することができます。

JS コード例

let test = 'I like cat. cat is so cute. black cat, white cat, brown cat.';

console.log( test.replace( /cat/g, 'dog'));
// I like dog. dog is so cute. black dog, white dog, brown dog.

アルファベットの大文字と小文字が混在することはよくありますが、正規表現のフラグを使えば問題なく置き換えることができます。

JS コード例

let test = 'I like cat. Cat is so cute. black caT, white cAt, brown CAT.';

console.log( test.replace( /cat/gi, 'dog'));
// I like dog. dog is so cute. black dog, white dog, brown dog.

以上のように、完全一致はシンプルにワードを置き換えるだけであれば手軽に実装することができますが、検索するワードが複数含まれたり、検索ワードが完全一致しない可能性があるときは正規表現を使うと便利です。

検索したワードを削除する

replaceメソッドの文字の置き換え機能を利用して、第2パラメータに空文字を指定するとマッチした文字列を削除する機能として使用することができます。
次の例は文字列に含まれるスペース、タブ、改行コードを全て取り除きます。

JS コード例

let test = 'I like cat.\nCat \t				is so cute.';

replace_test = test.replace( /[\p{C}\p{Z}]/gu, '');
console.log(replace_test);
// Ilikecat.Catissocute.

元の文字列からreplaceメソッドを使って空白を削除し、変数replace_testに代入しています。

検索ワードで指定している「\p{C}」と「\p{Z}」はUnicodeの文字プロパティです。
\p{C}」は「コントロール文字」「非可視整形用文字」などを含む「その他」の文字、「\p{Z}」は「行区切り文字」「段落区切り文字」「空白文字」などの「区切り文字」を指しています。

これらのUnicodeの文字プロパティを使用するため、フラグに「g」に加えて「u」を追加しているところもポイントです。
フラグ「u」は検索ワードにUnicodeを使用する明示的な指定になります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。