skip to Main Content

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)+>

2

Answers


  1. Use a negative character set

    <button([^>]|n)+?data-color=([^>]|n)+?>
    
    Login or Signup to reply.
  2. Another option could be adding r to the negated character class:

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

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search