How to change only certain elements, keeping intact other elements with the search module in VS Code?

I want to know how is it possible to change some HTML tag such as :

<tag1>[my text]</tag1>

to another type of tag such as :

<tag2>[my text]</tag2>

but keeping the inner text intact.

Because it is possible to get all elements with regEx, but how to tell VS code to keep the inner text intact ?

More generally, how to change only certain elements by keep other elements intact in the search module of VS Code ?

Thank you for your help.

Solution

Open the search

CTRL + F to find, then click the down arrow or CTRL + H to open the replacing gui directly.

How to do it

Then in the search (first) input enter:

<tag1>(\[my text\])</tag1>

in the replacement (second) input enter:

<tag2>$1</tag2>

Explanations

In the search (first) input:

(\[my text\]): the () is a capturing group and is the first here.
The value to capture is [my text] and the scare bracket are escaped \[.
Maybe you wouldn't have square brackets and instead your regex would be <tag1>(my text)</tag1>.

In the replacement (second) input:

The $1 refer to the value of the first capturing group so [my text].

To go further

Below is a more practical case. Still using search and replacement regex.

Search Regex:

<tag1( +[^>]+)?>((?:.*\r?\n?)*)</tag1>

This regex is used to find a specific tag <tag1> and its content, which will be replaced by another tag.

<tag1:
Matches the literal string <tag1 at the start of the tag. This ensures the regex is looking for the specific opening tag.
( +[^>]+)?:
- +: Matches one or more spaces following the tag name. This ensures that attributes (if any) start after a space.
- [^>]+: Matches one or more characters that are not the closing angle bracket (>), i.e., it matches any attributes within the opening <tag1 ... >.
- ?: The whole group is optional, meaning the tag can either have attributes (like <tag1 class="something">) or no attributes (like <tag1>).
>:
Matches the closing angle bracket (>), marking the end of the opening tag.
((?:.*\r?\n?)*):
- This part matches the content inside the <tag1></tag1> tags.
- (?: ... ): A non-capturing group that matches:
  - .*: Any character (except line breaks), zero or more times.
  - \r?\n?: Optionally matches a carriage return (\r) and/or a newline (\n), which means this can handle both Windows (\r\n) and Unix (\n) style line endings.
- *: The entire non-capturing group can repeat any number of times, effectively matching any text (with or without line breaks) within the <tag1> and </tag1> tags.
</tag1>:
Matches the literal closing </tag1> tag.

Capturing Groups:

$1: Captures any attributes (or spaces) within the opening tag <tag1>. This corresponds to ( +[^>]+)?.
$2: Captures the content inside the opening and closing tags <tag1></tag1>. This corresponds to ((?:.*\r?\n?)*).

Replacement Regex:

<tag2$1>$2</tag2>

This replacement regex transforms the matched content:

<tag2$1>:
Replaces <tag1> with <tag2>, while preserving any attributes from <tag1>. If there were attributes captured in $1, they would be included after <tag2.
$2:
Inserts the content inside the original <tag1></tag1> tags into the new <tag2></tag2> tags.
</tag2>:
Replaces the closing </tag1> tag with </tag2>.

Example:

Original Input:

<tag1>[my text]</tag1>

<tag1>some other text</tag1>

<tag1></tag1>

<tag1><atag>a tag between</atag></tag1>

<tag1><amtag>
    a tag
    in multilines
    and a
    link <a href="http://www.stackoverflow.com"></a>
</amtag></tag1>

<tag1>some tags
     in multilines and a class
     <address><data value="sd
        addressdas
        data
        datad"></data></address>
</tag1>

<tag1 value="2">[my text]</tag1>

<tag1 multi="2"
      lines="3"
      cls="5"
      >[my text]</tag1>

After Replacement:

<tag2>[my text]</tag2>

<tag2>some other text</tag2>

<tag2></tag2>

<tag2><atag>a tag between</atag></tag2>

<tag2><amtag>
    a tag
    in multilines
    and a
    link <a href="http://www.stackoverflow.com"></a>
</amtag></tag2>

<tag2>some tags
     in multilines and a class
     <address><data value="sd
        addressdas
        data
        datad"></data></address>
</tag2>

<tag2 value="2">[my text]</tag2>

<tag2 multi="2"
      lines="3"
      cls="5"
      >[my text]</tag2>