Click here to Skip to main content
15,889,315 members
Articles / Web Development / HTML
Tip/Trick

Manipulating CSS and HTML with RegEx

Rate me:
Please Sign up or sign in to vote.
3.00/5 (4 votes)
11 May 2015CPOL 14K   5
This tip provides you with several RegEx find and replace patterns to search through and alter HTML and CSS.

Searching

This pattern will find all HTML elements with no children:

<([a-z]+)[ ]?[^<>]*[>][^<>]*</\1>

This pattern will find all HTML elements with self closing tags:

<[a-z]+[ ]?[^<>]*[ ]/>

Manipulating

HTML

You can use this pair of patterns to remove the "class" attribute of all HTML elements (or swap the word "class" for any other attribute's name):

Find

(<[^>]+)[ ]class="\w+"

Replace

$1

You can use this pair of patterns to remove all attributes of all HTML elements:

Find

(<\w+)[ ][^>/]+(?=/?>)

Replace

$1

CSS

This pair of patterns will shorten hexadecimal color values that qualify:

Find

#([0-9A-Fa-f])\1([0-9A-Fa-f])\2([0-9A-Fa-f])\3

Replace

#$1$2$3

This pair of patterns will remove the unit from values of zero:

Find

\b0(?:px|%|em|pt|in|pc)

Replace

0

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Web Developer JBHworks
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
SuggestionUsing HtmlAgilityPack over RegEx Pin
d.stojanovic12-May-15 21:49
professionald.stojanovic12-May-15 21:49 
GeneralRe: Using HtmlAgilityPack over RegEx Pin
FrostedSyntax13-May-15 7:26
FrostedSyntax13-May-15 7:26 
GeneralIt's a bad idea to parse HTML with RegEx Pin
Manuel Korn12-May-15 2:58
Manuel Korn12-May-15 2:58 
GeneralRe: It's a bad idea to parse HTML with RegEx Pin
FrostedSyntax12-May-15 13:41
FrostedSyntax12-May-15 13:41 
This article isn't a recommendation to parse HTML with RegEx, at least not when you have to worry about parents and siblings and ancestors. This is more of a simple way to search through an HTML document quickly without regard to nesting. For example, let's say you get the HTML from a site, yours or someone else's, and you want to remove all the empty elements or maybe just some of the attributes. This is more efficient than parsing the whole document. Admittedly, you usually need to parse the document but not always.
Christian Frost

GeneralRe: It's a bad idea to parse HTML with RegEx Pin
AlBundyLoves6913-May-15 2:24
professionalAlBundyLoves6913-May-15 2:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.