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