Visual Studio Codeの検索機能で正規表現を使用するとき、複数行にまたがる文字列を検索対象に入れるにはどうするかを紹介する記事です。
結論
Visual Studio Codeの公式サイトを見ると、\n
を含めると良いと書かれています。
code.visualstudio.com
下記は引用です。
VS Code now supports multiline search! Same as in the editor, a regex search executes in multiline mode only if it contains a \n literal. The Search view shows a hint next to each multiline match, with the number of additional match lines.
実際にやってみる
HTMLのコードを対象に、実際に検索をしてみます。
正規表現(を含む検索文字列)
<div class=".*container-links">[\s\S\n]*?<\/div>
クラスの末尾にcontainer-links
と付くdiv要素全体を検索しています。
検索対象の文字列
<div class="wrapper"> <div class="container container-links"> <ul class="lists"> <li><a href="#home">入力テストです。連番:1</a></li> <li><a href="../category/">入力テストです。連番:2</a></li> <li><a href="ir/information.html">入力テストです。連番:3</a></li> <li><a href="csr/message/">入力テストです。連番:4</a></li> </ul> </div> <div class="container container-info"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dicta consequatur ducimus neque nulla ab voluptates tempore facere molestias eaque!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dicta consequatur ducimus neque nulla ab voluptates tempore facere molestias eaque!</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dicta consequatur ducimus neque nulla ab voluptates tempore facere molestias eaque!</p> </div> </div>
抽出された文字列
<div class="container container-links"> <ul class="lists"> <li><a href="#home">入力テストです。連番:1</a></li> <li><a href="../category/">入力テストです。連番:2</a></li> <li><a href="ir/information.html">入力テストです。連番:3</a></li> <li><a href="csr/message/">入力テストです。連番:4</a></li> </ul> </div>
まとめ
複数行の文字列を検索対象に含む検索をおこなうときには、\n
を使います。(Visual Studio Codeの場合)
最後に、この記事を書いた経緯を書いておこうと思います。
正規表現を書く際のお試しとして、オンラインでチェックできるサイト(https://regex101.com/)をいつも使っています。そこではオプションで複数行検索のオンオフが可能なため、複数行を表す文字を入れなくて良いんですよね。それを理解していなかったため、そこで試した正規表現をそのままVisual Studio Codeで使おうとしたけど動作せず…。あれ?なんで?と慌ててしまい、時間を使ったという失敗があったので、忘れないようにこの記事を書くことにしました。