javascript - 正则表达式提取 sass 文件中的字体系列

Question

可能非常明显，但我不太喜欢正则表达式......

我正在尝试从包含 javascript 中的 @font-face 的 sass 文件中提取字体名称。示例如下:

给定这个字符串:

@font-face {
    font-family: 'fancy-icons';
    src:
        url('#{$icon-font-path}/fancy-icons.ttf?p3owtd') format('truetype'),
        url('#{$icon-font-path}/fancy-icons.woff?p3owtd') format('woff'),
        url('#{$icon-font-path}/fancy-icons.svg?p3owtd#fancy-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

我想提取单词fancy-icons，意思是单引号内的字符串，它可以是任何内容。

关闭尝试让我看到了这段代码:

const scssContent = fs.readFileSync(path.resolve('fonts.scss'), 'utf-8');
scssContent.match(new RegExp(/font-family: '(.*?)';/g));

但我得到的只是整个font-family: 'fancy-icons';。

提前致谢。

Answer 1

简介

正如我在您的问题下面的评论中提到的，您只需要访问第一个捕获组即可。我不确定您在 JavaScript 中使用的代码，但下面是一个代码片段，它执行我所做的建议编辑以及对正则表达式的一些细微调整以提高性能(使用 [^']* 而不是 .*?)。

<小时/>

代码

See regex in use here

font-family:\s*'([^']*)'

用法

var s = `@font-face {
    font-family: 'fancy-icons';
    src:
        url('#{$icon-font-path}/fancy-icons.ttf?p3owtd') format('truetype'),
        url('#{$icon-font-path}/fancy-icons.woff?p3owtd') format('woff'),
        url('#{$icon-font-path}/fancy-icons.svg?p3owtd#fancy-icons') format('svg');
    font-weight: normal;
    font-style: normal;
}`;

var r = /font-family:\s*'([^']*)'/g;
var m = r.exec(s);
while(m != null) {
  console.log(m[1]);
  m = r.exec(s);
}

<小时/>

说明

• font-family: 按字面意思匹配
• \s* 匹配任意数量的空白字符
• ' 按字面意思匹配撇号字符
• ([^']*) 将除撇号字符之外的任何字符捕获到捕获组 1 中任意次
• ' 按字面意思匹配撇号字符