こんにちは！フリーランスの桃太郎です。
ユーザ画面に表示する文章の一部をユーザの操作によって別の文字に置き換える処理を行いたい場合、みなさんはどうされていますか？JavaScriptのライブラリであるjQueryではreplaceメソッドを始めとした様々なメソッドが用意されています。
そこで、この記事では
- replaceメソッドとは？
- replaceメソッドの使い方
- replaceの類似メソッド
- 正規表現によるreplaceの使い方
など基本から実践的な内容についても解説していきます。jQueryの置換処理について正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します！
replaceメソッドとは？
それでは、まず最初にreplaceメソッドの基本的な知識から学習を進めていきましょう！replaceメソッドは、文字列を任意の文字に置換することができるメソッドになります。
一般的な文字列はもちろんなのですが、HTMLのテキストを取得して置換するようなことも簡単に実現できるので便利です。また、正規表現を使って複雑な条件による置換も可能なので、活用範囲は非常に広いと言えるでしょう。
本記事では、replaceメソッドの基本から応用まで体系的に学べるように構成しているのでぜひ参考にしてみてください！
replaceメソッドの使い方
この章では、replaceメソッドの基本的な使い方について見ていきましょう！一般的な構文や書き方、実際のプログラミング手法について学んでいきます。
基本的な構文や書き方について
まずは、基本的な構文から見ていきましょう！replaceメソッドは、jQuery固有のメソッドではなくJavaScriptの標準で用意されているメソッドになります。
一般的な構文は次のとおりです！
対象文字列.replace( 置換前の文字列, 置換後の文字列 )
まず、置換を行いたい文字列を対象にしてreplaceメソッドを実行するという手順を覚えておきましょう。引数は2つあり、第1引数に置換前の対象文字列を指定して第2引数に置換後の新規文字列を設定します。
置換前の文字列は単純に文字を指定しても良いですし、正規表現で複雑な条件を付与することも可能です。
文字列を置換する方法
それでは、実際に簡単なプログラミングを行ってみましょう！例えば、次のようなHTMLがあるとします。
<h1>こんにちは、鈴木さん</h1>
h1要素のテキストの中で「こんにちは」の部分だけを抽出して「おはようございます」に置換する場合は次のようになります！
var h1 = $("h1").text();
var result = h1.replace("こんにちは", "おはようございます");
$("h1").text(result);
実行結果
<h1>おはようございます、鈴木さん</h1>
まず置換対象の文字列を取得するために、「$(“h1”)」でh1タグを取得してテキストの内容をtext()メソッドにて取得します。その取得した内容に対して、replaceメソッドを実行するわけですね。
replaceメソッドの引数を見ると、「こんにちは」の部分を抽出して「おはようございます」に置換しているのが分かります。実行結果でh1のテキストが変化しているのを確認してみましょう！
text()メソッドにて、置換対象のテキストを取り出した上で置換する必要があるという点を覚えて起きましょう。
replaceの類似メソッド
replaceAllメソッドで文字列を置換する方法
次にjQueryにて独自に用意されているreplaceAllメソッドをみていきましょう。replaceAllメソッドの構文をまずは確認します。
[replaceAllメソッドの構文]
(置き換え後の内容).replaceAll(置き換え対象)
具体的なサンプルを次に確認しましょう。
[HTML]
<ul> <li>男性</li> <li>女性</li> <li>無回答</li> </ul>
[jQuery]
$('<li>未記入</li>').replaceAll('li:last');
実行結果
[HTML]
<ul> <li>男性</li> <li>女性</li> <li>未記入</li> </ul>
先ほどのJavaScriptにてもともと用意されていたreplaceメソッドとの流れを比較してみてください。replaceメソッドでは置換するために３行の処理を書いていましたが、jQueryで独自に用意されたreplaceAllメソッドでは１行で置換処理が完結しています。
これが、jQueryというライブラリを活用する大きなメリットの一つになります。つまり、jQueryがJavaScriptの処理の手間を簡潔にしてくれる手助けをしてくれています。
具体的にreplaceAllメソッドのサンプルコードを解説します。replaceAllメソッドの前に記述した $(‘<li>未記入</li>’) の箇所が置き換え後の内容です。そして、replaceAllメソッドの引数に置換対象として、liタグの一番最後を指定するために li:last というセレクタを記述しています。
セレクタという言葉の意味はタグなどの要素を指定する仕組みのことです。今回の li:last というセレクタの意味は、「li というタグの要素の内、一番最後（英語でlast)の箇所を指定します」ということになります。
replaceWithメソッドで文字列を置換する方法
次にjQueryにて独自に用意されているreplaceWithメソッドをみていきましょう。まずは構文です。
[replaceWithメソッドの構文]
(置き換え対象).replaceWith(置き換え後の内容)
replaceAllメソッドとは置き換え対象の指定する箇所が逆になっていることが大切なポイントです。サンプルコードをみてみましょう。
[HTML]
<ul> <li>男性</li> <li>女性</li> <li>無回答</li> </ul>
[jQuery]
$('li:last').replaceWith('<li>未記入</li>');
実行結果
[HTML]
<ul> <li>男性</li> <li>女性</li> <li>未記入</li> </ul>
replaceAllとは指定箇所が逆になっているだけで、置換処理としては同じことを実行しています。ではreplaceAllとreplaceWithメソッドを使い分けるポイントは何でしょうか？
それはreplaceWithメソッドの方は(置き換え後の内容)に’<li>未記入</li>’というような要素だけではなく、関数を入れることができ、その関数の戻り値を置き換え後の内容とすることができます。
ん、一体どういうこと？ と思われると思いますので、まずは具体的なサンプルをみてみましょう。
[HTML]
<ul> <li>男性</li> <li>女性</li> <li>無回答</li> </ul>
[jQuery]
$('ul').replaceWith(function(idx, html){
return $('<ol>',{id: 'item' + (idx + 1), html: html})
.add('<p>選択肢の数は'+$(this).children('li').length + '個です</p>')
});
実行結果
[HTML]
<ol> <li>男性</li> <li>女性</li> <li>無回答</li> </ol> <p>選択肢の数は3個です</p>
replaceWithメソッドの後に何やら色々書いてありますが、functionという文字が見えるかと思います。こちらが関数（処理をまとめたもの）です。
中身の詳細な処理の解説は省略しますが、関数の中では<li>タグを<ol>タグに置き換え、さらにliタグの要素数を数え（3つ）、その情報を新たに<p>タグを追加して表示することを行なっています。
初学者のうちは、replaceWithメソッドとreplaceAllメソッドの違いとして関数を取ることができるかどうかの違いがあるという程度に覚えておくことが大事です。
そして、jQueryの色々な知識を身につけて行くことで、上のサンプルのようなコードも読み解いたり、自分で書けるようになりますので、安心してください。
正規表現によるreplaceの使い方
では、最後に応用的な内容として正規表現を用いた置換処理を解説します。
正規表現とは
正規表現とは文字列の集まりを一つの形式で表すための手法のことです。たとえば、大量の顧客情報の中から”123-4567”のような郵便番号を全て個人情報を守るために”***-****”のような伏字(*)にする処理を行いたいとします。
そのような場合に、”111-2222”、”987-6543”など他の郵便番号を全て置換対象としてプログラムに書くのは手間がかかり、現実的ではありません。そのような時、正規表現を用いると以下のように指定することができます。
^[0-9]{3}-[0-9]{4}$
上の正規表現にて(3桁)(ハイフン)(4桁)の書式の郵便番号の全てを一つの集まりとして表すことができるのです。この例を用いて次の章で具体的な使い方を見ていきましょう。
基本的な構文と書き方について
正規表現の基本が分かったところで、replaceメソッドへの活用方法について見ていきましょう！基本的な使い方はこれまで通りのreplaceと同じですが、第1引数に正規表現のパターンを設定することができます。
対象文字列.replace( 正規表現パターン, 置換後の文字列 )
この正規表現パターンは、対象となる文字列に対して実行されることになります。そして、パターンに合致する文字列のみを「置換後の文字列」へと更新されることになります。
正規表現による文字列の置換方法
正規表現はreplaceメソッドにて活用できます。まずはサンプルコードを確認してください。
[HTML]
<ul> <li>123-4567</li> <li>555-7689</li> <li>012-9876</li> </ul>
[jQuery]
$('li').each(function(){
var txt = $(this).text();
$(this).text(txt.replace(/^[0-9]{3}-[0-9]{4}$/, '***-****'));
});
実行結果
<ul> <li>***-****</li> <li>***-****</li> <li>***-****</li> </ul>
正規表現の箇所をスラッシュ(/)で前後を囲っていることが大切なポイントの一つです。サンプルコードでは、複数のliタグに対して、eachメソッドを使い繰り返し処理をするように指示しています。
そして、function関数の中で繰り返し処理の実際の中身として、正規表現を用いた置き換え処理が行われています。正規表現はこのようにある形式でまとまった集まりを一文で表すことができる非常に便利な仕組みです。
ぜひこれをきっかけに少しづつ正規表現の世界に足を踏み入れてみるのも良いでしょう。
まとめ
本記事ではjQueryのreplaceメソッドを中心に置換処理についてご紹介しました。replaceメソッドはJavaScriptにもともと用意されていたメソッドで正規表現を活用して置換ができるメソッドでした。
そして、jQuery独自の関数としてreplaceAllとreplaceWithメソッドがありました。この二つは置換対象の指定箇所が逆になることが大切なポイントの一つでした。もし今後、置換処理に関して迷うことがあれば、ぜひこの記事を思い出して下さいね。
