In VS Code, How Do I Select Opening HTML Tag, Closing HTML Tag and all the Things In Between?

Question

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="About/">About</a></li>
    <li><a href="Contact/">Contact</a></li>
    <li>
      Portfolio
      <!-- TODO: Make this a dropdown menu. -->
      <ul>
        <li><a href="">Project 1</a></li>
        <li><a href="">Project 2</a></li>
        <li><a href="">Project 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

Given something like the above, I want to select the opening <nav> and then also select the closing <nav> , including everything in between.

In other words, a shortcut key (Mac OS X) to select opening, closing and all the markup in between.

Answer 1

With the html that you have:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="About/">About</a></li>
    <li><a href="Contact/">Contact</a></li>
    <li>
      Portfolio
      <!-- TODO: Make this a dropdown menu. -->
      <ul>
        <li><a href="">Project 1</a></li>
        <li><a href="">Project 2</a></li>
        <li><a href="">Project 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

In VS Code, if you select the <nav> in the first line and then do the keyboard shortcut:

Shift + Alt + →

It should highlight the whole code block for you.

Answer 2

You can also use the search feature, enabling RegEx search mode as described in this answer

Here is the search string you can use:

<nav>[\s\S]*<\/nav>

Explanation:

1. Search for the specific characters: <nav>

2. Followed by zero-or-more ( * ) white-space ( \\s ) and/or NON-white-space ( \\S ) characters (which includes newlines) , and

3. Stopping when you reach </nav> (inclusive)

See this regex101 demo