JavaScriptをプログラミング初心者向けに紹介した記事です。


今回は、JavaScriptでreplaceを使う方法について解説します。


また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。


 


本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。


 


なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。


replaceとは


プログラムを作っていると、文字列の中にある文字を、別の文字に置き換えたい場面があるのではないでしょうか。


そんな時に便利なのが、replace関数です。replace関数は、ある文字列の中にある指定した文字を、別の文字に置換することができます。また、正規表現という置換ルールを使用することで、いろんなパターンの置換を行うことができます。


基本的なプログラムは以下のようになります。対象となる文字列の後ろに「.」ピリオドを付けて記載します。


文字列.replace(パターン, 置換文字[, flag])


※flagは通常使用しないので省略します。


 



 


田島メンター！置換というのは何でしょうか？


 



 


文字列の中にある指定した文字を、別の文字に置き換えることだよ。


 


 



 


どのような書き方があるのですか？


 



 


例を見ていってみよう。


 


 


replaceで置換処理をおこなう


この記事では、replaceで置換処理をおこなう方法について解説します。


まずは、簡単な関数を用意します。


 


<!DOCTYPE html>
 <html lang = "ja">
 <head>
 <meta charset = "utf-8">
 <title>JavaScriptの練習</title>
 </head>
 <body>
 <script>
 // replaceのサンプル１
 var str1 = "今日の天気は晴れです。";
 var newstr1 = str1.replace("晴れ", "雨");
 console.log(str1);
 console.log(newstr1);

 // replaceのサンプル２
 var str2 = "私の名前は<br>太郎です。<br>年は18歳です。";
 var newstr2 = str2.replace(/<br>/g, "\n");
 console.log(str2);
 console.log(newstr2);
 </script>
 </body>
 </html>

実行すると次のようになります。



 


では、それぞれの内容を詳しく見ていきましょう。


 


var str1 = "今日の天気は晴れです。";
 var newstr1 = str1.replace("晴れ", "雨");
 console.log(str1);
 console.log(newstr1);

こちらは、通常の置換の例です。


str1という変数を用意し、replaceで「晴れ」という文字を「雨」に置換した結果をnewstr1という変数に入れています。指定した文字が、置換する文字に置き換わります。


 


var str2 = "私の名前は<br>太郎です。<br>年は18歳です。";
 var newstr2 = str2.replace(/<br>/g, "\n");
 console.log(str2);console.log(newstr2);

こちらは、正規表現という置換ルールを使用した例です。「/<br>/g」と記述することで、「全ての<br>」という意味になります。また、「\n」は改行を表します。


str2という変数を用意し、replaceで「全ての<br>」という文字を改行に置換した結果をnewstr2という変数に入れています。正規表現は、この他にも様々な指定が可能です。


 


今回の記事は以上です。


 



 


replaceは、文字列を指定する方法と正規表現を指定する方法があるんですね。


 



 


そうだね。まずは簡単な文字列を指定する方法から学習し、慣れてきたら正規表現を使ってみるといいよ。


 



 


分かりました〜。


 


 


[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。


 


情報提供元： TechAcademyマガジン
記事名：「 JavaScriptでreplaceを使う方法【初心者向け】 」