用正則表達式剝離CSS？

Question

正則表達式讓我感到困惑，因此讓我在此處提供示例，希望有人可以幫助我。

我正在構建一個圖標數組，css看起來像這樣。

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

顯然還有更多的圖標，但是我需要獲取圖標名稱，而不是遍歷每個圖標並刪除它，我想使用regex刪除.icon-保留圖標名稱，然后從:before到end刪除}

我讀到有關正則表達式的信息，但是有很多不同的答案和問題，替換特殊字符和數字值1-10和字母az的一般方法是什么。

因此，將.icon-替換為空白以及:before { content:"\\之后將非常容易，然后使用隨機數會比較棘手。

所以我的問題是什么是我想要達到的最佳語法？

Answer 1

這取決於您要在哪里使用RegEx。 什么語言，什么程序等。據我了解，您想要刪除.icon- ，保留圖標名稱，然后刪除其余內容？

這是一個（簡約的）正則表達式，可以在Notepad ++中使用它來查找和替換所需的方式：

\\.icon-|:before \\{\\r\\n.+\\r\\n\\}找到\\.icon-|:before \\{\\r\\n.+\\r\\n\\}

用。。。來代替：

輸出：

download
upload
inbox
play-circle

Answer 2

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

我沒有編寫Javascript代碼，但是上面的代碼似乎可以正常工作，並且可能會給您一些提示。 請注意，您必須對原始字符串中的雙引號進行轉義。 您正在尋找的特定技術是反向引用 。

我從這篇文章中得到了啟發。

Answer 3

您說您想構建一個數組。 因此，無需更換或擦除。 只需提取圖標名稱。

在php中，您可以這樣做：

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

您絕對想閱讀php手冊中的regex文檔： http : //www.php.net/manual/fr/book.pcre.php 。 它是完整且易於遵循的。

Answer 4

最簡單的形式是我很快想到了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]); 
}

Answer 5

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

使用此模式，您可以遍歷CSS文件中的所有圖標名稱。 通過修改[az-]部分，您可以定義這些名稱可以包含的字符。 在我的示例中，我使用a到z和破折號（ - ）。

Java代碼示例：

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