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

以前に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>

出力結果ですが、元のテキストはこちら。
↓
.replace 要素内のテキストAをBに、CをDに、EをF にそれぞれ置換します。

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;//青色
}

出力結果ですが、元のテキストはこちらです。
↓
.replace 要素内のテキストA、B のそれぞれの色が変わります。