[JS]jQueryで replace() を使って特定の文字列を置換する方法

[JS]jQueryで replace() を使って特定の文字列を置換する方法

Javascript・jQuery

162492 Views

ページ内の文字列を削除、置換したい場合に、jQueryで replace() を使えば便利です。

要素を指定すれば特定の箇所のテキストを削除、もしくは別の文字列に変換、なんてことも出来ますし、カスタマイズ次第では「ブラウザの幅が320px 以下でのアクセス時には特定の要素を削除する」という具合に色々な場面で利用できると思います。

まずは今回は基本的な replace() による文字列の削除と置換方法を紹介させていただきます。

replace() で特定の文字列を削除

<script src="./jquery.min.js"></script>
<script>
$(function(){
//.replace 要素内の文字列を除去
$('.replace').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/jQueryで /g,''));
});
});
</script>

1

2

3

4

5

6

7

8

9

10

<script src="./jquery.min.js"></script>

<script>

$(function(){

//.replace 要素内の文字列を除去

$('.replace').each(function(){

var txt = $(this).html();

$(this).html(txt.replace(/jQueryで /g,''));

});

});

</script>

以下のテキストで

特定の要素内の文字列を削除したい場合に jQueryで replace() を使えば便利です。

↓
「jQueryで」の部分を消してみます。

特定の要素内の文字列を削除したい場合に jQueryで replace() を使えば便利です。

replace() で特定の文字列を置換

<script src="./jquery.min.js"></script>
<script>
$(function(){
//.replace2 要素内の特定の文字列を置換
$('.replace2').each(function(){
var txt = $(this).html();
$(this).html(txt.replace(/特定の要素内/g,'replace2内'));
});
});
</script>

1

2

3

4

5

6

7

8

9

10

<script src="./jquery.min.js"></script>

<script>

$(function(){

//.replace2 要素内の特定の文字列を置換

$('.replace2').each(function(){

var txt = $(this).html();

$(this).html(txt.replace(/特定の要素内/g,'replace2内'));

});

});

</script>

今度は、以下の「特定の要素内」の箇所を

特定の要素内の文字列を置換したい場合に jQueryで replace() を使えば便利です。

↓
「replace2内」に置換してみます。

特定の要素内の文字列を置換したい場合に jQueryで replace() を使えば便利です。

コメント

フラットデザインでカッコイイ！GroovyLock用ロック画面テーマ「LT iHex」 | Marsquare - iPhone脱獄総合情報 より:
2014.9.4 09:33
[…] 表示の「アンプラグド」は言語設定を日本語にしていると「Unplugged」じゃなくて「アンプラグド」になります。ダサいし気になる方はjQueryのreplace()を使えば簡単に変えられると思います。 […]
返信
【TIPS】仕様の文言を変えたい（不可）jQuery | MSDesign より:
2017.2.6 15:03
[…] 「[JS]jQueryで replace() を使って特定の文字列を置換する方法」 http://www.webantena.net/javascriptjquery/jquery-replace/ […]
返信
【TIPS】仕様の文言を変えたい（不可）jQuery より:
2017.3.8 13:55
[…] 「[JS]jQueryで replace() を使って特定の文字列を置換する方法」 http://www.webantena.net/javascriptjquery/jquery-replace/ […]
返信
参考サイト – メモ より:
2017.4.18 13:03
[…] ▼[JS]jQueryで replace() を使って特定の文字列を置換する方法 http://www.webantena.net/javascriptjquery/jquery-replace/ […]
返信
買い物かご内の商品数を「1」のように表示させたい：超上級者向け より:
2017.5.8 09:37
[…] 画面上に表示されますので、スタイルを当てて位置や色をご変更ください。ご参考） [JS]jQueryで replace() を使って特定の文字列を置換する方法 http://www.webantena.net/javascriptjquery/jquery-replace/ […]
返信

コメントを残すコメントをキャンセル

This site uses Akismet to reduce spam. Learn how your comment data is processed.

← [WP]確認と完了画面がデフォルトで使えるWordPress のメールフォームプラグイン「Trust Form」 [Mac]不要なファイルを一括削除できるMac のお掃除用アプリ「CCleaner」 →