正则表达式替换以匹配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. (?=)与积极的lookbehind相同，除了这是一个前瞻，它将检查在它之前的模式之后的内容。

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

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

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

<强>更新

似乎JavaScript不支持lookbehinds。如果您所做的只是针对当前项目的，那么为什么不尝试使用两个正则表达式呢？

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支持前瞻。

Answer 2

您可以使用以下内容：

(?:url\((.*?)\))

<强> Demo

说明：

在javascript中你可以给：

var s="url('../img/some.filename.png')";
var ss= /(?:url\((.*?)\))/ ;   
console.log(s.match(ss)[0]);