【初級編2】JavaScriptのreplaceで文字列の置換を行おう

JavaScript入門

本記事ではJavaScriptのreplaceについて解説します。

replaceは文字列を操作する場合において必ず使うものです。

たとえば、ユーザーの入力データをチェックしたりサーバー側からデータを受け取ったりする場合に使います。

joinやsplitと並んで多く使うメソッドなので使い方を覚えておきましょう。

JavaScriptのreplaceとは?

JavaScriptのreplaceとは、文字列を置換するメソッドのことです。

例えば「apple」という文字列を「Apple」に変換する、といったことができます。

replaceメソッドは、以下のように書きます。

{文字列}.replace({変換前の文字}, {変換後の文字}’);

replaceメソッドは引数を必ず2つつけなくては動きません。

replaceの基本的な使い方

それではreplaceメソッドの具体的な使い方をみていきましょう。

以下の項目に分割して解説していきます。

  • 1つの文字列を置換する
  • 複数の文字列を置換する

1つの文字列を置換する

まずはreplaceで文字列を置換する方法から解説します。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var data = '000-1111';
var data2 = data.replace('-', '_');
document.write(data2)
</script>
</body>
</html>

○実行結果

上記のコードではreplaceメソッドで「-」を「_」に置換しています。

そのため表示が「000_1111」になっていますね。

これがreplaceメソッドの基本的な使い方です。

複数の文字列を置換する

つづいてreplaceメソッドで、複数の文字列を一気に置換する方法をみていきましょう。

複数まとめて置換する場合、replaceメソッドを連続で使う手もありますが、正規表現を使うのがおすすめです。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var data = '000-1111-3333';
var data2 = data.replace(/-/g, '_');
document.write(data2)
</script>
</body>
</html>

○実行結果

正規表現には「フラグ」という機能があることをご存知でしょうか。

gフラグを使うことで、複数の文字列を置換の対象とすることが可能です。

そのため、「000_1111_3333」になっていますね。

このように正規表現のgフラグを使えば、複数の置換が可能です。

なお、正規表現には他にもフラグがあるので、代表的なものを挙げておきます。

g対象となる全ての文字を置き換える
i大文字と小文字も関係なく置き換える
m^と$がそれぞれ行頭と行末にもマッチする

replaceの応用的な使い方

つづいて、replaceの応用的な使い方を解説します。

以下の項目に分けて解説しましょう。

  • 大文字と小文字を一括で置換する
  • 改行コードに置換する
  • replace内で関数を使う

これらができるようになると、replaceメソッドに関する理解がより深まりますよ。

大文字と小文字を一括で置換する

大文字と小文字をまとめて置換したいなら、正規表現のiフラグとgフラグを両方使います。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var data = '000a1111A3333';
var data2 = data.replace(/a/ig, 'b');
document.write(data2)
</script>
</body>
</html>

○実行結果

上記のコードでは「a」と「A」をまとめて「b」に置換しています。

iフラグを使うと、小文字大文字区別なく置換することが可能です。

改行コードを置換する

replaceメソッドを使って、改行コードをbrに置換することも可能です。

○コード例

<script>
var data = "000¥n1111¥n3333";
var data2 = data.replace(/¥n/g,'<br>')
document.write(data2)
</script>

○実行結果

やり方は簡単で正規表現で「¥n」にマッチするか判定するだけです。

改行コードを置換するのはよくやるので覚えておきましょう。

replace内で関数を使う

最後にreplace内で関数を使う方法を解説しましう。

replaceメソッドの第二引数には、独自に作った関数を指定することが可能です。

関数を指定することで、複雑な置換処理を行うことができます。

○コード例

<!DOCTYPE html>
<html>
<head>
<title>テスト画面</title>
</head>
<body>
<script>
var data = '000-1111-3333';
var data2 = data.replace(/[0-9]/g, countup);

function countup(num) {
    return Number(num)+5
}

document.write(data2);
</script>
</body>
</html>

○実行結果

上記の例では数値に「+5」していますね。

countup関数では変数numに「+5」し、replaceメソッドから呼び出しています

このように第二引数に関数を指定すれば、かなり自由に文字列を変換可能です。

まとめ

本記事ではreplaceメソッドについて解説しました。

replaceメソッドでの文字列の置換方法がお分かり頂けたでしょうか?

文字列を操作する場合replaceメソッドは必ず役立つので、使い方を覚えておきましょう。

また、replaceメソッドの関数に引数を持つと、より高度なことが可能になります。

次回はJavaScriptのjoinの使い方、をみていきましょう。

挫折率が高い??プログラミング学習のポイント
駆け出しエンジニアが一緒に学ぶ
CANITは、Progateやドットインストールで独学している人達同士をつなげます。駆け出しエンジニアのあなたのためのSNSです。
JavaScript入門
【この記事を書いた人】
谷津弘樹

某自社開発のIT企業に勤めていた元webプログラマーです。主にサーバーサイド側を担当し、phpを使った開発経験があります。現在は退職しフリーランスライターとして活動中。IT系の記事を主に執筆し生計を立てています。

CANIT
タイトルとURLをコピーしました