如何通过正则表达式在@import语句中获取URL

时间:2018-11-16 07:54:01

标签: javascript css regex

我使用此Reguler Expression获得@import CSS Text语句(如果有)。可以成功运行,例如:

RegExp:
(?:^|\s)?(?:@import)(?:\s)(?:url)?(?:(?:(?:\()(["'])?(?:[^"')]+)\1(?:\))|(["'])(?:.+)\2)(?:[A-Z\s])*)+(?:;)

Input:
@import url('https://meyerweb.com/eric/tools/css/reset/reset200802.css');@import url('http://opdetect.com/x/1-2-2.css');:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace}

Result:
@import url('https://meyerweb.com/eric/tools/css/reset/reset200802.css');
@import url('http://opdetect.com/x/1-2-2.css');

但是,我想得到这样的结果;

Expected Result:
https://meyerweb.com/eric/tools/css/reset/reset200802.css
http://opdetect.com/x/1-2-2.css

我该怎么做?

3 个答案:

答案 0 :(得分:1)

这可能会帮助您...
@import (url\(\"?)?(url\()?(\")?(.*?)(?(1)\")+(?(2)\))+(?(3)\");

在这里查看:
https://regex101.com/r/Dm2M36/1

答案 1 :(得分:1)

您可以使用基于您的正则表达式:

(?:^|\s)?(?:@import)(?:\s)(?:url)?(?:(?:(?:\()(["'])?(?:https?:)?([^"')]+)\1(?:\))|(["'])(?:.+)\2)(?:[A-Z\s])*)+(?:;)

我已将一个非捕获组更改为一个捕获组,并创建了一个新的非捕获组,其中包含“ https?:”。

您需要设置'global'标志。

您想要的结果将在Group 2中。

编辑,根据您更改后的期望结果('http:'现在已包含在匹配项中):

(?:^|\s)?(?:@import)(?:\s)(?:url)?(?:(?:(?:\()(["'])?([^"')]+)\1(?:\))|(["'])(?:.+)\2)(?:[A-Z\s])*)+(?:;)

编辑(发现错误,更改了后引用):

(?:^|\s)?(?:@import)(?:\s)(?:url)?(?:(?:(?:\()(["'])?([^"')]+)\1(?:\))|(["'])(.+)\3)(?:[A-Z\s])*)+(?:;)

您的结果将是Group 2或Group 4.

使用方法:

var input = 'your css';
var regex = / (?:^|\s)?(?:@import)(?:\s)(?:url)?(?:(?:(?:\()(["'])?([^"')]+)\1(?:\))|(["'])(.+)\3)(?:[A-Z\s])*)+(?:;)/g;
var matches = regex.exec(input);
for (var i = 0; i < matches.length; i++)
{
    var output = matches[i][2] + matches[i][4];  // one will be blank
    Console.WriteLine(output);
}

答案 2 :(得分:0)

也许这可以帮助您。

(https?:\/\/.+\.css)(?='\);@)|(http:\/\/.+\.css)

您在第1组和第2组中拥有自己的网址