0

In VSCode I'd like to search for an element (<button) which has a specific attribute that can be on a new line (data-color).

Is there a way to do this search using Regex, but avoiding greedy matching?

For example, match this:

<button
   id="id"
   data-color="blue"
>

but not match this:

<button
    id="id"
>
</button>
<div data-color="blue">

I also wonder if there's more sophisticated ways to search this without using regex? I'm using Vue.js, so assume there's more advanced parsers than regex.

I've tried this but it matches the example I'm trying to avoid:

<button(.|\n)+data-color=(.|\n)+>

d-_-b
  • 21,536
  • 40
  • 150
  • 256

2 Answers2

1

Use a negative character set

<button([^>]|\n)+?data-color=([^>]|\n)+?>
rioV8
  • 24,506
  • 3
  • 32
  • 49
0

Another option could be adding \r to the negated character class:

<button[^>\r]+data-color=[^>\r]+>

enter image description here

The fourth bird
  • 154,723
  • 16
  • 55
  • 70