JavaScriptでreplaceを使って文字列を置換する方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【replace】を使う方法を解説した記事です。本記事では、replaceをどんな時に使うのか、書き方の例などを紹介します。実際のサンプルを書きながら解説しているので、参考にしてみてください。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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

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

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

 

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

 

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

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

田島悠介

例を見ながら説明していくね!

 

replaceとは

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

replace関数は、ある文字列の中にある指定した文字を、別の文字に置換することができます。

また、正規表現という置換ルールを使用することで、いろんなパターンの置換を行うことができます。

 

replaceの書き方

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

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

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

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

replaceで置換処理をおこなう

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

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

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

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

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

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

 

replaceのサンプル1

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

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

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

その結果「今日の天気は雨です。」という文字列が出力されます。

 

replaceのサンプル2

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

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

つまり、「全ての<br>」を「\n」に置換するので、<br>部分で改行がされているのが分かります。

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

 

今回の記事は以上です。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

分かりました〜。

 

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