実務の中で、ハンバーガーメニューのテキストを「MENU」から「CLOSE」に変更するなど、ボタンを押すとボタンのテキストを変更するといった動的な置換をする事があります。
jQueryのreplaceメソッドを使うと簡単に出来ますので、詳しく解説していきます。
replaceメソッドとは
replaceメソッドは、指定の文字列を任意の文字列に置換が出来るメソッドになります。
今回は簡単な置換の方法を解説していきますが、正規表現を使用し複雑な文字列の置換も可能です。
replaceメソッドの他に、関連したreplaceメソッドも解説していきますので、ぜひご覧ください。
replaceメソッドの基本的な使い方
replaceメソッドの基本的な使い方を解説していきます。
replaceメソッドはjQueryだけではなく、Javascriptで標準で用意されているメソッドになります。replaceメソッドの構文は以下となります。
対象文字列.replace(置換前の文字列, 置換後の文字列);置換をする文字列を対象として、replaceメソッドの第1引数に置換前の文字列、第2引数に置換後の文字列を記述します。
それでは、実際に文字列の置換をしてみましょう。例として以下のHTMLを用意します。
<p>私は犬が好きです</p>用意したHTMLの文字列にある「犬」を「猫」に置換してみます。
var text = $("p").text();
var result = p.replace("犬","猫");
$("p").text(result);上記を実行した結果が以下となります。
<p>私は猫が好きです</p>最初に、置換を行う対象であるpタグの内容を$(“p”)で指定し、textメソッドで内容(テキスト)を取得しています。
その取得した内容に対してreplaceメソッドを使用し置換(p.replace(“犬”,”猫”))をしました。
そして最後に、置換した内容をpタグにtextメソッドで代入しています。
上記のように、置換をする内容を一旦取り出してから置換をするといった点に注意してください。
要素内で該当するすべての文字列を置換する
先ほど解説した置換方法だと、指定した要素内で該当する文字列は、最初の一箇所しか置換されません。
正規表現を使用する事で、要素内の該当するすべての文字列を置換が可能になります。
<p>私は犬が好きです。猫よりも犬が好きです。</p>var text = $("p").text();
var result = p.replace(/犬/g,"鳥");
$("p").text(result);先ほどのコードから変更した箇所は一箇所で、第1引数に正規表現を組み込んでいます。
これを実行した結果は以下のようになります。
<p>私は鳥が好きです。猫よりも鳥が好きです。</p>p.replace(/犬/g,”鳥”)の/(スラッシュ)は正規表現の始まりと終わりを示すものとなります。
これに「g」をつける事で、対象文字列が複数あってもすべて置換する事が可能となります。
関連メソッド：replaceAllメソッド
続いては、replaceの関連メソッドとしてreplaceAllメソッドを解説していきます。
replaceAllメソッドはjQueryで独自に用意されているメソッドとなり、指定した要素すべてを、指定した内容で置換するメソッドになります。
まずはreplaceAllメソッドの構文をみていきます。
$(置換後の内容).replaceAll(置換する要素);このreplaceAllメソッドを実際に使用した例は以下となります。
<p class="beforeContent">置換前の要素1</p>
<p class="beforeContent">置換前の要素2</p>$('<p class="afterContent">置換後の要素</p>').replaceAll('.beforeContent');上記の実行結果は以下となります。
<p class="afterContent">置換後の要素</p>
<p class="afterContent">置換後の要素</p>このように、今回の例ではbeforeContentをいうクラスを持つ要素がすべて、afterContentというクラスを持つ新しい要素に置換されました。
通常のreplaceメソッドとは違い、要素自体を置換している点と、jQuery独自のメソッドの為コードが簡略化されている点に注目です。
関連メソッド：replaceWithメソッド
続いては、replaceの関連メソッドとしてreplaceWithメソッドを解説していきます。
replaceWithメソッドもjQueryで独自に用意されているメソッドとなり、指定した要素すべてを、指定した内容で置換するメソッドになります。
先ほどのreplaceAllメソッドと同じく、要素を置換できるメソッドになりますが、置換前の要素と置換後の要素の指定が逆になっている点と、今回は省略しますが引数として関数を扱える点が違います。
まずはreplaceWithメソッドの構文をみていきましょう。
$(置換する要素).replaceWith(置換後の内容);このreplaceWithメソッドを実際に使用した例は以下となります。
<p class="beforeContent">置換前の要素1</p>
<p class="beforeContent">置換前の要素2</p>$(".beforeContent").replaceWith("<p class='afterContent'>置換後の要素</p>");上記の実行結果は以下となります。
<p class="afterContent">置換後の要素</p>
<p class="afterContent">置換後の要素</p>replaceAllメソッドと同じく、今回の例でもbeforeContentをいうクラスを持つ要素がすべて、afterContentというクラスを持つ新しい要素に置換されました。
さいごに
いかがでしたでしょうか。
今回は文字列の置換をするreplaceメソッドと、その関連メソッドを解説しました。
しっかり覚えておく事で、特定の要素や文字列の置換を効率的に行う事ができます。ぜひ活用してみてください。
