【置換に便利！】変数を使って正規表現でreplaceするjs

Web2017年9月25日

正規表現を使ってjsでreplaceによる置換を行う場合、変数を使って処理する方法を覚えておくとかゆいところに手が届くようになります。本記事では、変数を使って正規表現でreplaceするjsをご紹介させていただきたいと思います。

サンプルコード

js

$(function(){
    'use scrict';
        
    $('ul.hoge').find('li').each(function() {
        var $txt = $(this).html();
        var $regExp = new RegExp( 'ほげ'+'(.+)');
        $txt = $txt.replace($regExp,'もげ');
        $(this).html($txt);
    });
　　　　
});

※jQueryを読み込んでいる場合のスクリプトとなります

置換前のhtml

<ul class="list-bullet-01 hoge">
<li>ほげ123</li>
<li>ほげ</li>
<li>ほげ456</li>
<li>ほげ</li>
<li>ほげ789</li>
<li>ほげ</li>
<li>ほげあああ</li>
<li>ほげ</li>
<li>ほげいいい</li>
<li>ほげ</li>
<li>ほげううう</li>
<li>ほげ</li>
</ul>

置換後のhtml

置換前のhtmlにjsを実行すると、以下のように置換されます。

<ul class="list-bullet-01 hoge">
<li>もげ</li>
<li>ほげ</li>
<li>もげ</li>
<li>ほげ</li>
<li>もげ</li>
<li>ほげ</li>
<li>もげ</li>
<li>ほげ</li>
<li>もげ</li>
<li>ほげ</li>
<li>もげ</li>
<li>ほげ</li>
</ul>

解説

今回のサンプルでは、「ほげ」の後に文字列があるもののみ「もげ」に置換する、というjsで解説させていただきたいと思います。

まず、変数$txtに$(this)で各リストの内容を格納します。続けてnew RegExpのコンストラクタで正規表現のパターンを宣言します。「ほげ」のあとに「（.+）」とすることで、「ほげのあとに1回以上の何かしらの文字列の繰り返し」を対象とします。

あとは$txtに対しreplace()で変数を使って「もげ」に置き換え、$(this).html($txt)とすることで、で置換した文字列をDOM生成して完了です。

デモ

実際に動作を確認できるデモページも公開しておりますのであわせてご確認ください。

変数を使って正規表現でreplaceするjs

まとめ

単純なパターンであればあえて変数を駆使しなくても解決できるケースも多いですが、複雑な置換や大掛かりなjs開発において、変数を使わないと思うように置換ができないケースもあります。変数と正規表現、これらを組み合わせたreplaceをできるようにしておくといざという時に役立ちますので、ぜひご活用いただければ幸いです。

この記事を読んでいる方にオススメの記事

「Web」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。