• RSS

[JS]replace() を使って複数組の文字列を置換する方法

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

以前に jQueryで replace() を使って特定の文字列を置換する方法 で紹介させていただいた記事の追記です。

今回は、同じ要素内で複数のテキストを変換したい場合の処理に加え、指定のテキストにタグやクラスを付与して、CSS で(強引に)デザイン変更させる方法も合わせて紹介させていただきます。

replace() で同じ要素内で複数組のテキストを置換

同じ要素内で複数のテキストを変換したい場合のサンプルです。
<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.replace').each(function(){
        var txt = $(this).html();
        $(this).html(txt
		.replace(/A/g,'B')
		.replace(/C/g,'D')
		.replace(/E/g,'F')
		);
    });
});
</script>
出力結果ですが、元のテキストはこちら。
ABCDEF

.replace 要素内のテキストAをBに、CをDに、EをF にそれぞれ置換します。
BBDDFF


replace() でテキストの装飾も可能に

少し強引ですが、特定のテキストの色を変えたり、背景色を変えたりするなどのデザイン変更も可能になります。
<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('.replace').each(function(){
        var txt = $(this).html();
        $(this).html(txt
		.replace(/A/g,'<span =classA>A</span>')
		.replace(/B/g,'<span =classB>B</span>')
		);
    });
});
</script>

.replace 要素内のテキストA にはclassA、テキストBにはclassB のクラスを与え、それぞれ文字色を変えるためのスタイルを指定しておきます。
.replace .classA	{
    color:#ff0000;//赤色
}

.replace .classB	{
    color:#006699;//青色
}

出力結果ですが、元のテキストはこちらです。
AB

.replace 要素内のテキストA、B のそれぞれの色が変わります。
AB



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください