Question

我有一个带有CSS的资产文件，其中包含以下属性： background-image: url(my-url.jpg) 我试图从url（）中提取所有图像。我怎样才能在JS中实现这一目标？

Answer 1

如果样式表已加载到页面，您可以获取StyleSheetList，然后使用document.styleSheets选择样式表。选择样式表后，使用Array#reduce迭代它的规则，使用正则表达式提取backgroundImage url，如果结果不是null（我们有一个url），则将其推入{{1数组：

你可以得到相关的

urls

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);
}

Answer 2

您可以使用.match()，.map()和.replace()

let res = CSSText.match(/url\(.+(?=\))/g).map(url => url.replace(/url\(/, ""));

Answer 3

我用jQuery ajax扩展了@ guest271314的答案。你可以使用它。

$(document).ready(function() {
    $.get("main.css", function(cssContent){
        let res = cssContent.match(/url\(.+(?=\))/g).map(url => url.replace(/url\(/, ""));
        alert( res );       
    }); 
});

Answer 4

我刚刚写了一个更新版本，它迭代页面上的所有样式表：

let css_urls = [...document.styleSheets]
  .filter(sheet => {
    try { return sheet.cssRules }
    catch {}
  })
  .flatMap(sheet => Array.from(sheet.cssRules))
  .filter(rule => rule.style)
  .filter(rule => rule.style.backgroundImage !== '')
  .filter(rule => rule.style.backgroundImage !== 'initial')
  .filter(rule => rule.style.backgroundImage.includes("url"))
  .reduce((urls, {style}) => {
    urls.push(style.backgroundImage);
    return urls;
  }, []);
  
console.log(css_urls);

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

4 个答案: