javascriptで正規表現でマッチした複数の対象を再帰的に処理する方法

2018年5月17日 カテゴリー: javascript タグ: javascript regex

今日、javascriptを書いていて「あれ?」と手が止まった事があったのでメモ📝

<div>
  <hr>
  <ul>
    <li>foo</li>
    <li>bar</li>
  </ul>
</div>

これらをjsで要素の最後>の手前にhogeみたいな文字列を加え、既にhogeが書かれて居る場合はスキップする、といった事をしたい。

正規表現で/(<.*?)(>)/gとかした後に、マッチした全ての対象を再帰的に処理したい。.replaceで正規表現でマッチした対象を置換はさっと思いついたのだけど、.replaceの第2引数にコールバック関数を使えば簡単に処理できる事が分かった。

function addHoge(){
  let el = //上記のhtml
  el.replace(/(<.*?)(>)/gm, function(){
    if(!arguments[0].includes(' hoge>')){
      return arguments[1] + " hoge" + arguments[2]
    }else{
      return arguments[0]
    }
  }
}

ちょっと雑に書いたけど、第2引数にコールバック関数を使い、auguments[0]でマッチした文字列を取り出せる。また、auguments[1]で1つ目のパターンマッチ、auguments[2]で2つ目のパターンマッチなどを使える。

auguments[3]などで他にも取り出せる情報があるので、console.log(auguments)などで都度調べると良さそう。