.net column
.NET開発者のためのブログメディア

JavaScriptでのreplaceを使った文字列置換方法を紹介|replaceでの文字列置換方法を学ぼう!

 
JavaScriptでのreplaceを使った文字列置換方法を紹介|replaceでの文字列置換方法を学ぼう!

SE
JavaScriptでは関数を利用した文字列の置換方法があることを知りましたが、具体的な方法を教えてください。

PM
かしこまりました。ここではreplace関数を利用した文字列置換方法を見ていきましょう。

JavaScriptでのreplaceを使った文字列置換方法


今回は、JavaScriptでのreplace関数を使った文字列置換方法について説明します。

replace関数を使用することで、以下のようなことができます。
・最初にマッチする文字列のみを置換
・マッチするすべての文字列を置換
・最後にマッチする文字列のみを置換

また、マッチする文字列を別の関数に渡すこともできます。replace関数を使った文字列置換方法に興味のある方はぜひご覧ください。

replaceの基本的な使い方

JavaScriptでのreplaceの基本的な使い方について紹介します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

replace関数は以下のように記述します。
replace(‘指定文字列’, ‘置換文字列’)

result1を見ると、指定文字列が置換対象文字列に置換されていることが分かります。しかし、result2を見ると、指定文字列が1つしか置換されていません。replace関数に文字列を指定しただけでは、最初にマッチした文字が置換されます。

正規表現

先ほどのサンプルでは、指定文字列が1つしか置換されませんでした。ここでは、すべての指定文字列を置換する方法を紹介します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

RegExpオブジェクトにグローバルマッチのフラグ(g)を付与することで、すべての指定文字列を置換できます。

また、以下のように記述することもできます。

このように、JavaScriptではreplace関数に正規表現を指定することで、すべての指定文字列を置換できます。

最後にマッチした文字列を置換

replace関数に文字列を指定すると最初にマッチした文字列のみ置換されました。ここでは、最後にマッチした文字列のみを置換する方法を紹介します。

lastIndexOf関数とslice関数を使用します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

lastIndexOf関数で、最後に登場する” “のインデックスを求めます。次にslice関数で、文字列を分割し、replace関数で置換しています。

こうすることで、最後にマッチした文字列のみを置換できます。

split + joinで置換

JavaScriptでのreplace関数以外での置換方法を紹介します。split関数とjoin関数で置換します。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

split関数で’ ‘文字で配列に分割し、join関数で’,’で連結します。そうすることで、replace関数と同じ挙動となります。

このように、JavaScriptではsplit + joinでも置換できます。

置換パターン

JavaScriptでは、正規表現にマッチした文字列を表す$&という置換パターンで参照できます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

正規表現”\w”は、アンダーバーを含むどの英数字にもマッチします。つまり、[A-Za-z0-9_] に該当します。

文字列を正規表現で検索し、マッチした文字列を()で囲んでいます。result2のように”($&$&)”とすることで、マッチした文字列を繰り返しています。このように、JavaScriptでは、正規表現にマッチした文字列を表す$&という置換パターンで参照できます。

また、マッチした文字列を、$1 $2 … で参照することもできます。実際のソースコードを見てみましょう。

実行結果は以下のようになります。

マッチした順に$1,$2,$3となります。

このように、JavaScriptでは、正規表現にマッチした文字列を表す$1,$2…という置換パターンで参照できます。

第2引数の関数指定

JavaScriptでは、replace関数の第2引数に関数を指定することもできます。

実際のソースコードを見てみましょう。

実行結果は以下のようになります。

ここでは、マッチした文字列にtoUpperCase関数を実行して、大文字に変換しています。

このように、JavaScriptではreplace関数の第2引数に関数を指定することもできます。

SE
マッチする文字列を指定することもできるんですね。

PM
他にも文字列置換の関数がありますので、色々とコードを書いてマスターしてください。

JavaScriptでreplaceを使って文字列置換してみよう

いかがでしたでしょうか。
JavaScriptでのreplace関数を使った文字列置換方法について説明しました。

replace関数を使用することで、以下のようなことができます。
・最初にマッチする文字列のみを置換
・マッチするすべての文字列を置換
・最後にマッチする文字列のみを置換

また、マッチする文字列を別の関数に渡すこともできます。
ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags