CODEWITHSUNDEEP
javascriptphpregex
Michael Joseph Aubry
Michael Joseph Aubry

Reputation: 13472

Stripping css with regex?

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?

Upvotes: 0

Views: 212

Answers (5)

Michaël van de Weerd
Michaël van de Weerd

Reputation: 788

/.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;
}

Upvotes: 0

Lorenz Meyer
Lorenz Meyer

Reputation: 19945

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.

Upvotes: 1

TheRealChx101
TheRealChx101

Reputation: 1544

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]); 
}

Upvotes: 0

Terry Li
Terry Li

Reputation: 17268

".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.

Upvotes: 1

Rowan Freeman
Rowan Freeman

Reputation: 16388

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

Upvotes: 2

Related Questions