jQuery 特定文字列や特定要素の削除及び置換方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。今回のtipは【jQuery 特定テキストや特定要素の削除方法】です。ちょっとした時に使える方法ですので覚えておいても損は無いかもしれません。

要素の削除

jQueryを使った要素の削除方法、jQueryの読み込みをお忘れなく。


<script src="js/jquery-1.X.X.min.js"></script>

以下の例では【target】というIDを持っている要素を削除します。
$(function(){
$(‘#target’).remove()
});

特定テキストの削除及び置換

jQueryを使った特定テキストの削除方法。以下の例では【target】というclassを持っている要素の中にある【rainbow】というテキストを削除します。

$(function(){
$(‘.target’).each(function(){
var txt = $(this).text();
$(this).text(
txt.replace(/rainbow/g,””)
);
});
});

jQueryを使った特定テキストの置換方法。以下の例では【target】というclassを持っている要素の中にある【rainbow】というテキストを【cloud】に置換します。
$(function(){
$(‘.target’).each(function(){
var txt = $(this).text();
$(this).text(
txt.replace(/rainbow/g,”cloud”)
);
});
});

以下の例では【target】というclassを持っている要素の中にある【rainbow】というテキストを<span>cloud</span>に置換します。
$(function(){
$(‘.target’).each(function(){
var txt = $(this).html();
$(this).html(
txt.replace(/rainbow/g,”<span>cloud</span>”)
);
});
});

さらに詳しくはMDN正規表現をご参照ください。

以上になります。