jQueryのコピペで複数の文字列や要素を置換・削除するスニペット

jQueryは、いろんな要素に対して指定した処理を行うためにeachメソッドがあります。

この記事で紹介のjQueryのスニペットは、元ネタの文字列を直接変更することができない状態で、表示させる側で文字列を置換・削除したい場合に使っています。

例えば、外部から文字列を引っ張ってきた場合です。

かかかず

結構基本的なメソッドで、コピペするだけでも簡単にできるので見てみましょう。

複数の特定した文字列や要素の置換のサンプル

置換のサンプル

早速、jQueryで置換をしたサンプルです。

上記の2つの文字列をそれぞれ置換しています。置換前と後のサンプルを順に記載しているのでご覧ください。

置換前

↓

置換後

jQueryのコード

$(document).ready(function(){
    $('.sampletext1').each(function(){
        var txt = $(this).html();
        $(this).html(txt
		.replace(/マーメイド/g,'<span class="red">赤いマーメイド</span>')
		.replace(/⽝/g,'<span class="blue">青い犬</span>')
		);
    });
});

ちょっとした解説

eachで繰り返し処理

$('置換の対象にするclass').each(function(){

jQueryで複数のオブジェクトに対して繰り返し処理を行う場合、each() メソッドを使用します。

そして、.each() の前で対象にするclassを指定します。もちろんタグでもOKです。

replace() で置換する文字列の指定

.replace(/置換したい文字列/g, '置換後の文字列');

.replace()で/置換したい文字列/g を使って文字列の指定をします。

このコピペ用コードでは、g を使って対象を絞っていますが、これ以外にも以下のように対象範囲を指定することができます。

かかかず

対象を増やす場合、.replace(/置換したい文字列/g, '置換後の文字列'); を追記すればOKです。

複数の特定した文字列や要素を削除

かかかず

この前の「置換」の応用です。

削除のサンプル

今度は、jQueryで削除をしたサンプルです。

置換の時と同じ2つの文字列を、それぞれ削除しています。削除前と後のサンプルを順に記載しているのでご覧ください。

削除前

↓

削除後

jQueryのコード

<script>
$(document).ready(function(){
    $('.sampletext2').each(function(){
        var txt = $(this).html();
        $(this).html(txt
		.replace(/マーメイド/g,'')
		.replace(/⽝/g,'')
		);
    });
});
</script>

ちょっとした解説

replace() の置換後の文字列を空白

.replace(/置換したい文字列/g, '置換後の文字列');

.replace()の中の'置換後の文字列' を空白に（スペースなどの文字列を全く入れない）すればOKです。それ以外の記述は、置換の時のコードと全く一緒です。

さいごに

eachメソッドは、このように複数の要素を一括処理できるので便利なメソッドです。

うまく使いながら目的の操作を成功させていきましょう。