css - 正则表达式替换以匹配 css 中的 url() 路径并替换为 asset_path

Question

我一直在努力关注this SO answer尝试编写一些正则表达式来用 Grunt 替换模式。我对正则表达式的理解非常基础，所以我很迷茫。

匹配

.selector {
   background: url('../img/some.filename.png') no-repeat;
}

输出

.selector {
   background: url(<%= asset_path 'some.filename.png' %>) no-repeat;
}

我知道像 /url\(.*?g'\)/ig 这样的东西会匹配 url() 标签，但我不确定如何隔离其中的文件名。使用 Grunt string-replace运行替换的任务。

有什么建议吗？

Answer 1

我想出了一个正则表达式的野兽，我相信它可以完成这项工作。它需要积极的回顾和积极的展望，我不知道 Grunt 是否支持，因为我不知道那是什么。我假设它确实如此，否则我认为没有环顾四周是不可能的。

我使用 C# 测试了这个正则表达式，所以就在这里!

正则表达式:

(?<=url\s*\('([\w\._-]+/)*)([\w\._-]+)(?='\))

测试字符串:

url ('fruit-veggie/apple_orange-pie/this.is-my_file.png')

我会分解它，因为它甚至让我感到困惑。这由 3 个主要部分组成。

积极的回顾:

(?<=url\s*\('([\w\._-]+/)*)

1. (?<=)表示 = 之间的任何内容和 )必须是后面模式的一部分，但不会是匹配的一部分。
2. url\s*\('将匹配 url ('有或没有空格。
3. ([\w\._-]+/)*将匹配包含至少一个单词字符、点、下划线或破折号，后跟正斜杠的任何字符串。这将消耗一个文件夹路径。 *最后将使它消耗任意数量的文件夹，因为您可能没有文件夹开始。

实际文件名:

([\w\._-]+)

这与文件夹模式相同，只是末尾没有正斜杠。这将匹配没有扩展名的文件。

正向预测:

(?='\))

1. (?=)与正向后视相同，只是这是一个前视，它将检查在它之前的模式之后发生的事情。

2. '\)只需检查整个字符串后跟一个引号和一个右括号。

对于文件夹/文件名模式，您必须根据其中的有效字符对其进行调整。因此，如果出于某种疯狂的原因，它们可以包含 # ，您将必须修改正则表达式的那些部分以包含该字符。

希望 Grunt 支持这个正则表达式，否则我会浪费我的时间。但无论如何，这都是一个有趣的挑战!

更新

JavaScript 似乎不支持回顾。如果您正在做的只是针对您当前的元素，为什么不尝试使用两个正则表达式而不是一个？

function GetFile (s) {
    s = s.replace (/url\s*\('([\w\._-]+\/)*/g, '');
    return s.match (/[\w\._-]+(?='\))/)[0];
}

var s = "url ('fruit-veggie/apple_orange-pie/this.is-my_file.png')";
console.log (GetFile (s));

这将删除所有内容，但不包括文件名的第一个字符。然后它返回不带结束引号和括号的文件名，因为 JavaScript 支持先行。