.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メソッドを使えば、指定文字列を置換することができます。
ここでは、
・最初に一致した文字列を置換
・一致した全ての文字列を置換
・一致した全ての文字列を置換（複数要素）
・メソッドチェーンで置換
・正規表現で置換
・マッチ文字列の使用
について説明しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
Search キーワード検索
Popular 人気の記事
reccomended おすすめ記事
Categories 連載一覧
Tags タグ一覧
Jobs 新着案件
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅)