javascript - 从 CSS 文件中提取所有 URL 链接

Question

我有一个带有 CSS 的 Assets 文件，其中包含以下属性:背景图片:url(my-url.jpg)我试图从 url() 中提取所有图像。我怎样才能在 JS 中实现它？

Answer 1

如果样式表加载到页面，你可以得到StyleSheetList , 然后使用 document.styleSheets 选择样式表.选择样式表后，用 Array#reduce 迭代它的规则，使用正则表达式提取 backgroundImage url，如果结果不是 null(我们有一个 url)，将它插入 urls 数组:

可以得到相关的s

const result = [...document.styleSheets[0].rules]
  .reduce((urls, { style }) => {
    var url = style.backgroundImage.match(/url\(\"(.+)\"\)/);
      
    url && urls.push(url[1]);
  
    return urls;
  }, []);
  
console.log(result);

.bg {
  width: 100px;
  height: 100px;
}

.a {
  background: url(http://lorempixel.com/200/200);
}

.b {
  background: url(http://lorempixel.com/100/100);
}

<div class="bg a"></div>

<br />

<div class="bg b"></div>