はじめに
記事を見ていただいて、ありがとうございます!
Webエンジニアをしているsannoと申します。
JavaScriptで文字列を操作することは、よくありますよねー
文字列の一部分だけを切り出したり、文字列の一部分を置換したりといった操作などでしょうか。
その時によく使うのはsubstring, slice, replaceだと思います。
例えば、ある文字列から特定の文字列を切り出したい場合は以下のようになります。
const str = '私は犬が好きです。';
console.log(str.substring(2,3));
// 犬
console.log(str.slice(2,3));
// 犬また、ある文字列を置換したい場合は以下のようになります。
const str = '私は犬が好きです。';
console.log(str.replace('犬', '猫'));
// 私は猫が好きです。あるいは、replaceは正規表現を使って置換することもできるので、以下のような操作もできるでしょう。
正規表現については、ここでは解説しませんがMDNのリンクを置いておきます。
const str = '私は犬が好きです、また、彼は鳥が好きです。';
const replaceStr = str.replace(/[私|彼]は[犬|鳥]が好きです/g, '彼女は猫が好きです');
console.log(replaceStr);
// 彼女は猫が好きです、また、彼女は猫が好きです。このように正規表現で置換を行うことができます。
ですが、上の正規表現で検索して私は猫が好きです、また、彼は猫が好きです、という置換結果にしたい場合はどうすれば良いでしょうか?
検索した文字列の一部だけを置換する方法ということですね。
次では、replaceを使って検索した文字列の一部だけを置換する方法について見てゆきましょう!
replaceで検索した文字列の一部のみを置換する方法
上で見てきた犬や猫の文字列を置換する例でも良いですが、もう少し実用的な例で見てゆきましょう。
例えば以下のようなリンクの文字列を置換することを考えてみましょう。
- example.com/ja/page1 のリンクを example.com/en/page1 に置換したい
- example.com/ja/page1 のリンクはhttpsとhttpのいずれでも存在する
上の例で、example.com/ja/page1 の文字列をmatchを使って検索すると以下のようになります。
str = 'https://example.com/ja/page1, https://example.com/any, http://example.com/ja/page1, https://example.com/ja/page2';
const regex = /https?:\/\/example.com\/ja\/page1/g;
const found = str.match(regex);
console.log(found);
// Array ["https://example.com/ja/page1", "http://example.com/ja/page1"]ここで、本題のreplaceを使って検索した文字列の一部だけを置換する方法は以下のようになります。
str = 'https://example.com/ja/page1, https://example.com/any, http://example.com/ja/page1, https://example.com/ja/page2';
const regex = /(https?:\/\/example.com\/)ja(\/page1)/g;
const replaceStr = str.replace(regex, '$1en$2');
console.log(replaceStr);
// https://example.com/en/page1, https://example.com/any, http://example.com/en/page1, https://example.com/ja/page2matchで使った正規表現に、$nのプロパティの()を使って置換を行いました。
$nのプロパティの説明については、MDNのリンクを置いておきます。
イメージとしては以下の正規表現にて()で括った部分と一致したものを、$1や$2の変数にいれておくような感じでしょうか。
/(https?:\/\/example.com\/)$1ja(\/page1)$2/g
おわりに
replaceで検索した文字列の一部を置換する方法はいかがでしたでしょうか?
正規表現で一致した文字列すべてでなく、一部だけ置換したいという状況はそんなに多くはないかもしれません。
ですが、その方法を知っておくことで正規表現の知見も深まるので、知っていて損はないと思います。
この記事がなにかのヒントになりましたら、幸いです。
最後まで記事を読んでいただいて、ありがとうございました!!
コメント