Skip Content

Find Whitespace in VSCode

  ⁃  Notes

I am a little dangerous when it comes to regular expressions (or very dangerous depending on how you look at it). I've used online tools like this and this to help me learn and troubleshoot regex patterns. But the other day I found myself more lost than usual when I attempted to find whitespace and/or new line characters. I wanted to find and replace a series of HTML tags that were not unique, except as a group. Though the group was unique there was still a lot of variability of whitespace between the tags.

Whitespace and new line regex in VSCode

The tools I mentioned suggested I use \s to target whitespace and new line characters—which is exactly what I needed. But when I tested it in VSCode I could not get the results I expected and there were also no errors. Through much trial and error and searching I learned \s does not target new line characters in VSCode (though it does in other systems)—thanks to an article from Rémi Sharrock. To target new line characters I needed to also use \r.

  • Any single whitespace or new line character: [\s\r]
  • Any group of whitespace or new line character: (\s*\r*\s*)

I used the latter to target the unique HTML tags and effectively ignore the varying whitespace. My searched looked something like this:

</section>(\s*\r*\s*)</main>(\s*\r*\s*)</div>