Question

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

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

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

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

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

因此，将}替换为空白将很容易，.icon-也会因随机数而变得棘手。

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

Answer 1

这取决于您将使用RegEx的位置。什么语言，什么程序等。根据我的理解，您要删除.icon-，保留图标名称，然后删除其余部分？

这是一个（简约）正则表达式，可以在Notepad ++中用来查找＆amp;替换你想要的方式：

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

替换为：

输出：

download
upload
inbox
play-circle

Answer 2

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

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

我从this post获得灵感。

Answer 3

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

在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。它完整且易于理解。

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文件中的所有图标名称。通过修改[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;
}

用正则表达式剥离css？

5 个答案: