在 CSS 中将相对 URL 转换为绝对 URL 的正则表达式

Question

我正在将多个 CSS 文件合并为一个（CSS 文件的层次结构是不同的），所以我需要将 CSS 文件中的相对 URL 转换为绝对 URL。

以下是要求；

CSS file URL: http://example.com/template/default/css/style.css
Domain: http://example.com

输入

#test {
    background:url(../images/test.jpg);
    background:url( 'test.jpg' );
    background:url("../../common/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

需要的输出

#test {
    background:url(http://example.com/template/default/images/test.jpg);
    background:url( 'http://example.com/template/default/css/test.jpg' );
    background:url("http://example.com/template/common/test.jpg"  );
    background:url(http://example.com/test.jpg);
    background:url('https://example.com/test.jpg');
    background:url( '//example.com/test.jpg' );
    background:url( "//example.com/test.jpg" );
    background:url(//example.com/test.jpg);
}

请注意../ 和../../ 的相对路径。

我已经尝试了来自 preg_replace() regex to match relative url() paths in CSS files 的类似解决方案，但这是不同的，我无法让它适用于我的情况。

提前感谢您的帮助。

Answer 1

解决方案非常简单。如果您想在 HTML 页面上加载任何文件、图像等，您必须使用/，因此任何 URL 都将是 domain.com/URL。

你的 CSS 应该是：

#test {
    background:url(/test.jpg);
    background:url(/template/default/images/test.jpg);
}

这适用于任何文件：CSS、JS 文件、<a> 标签中的链接等。

---

编辑

因此，您必须使用 php 来执行此操作。我建议你创建自己的函数/类来读取文件的根路径（这里是http://example.com/template/default/css/）然后分解你给的路径，如果你收到..返回一个文件夹（删除css/ in这种情况下）并添加不是..的其他部分。

非常简单直接。