使用正则表达式剥离 css - Stripping css with regex?

Stripping css with regex?

本文关键字：css 剥离正则表达式 | 更新日期: 2023-09-27

正则表达式对我来说很困惑，所以让我在这里提供一个例子，希望有人可以帮助我。

我正在构建一个图标数组，css 看起来像这样。

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

显然还有更多的图标，但我需要获取图标名称，而不是遍历每个图标并擦除它，我想使用正则表达式擦除.icon-保留图标名称，然后从:before擦除到末尾}

我读过关于正则表达式的文章，但有很多不同的答案和问题，替换特殊字符和数值 1-10 和字母 a-z 的一般方法是什么。

因此，用空白替换.icon-既容易又:before { content:"'然后随机数变得棘手。

所以我的问题是我想要实现的最佳语法是什么？

这取决于您将在哪里使用正则表达式。什么语言，什么程序等。据我了解，您想擦除.icon-，保留图标名称，然后删除其余部分？

这是一个(简约的(正则表达式，可以在Notepad++中使用，以查找和替换您想要的方式：

查找内容： '.icon-|:before '{'r'n.+'r'n'}

替换为：

输出：

download
upload
inbox
play-circle

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

我不写Javascript代码，但上面的代码似乎有效，可能会给你一些提示。请注意，您必须转义原始字符串中的双引号。您正在寻找的特定技术是反向引用。

我从这篇文章中得到了灵感。

你说你想建立一个数组。因此，无需更换或擦除。只需提取图标名称。

在 php 中，你可以这样做：

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

您肯定想阅读 php 手册中的正则表达式文档：http://www.php.net/manual/fr/book.pcre.php。它是完整且易于遵循的。

最简单的形式，我很快就想到了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]); 
}

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

使用此模式，您可以循环访问 CSS 文件中的所有图标名称。通过修改[a-z-]部分，您可以定义这些名称可以包含的字符。在我的示例中，我使用 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;
}