Question

我有以下正则表达式在css文件中找到url：

url\(("|')?(images\/|img\/)?((\.\.\/)+|(\.\/)+)?(img)?

到目前为止它工作得很好，除了我不想匹配if url(之后是data 例如：

DOES/SHOULD MATCH
background-image: url("img/home_bbbbbb_14.png");
background-image: url(img/home_bbbbbb_14.png);
background-image: url(images/home_bbbbbb_14.png);
background-image: url('images/home_bbbbbb_14.png');
background-image: url("images/home_bbbbbb_14.png");
background-image: url(home_bbbbbb_14.png);
background-image: url('home_bbbbbb_14.png');
background-image: url("home_bbbbbb_14.png");
background-image: url("../img/home_bbbbbb_14.png");
background-image: url("./img/home_bbbbbb_14.png"); 
background-image: url("../../img/home_bbbbbb_14.png");

SHOULD NOT MATCH (because of data)
url(data:image/svg+xml;base64,PHN2 ...

如何排除此案？

https://regex101.com/r/3mMdTI/2

Answer 1

这是negative lookahead assertion：

的情况

url\((?!data\b)("|')?(images\/|img\/)?((\.\.\/)+|(\.\/)+)?(img)?

或者，通过使用字符类和非捕获组进行更优化：

url\((?!data\b)["']?(?:images\/|img\/)?(?:(?:\.\.\/)+|(?:\.\/)+)?(?:img)?

Answer 2

你的正则表达式重复不同的模式，例如：

(images\/|img\/)    -->    (?:im(?:ages|g))\/
        ^     ^

您还可以选择所有群集：

("|')?(images\/|img\/)?((\.\.\/)+|(\.\/)+)?(img)?
     ^                ^                   ^     ^

这完全使你的模式无用。这就是为什么我会使用另一个正则表达式来明确匹配图片网址，而不用担心他们的路径是什么：

background-image:\s*(url\((?!data)[^)]+\))
                          ^ A negative lookahead to avoid matching data:***

第一个捕获组拥有你需要的东西。

Live demo

Javascript正则表达式重复可选组

2 个答案: