Append Attributes To Html Tags With Regex in Notepad++

After the latest WP major update, I have been finding myself tackling with the HTML tags more and more, and some repetitive tasks like adding target="_blank" to all a tags have started to become tedious.

If you are also not very fond of new block editor in WordPress or just prefer to add your posts as an HTML code, then using regex to append various attributes all at once could be handy for you also.

In this article, I would like to share how we can use the regex to insert attributes to HTML tags.

I use notepad++ in this example, but this should work with any notepad editor that supports regex search mode.

How to Add target="blank" attribute to a tag

Here we add target=”_blank” to the a tag to open links in a new tab.

We will build two regex codes:

One for finding each a tag within the HTML code. And the second one is for appending the attribute to the element.

Here is the regex expression to match the a tag

(?!.+target\s*=\s*"_blank")(<a[^>]*)

If we break up the code:

(?!.+target\s*=\s*"_blank") –> this ensures that target=”_blank” (with any spaces before or after “=”) doesn’t exist in the a tag

(<a[^>]*) –> this one matches a tag till the end of >

The following expression appends the attribute target="_blank" to the a tag if it already doesn’t contain it.

\1 target = "_blank" –> adds the new attribute if not exists.

Step by Step – How It Works in Notepad++

  • Open the Search menu and click at the “Replace” menu item (or click CTRL + H) to view the replace dialog.
  • Paste the (?!.+target\s*=\s*"_blank")(<a[^>]*) in the “Find what” field
  • Paste the \1 target = "_blank" in the “Replace with” field.
  • Select the “Regular expression” for the “Search Mode”
  • Now, click on the “Replace All” button (or CTRL + A for windows)
  • Target = "blank" should have been added to all a tags in the HTML code
  • If you press the “Replace All” button once more, no replacement will occur. (you can see that from the message on the dialog box – “0 occurrences were replaced”)

Find/Replace Dialog Box

Add Html Attribute with Regex Notepad++ Before Replace

Find/Replace Dialog Box After Replace

Add Html Attribute with Regex Notepad++ After Replace All

Find/Replace Dialog Box After Replace All Repeated

Add Html Attribute with Regex Notepad++ After Replace All Repeated

By tweaking the regular expression, you can use the same expression for adding different attributes to different HTML tags. Here is another example:

Let’s add a class attribute to div tags.

Regular expression for find what field –> (?!.+class\s*=\s*"clsBox")(<div[^>]*)

Replace with field –> \1 class="clsBox"

The above code will search for all div elements and add our class attribute to those that don’t contain this class.

We can actually use this method to add any attribute to any tag in any HTML or XML code. If you have a bunch of files that need to be updated, use the “Find in Files” tab in “Replace” dialog in notepad++ to insert the attributes at once to all files.

Turn the task into a Macro

Why not turn the find/replace operation into a macro and eliminate another repetitive process that would maximize your time.

It is pretty simple to record a macro in notepad++.

  1. Click on the Macro menu, and Start Recording
  2. Repeat the steps above
  3. After you click the “Replace All” button, click on Macro menu again, and choose “Stop Recording”
  4. Lastly, click Menu, and select the “Save Current Recorded Macro” to give a name and shortcut to your macro.

Leave a Comment