Notepad++ HTML – How to Perform .class Specific Search and Replace

htmlnotepadsublime-text-2

I'm trying to remove entire tag with specific class:

Code:

<div> 
Blah blah 
<div class='myClass'>
  <div>some other div</div>
</div>
</div>

<div> 
Blah blah 
<div class='myClass'>
  more text
</div>
</div>

<div> 
Blah blah 
<div class='myClass'>
  more text
</div>
</div>

I want to search for .myClass tag and replace it with "" (delete)
so the Result is:

<div> 
Blah blah 

</div>

<div> 
Blah blah 

</div>

<div> 
Blah blah 

</div>

I know it's easy with jQuery but I want to do it on the text editor side.
Or maybe I can just view code and copy it after jquery has deleted it.
Sublime Text or Notepad++

Thanks!

Best Answer

Use notepad++ with regular expressions

  1. Open Notepadd++
  2. Press CTRL+H
  3. Select Regular expression as search mode
  4. Enter ^.*myClass.*$ under Find what and nothing under Replace with
  5. Click Replace all

enter image description here


Cases where start and end strings are in different lines (Notepad 6.xx)

We use a workaround and temporary delete all carriage returns (+newlines).
This gives us a single long line where its much easier to use RegEx. Later we put the carriage returns back.

  1. Choose a unique string like %%%NEWLINE%%% which doesn't occur so far in your text.
    Test it first with a simple CTRL+F search
  2. Press CTRL+H and select Regular expression as search mode
  3. Find \r\n and replace with %%%NEWLINE%%%. Click Replace all.
    \r\n are special characters and stand for carriage return and newline. You get one long line.
    Remember: From now on you can't use ^ and $ anymore
  4. Find <div .*?myClass.*?</div> and replace with nothing (Notice the space)
  5. Find %%%NEWLINE%%% and replace with \r\n to bring back our normal text structure

While writing my edit I noticed you have changed your question with a game breaker. This method (probably no RegEx method at all) won't work while you have nested <div></div> tags. The RegEx engine can't know if it should stop at the 2nd, 3th or n-th </div>

Used RegEx

^  → line beginning
.  → any single character
*  → repeat previous pattern 
.*  → any characters as long as possible (greedy)  
.*? → any characters as short as possible (non greedy)
$  → line end

Used resources

Related Question