jQueryでのreplaceメソッドの使い方とは？置換方法について解説！
- システム
エンジニア - jQueryでreplaceメソッドを使うと何ができますか。
- プロジェクト
マネージャー - 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の順で格納されます。このように、一致した文字列をそのまま使用できます。
- システム
エンジニア - eplaceメソッドを使えば、さまざまな指定文字列が置換できるのですね。
- プロジェクト
マネージャー - そうですね。さまざまな指定文字列の置換について、使いこなせるようにしっかり理解してください。
jQueryでのreplaceメソッドの使い方について理解しよう
いかがでしょうか。jQueryでのreplaceメソッドの使い方について説明しました。replaceメソッドを使えば、指定文字列を置換することができます。
ここでは、
・最初に一致した文字列を置換
・一致した全ての文字列を置換
・一致した全ての文字列を置換（複数要素）
・メソッドチェーンで置換
・正規表現で置換
・マッチ文字列の使用
について説明しました。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
jQueryでの子要素のfindとは？jQueryでの子要素の取得方法紹介！
jQueryでの子要素のfindとは？ 今回は、jQueryでの子要素の取得方法について説明します。子要素の取得にはfindメソッドを使用します。 ここでは、「指定した子要素をfind」「id属性の子要素をfind」「c […]
-
jQueryでのclosestメソッドの使い方とは？closestメソッドを正しく使おう！
jQueryでのclosestメソッドの使い方とは？ 今回は、jQueryでのclosestメソッドの使い方について説明します。 closestメソッドを使用すると、親要素を取得できます。closestメソッドでは、セレ […]
-
jQueryのdataの使い方を解説！dataメソッドは便利な機能をマスターしよう！
jQueryのdataの使い方を解説 jQueryのdataとは？ jQueryは豊富な機能を持つJavaScriptのライブラリです。その機能の一つのdataメソッドは、HTMLのdata属性を取得することができます。 […]
-
jQueryを利用したsetTimeoutを紹介！setIntervalとは
JavaScriptのsetTimeoutとは？ setTimeoutとは、指定した秒数だけ処理の実行を遅らせることのできるJavaScriptのメソッドです。通常、JavaScriptの処理は上から順に実行されますが、 […]
-
jQueryのif文を基本から解説！文法をマスターしよう！
jQueryのifとは？ jQueryは多機能なフリーのライブラリです。 jQueryは言語ではなくJavaScriptのライブラリであるため、jQueryで使用するif文はJavaScriptのif文と全く同じと言えま […]
