【发布时间】:2014-06-13 18:34:30
【问题描述】:
我正在使用以下 javascript 正则表达式来定位我的 css 中的图像 url,并将它们包装在一个液体标签中(用于 Shopify 主题):
text.replace(/url\(()(.+?)\1\)/g, "url({{'$2' | asset_url}})");
这将改变这一点:
url(example.jpg)
到这里:
url({{'example.jpg' | asset_url}})
这很好用,但我的 css 还包含我不想定位的数据 url。例如
url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2212px%22%20height%3D%2216px%22%20viewBox%3D%220%200%2012%2016%22%20enable-background%3D%22new%200%200%2012%2016%22%20xml%3Aspace%3D%22preserve%22%3E%3Cg%3E%20%3Cg%3E%20%20%3Cg%3E%20%20%20%3Cg%3E%20%20%20%20%3Cpolygon%20fill%3D%22%2300ABA8%22%20points%3D%229.8%2C15.3%2011.1%2C13.7%204.1%2C8%2011.1%2C2.3%209.8%2C0.7%200.9%2C8%20%20%20%20%20%22%2F%3E%20%20%20%3C%2Fg%3E%20%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E")
我需要如何修改我的正则表达式以排除上例中的数据 url?
【问题讨论】:
-
Liquid 是服务器端。用 JavaScript 这样做的目的是什么?
-
@Jason 我有一个使用 sass 和 grunt 的工作流,如下所示: * Sass 正常处理 css 文件 * Grunt 看到 sass 已更改并运行“复制”任务 * 复制任务获取复制新的 css 文件并运行正则表达式以更改图像 url * 复制任务将修改后的 css 文件保存到一个单独的主题目录中,准备上传到 Shopify * Shopify Manager 应用程序然后自动将新的 css 文件上传到我的在线主题这个工作流程允许我拥有我可以在本地看到的主题版本(使用标准图像 url)和适用于 Shopify 的版本(带有asset_url 标签)。
标签: javascript css regex shopify