jQueryでのreplaceメソッドの使い方とは？置換方法について解説！
目次
jQueryでのreplaceメソッドの使い方とは？
jQueryでのreplaceメソッドの使い方について説明します。replaceメソッドを使えば、指定文字列を置換できます。
ここでは、
・最初に一致した文字列を置換
・一致した全ての文字列を置換
・一致した全ての文字列を置換（複数要素）
・メソッドチェーンで置換
・正規表現で置換
・マッチ文字列の使用
について説明します。
jQueryでのreplaceメソッドの使い方に興味のある方はぜひご覧ください。
最初に一致した文字列を置換
replaceメソッドを使用して、最初に一致した文字列を置換する方法を紹介します。
replaceメソッドは、以下のように記述します。
|
1 2 |
<br> replace('置換対象文字列','置換後の文字列')<br> |
|
1 2 3 4 5 |
<br> <p id="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> |
|
1 2 3 4 5 6 7 |
<br> $(function(){<br> var txt = $('#replace').html();<br> $('#replace').html(<br> txt.replace('replace','REPLACE')<br> );<br> });<br> |
実行結果は以下のようになります。
See the Pen
jquery_replace1 by kskumd (@kskumd)
on CodePen.
このように、replaceメソッドでは、最初に一致した文字列を置換することができます。
一致した全ての文字列を置換
replaceメソッドを使用して、一致した全ての文字列を置換する方法を紹介します。replaceメソッドのオプションに”g”を付与します。
|
1 2 3 4 5 6 7 8 9 |
<br> <p id="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> <p id="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> |
|
1 2 3 4 5 6 7 |
<br> $(function(){<br> var txt = $('#replace').html();<br> $('#replace').html(<br> txt.replace(/replace/g, 'REPLACE')<br> );<br> });<br> |
実行結果は以下のようになります。
See the Pen
jquery_replace2 by kskumd (@kskumd)
on CodePen.
この場合、2つ目のpタグ内は置換されません。
replaceメソッドのオプションには、大文字小文字を無視する”i”オプションもあります。
“g”オプションと併用することもできます。その場合、以下のように記述します。
|
1 2 |
<br> replace(/replace/gi, 'REPLACE')<br> |
一致した全ての文字列を置換（複数要素）
複数要素について、一致した全ての文字列を置換する方法を紹介します。eachメソッドを使用します。
|
1 2 3 4 5 6 7 8 9 |
<br> <p class="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> <p class="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> |
|
1 2 3 4 5 6 7 8 9 |
<br> $(function(){<br> $('.replace').each(function(){<br> var txt = $(this).html();<br> $(this).html(<br> txt.replace(/replace/g,'REPLACE')<br> );<br> });<br> });<br> |
実行結果は以下のようになります。
See the Pen
jquery_replace3 by kskumd (@kskumd)
on CodePen.
このように、eachメソッドを組み合わせれば、一致した全ての文字列を置換できます。
メソッドチェーンで置換
メソッドチェーンで記述すれば、置換した文字列をさらに置換できます。
|
1 2 3 4 5 6 7 8 9 |
<br> <p class="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> <p class="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> |
|
1 2 3 4 5 6 7 8 9 |
<br> $(function(){<br> $('.replace').each(function(){<br> var txt = $(this).html();<br> $(this).html(<br> txt.replace(/replace/g,'REPLACE').replace(/sample/g,'SAMPLE')<br> );<br> });<br> });<br> |
実行結果は以下のようになります。
See the Pen
jquery_replace4 by kskumd (@kskumd)
on CodePen.
メソッドチェーンはいくつでも連結できますが、あまり連結しすぎない方が良いです。
正規表現で置換
replaceメソッドでは、正規表現を使って置換することもできます。
|
1 2 3 4 |
<br> <p class="replace"><br> This is jQuery replace sample.<br> </p><br> |
|
1 2 3 4 5 6 7 8 9 |
<br> $(function(){<br> $('.replace').each(function(){<br> var txt = $(this).html();<br> $(this).html(<br> txt.replace(/[A-Z]/g,'*')<br> );<br> });<br> });<br> |
実行結果は以下のようになります。
See the Pen
jquery_replace5 by kskumd (@kskumd)
on CodePen.
[A-Z]に一致する文字列が、”*”に置換されていることが分かります。このようにreplaceメソッドでは、正規表現を使って置換することもできます。
マッチ文字列の使用
replaceメソッドでは、一致した文字列を使用することができます。
|
1 2 3 4 5 |
<br> <p class="replace"><br> This is jQuery replace sample.<br><br> This is jQuery replace sample.<br> </p><br> |
|
1 2 3 4 5 6 7 8 9 |
<br> $(function(){<br> $('.replace').each(function(){<br> var txt = $(this).html();<br> $(this).html(<br> txt.replace(/([A-Z])/g,'$1$1')<br> );<br> });<br> });<br> |
実行結果は以下のようになります。
See the Pen
jquery_replace6 by kskumd (@kskumd)
on CodePen.
パターンに一致した順に、$1、$2、$3の順で格納されます。このように、一致した文字列をそのまま使用できます。
jQueryでのreplaceメソッドの使い方について理解しよう
いかがでしょうか。jQueryでのreplaceメソッドの使い方について説明しました。replaceメソッドを使えば、指定文字列を置換することができます。
ここでは、
・最初に一致した文字列を置換
・一致した全ての文字列を置換
・一致した全ての文字列を置換（複数要素）
・メソッドチェーンで置換
・正規表現で置換
・マッチ文字列の使用
について説明しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
