Stripping css with regex?

Question

Regex is quite confusing to me, so let me provide an example here and hopefully someone can help me out.

I am building an array of icons, the css looks like this.

.icon-download:before {
  content: "\f01a";
}
.icon-upload:before {
  content: "\f01b";
}
.icon-inbox:before {
  content: "\f01c";
}
.icon-play-circle:before {
  content: "\f01d";
}

There is way more icons obviously, but I need to get the icon name, instead of going through each one and erasing it, I want to use regex to erase .icon- keep the icon name then erase from :before to the end }

I read about regex but there are so many different answers and problems, what is the general way of replacing special characters and numeric values 1-10 and alphabet a-z.

So replacing .icon- with blank will be easy as well as :before { content:"\ then it gets tricky with the random numbers.

So my question is whats the best syntax for what I am trying to achieve?

Oh sorry, its just with find and replace using regex. If say javascript or php would be easier then by all means, id be open to that. — Michael Joseph Aubry, Oct 10 '13 at 02:19
Please make sure to include a properly-formatted sample of your **expected output** so folks understand the results you're trying to achieve. — Todd A. Jacobs, Oct 10 '13 at 02:22
I would suggest you add language tags to your question so that it could get considerably more attention :) — Terry Li, Oct 10 '13 at 02:45
Sorry but I've never used regex in another language I always used it just for find and replace.. — Michael Joseph Aubry, Oct 10 '13 at 03:06

score 2 · Answer 1 · answered Oct 10 '13 at 02:52

2

It depends on where you're going to use the RegEx. What language, what program etc. From what I understand you want to erase the .icon-, keep the icon name, then erase the rest?

Here's a (minimalistic) regex that can be used in Notepad++ to find & replace the way you want it:

Find what: \.icon-|:before \{\r\n.+\r\n\}

Replace With:

Output:

download
upload
inbox
play-circle

answered Oct 10 '13 at 02:52

Rowan Freeman

15,724
11
69
100

+1 I think you were the only one who understood what OP really needed. – Terry Li Oct 10 '13 at 03:10

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

".icon-download:before { content: \"\f01a\";}".replace(/\.icon\-(.*?):before {.*?}/, "$1")

I don't write Javascript code, but the code above seems to work and might give you some hint. Note that you have to escape the double quotes in the original string. The specific technique you are looking for is back-reference.

I got the inspiration from this post.

edited May 23 '17 at 12:07

Community

1
1

answered Oct 10 '13 at 02:43

Terry Li

16,870
30
89
134

You also need to escape the backslashes. – Lorenz Meyer Oct 10 '13 at 02:48
@LorenzMeyer Where? The code seems to work under [JSFiddle](http://jsfiddle.net/). – Terry Li Oct 10 '13 at 03:00
in the input string : ".icon-download:before { content: \"\\f01a\";}". – Lorenz Meyer Oct 10 '13 at 03:05

score 1 · Answer 3 · answered Oct 10 '13 at 03:02

1

You say you'd like to build an array. There is thus no need to replace or erase. Simply extract the icon names.

In php you could do it like this :

$css = readfile( ... ); // get css as a string
preg_match_all ('/icon-([-a-z]+):/', $css, $matches);
$result = $matches[1];

You definitely would like to read the regex documentation in the php manual : http://www.php.net/manual/fr/book.pcre.php. It is complete and easy to follow.

answered Oct 10 '13 at 03:02

Lorenz Meyer

19,166
22
75
121

Cool stuff never thought about extracting the words this is a great resource for future use... – Michael Joseph Aubry Oct 10 '13 at 03:05

score 0 · Answer 4 · answered Oct 10 '13 at 03:01

Simplest form I quickly came up with off the top of my head in JavaScript.

    // add more matches here
var pattern = /(\.icon\-(download|inbox|play\-circle))/g;

var m;

var text = '.icon-download:before {'+
                'content: "\f01a";'+
        '}'+
        '.icon-upload:before {'+
        '  content: "\f01b";'+
        '}'+
        '.icon-inbox:before {'+
        '  content: "\f01c";'+
        '}'+
        '.icon-play-circle:before {'+
        '  content: "\f01d";'+
        '}';

var reg = new RegExp(pattern);

while((m = reg.exec(text)) != null){
   alert(m[0]); 
}

score 0 · Answer 5 · answered Mar 15 '16 at 10:51

/.icon-([a-z-]*):before {[^\}]*}/gm

Using this pattern you can iterate through all icon names in your CSS files. By modifying the [a-z-] part you can define the character that those name can contain. In my example I went with a to z and dashes (-).

An example with Java code:

public static ArrayList<String> parseIconNames(String css) {
    ArrayList<String> names = new ArrayList<String>();

    Pattern pattern = Pattern.compile(".icon-([a-z-]*):before {[^\\}]*}", Pattern.MULTILINE);
    Matcher matcher = pattern.matcher(css);

    while(matcher.find()) {
        names.add(matcher.group(1));
    }

    return names;
}

Stripping css with regex?

5 Answers5