如何从CSS字符串中获取图像的URL。

Question

我有一个问题，我想从字符串中获取图像URL。

字符串的一个例子是：

@media only screen and (max-width: 47.938em) { 
    .screen__start__play-btn::after { content: " "; display: block; height: 25px; position: relative; width: 100%; background-image: url(http://localhost:8080/_client/images/mouseover-line.png); background-size: cover; background-repeat: no-repeat; } 
} - as a string 

这里是我的代码片段：

var cssPropertiesObj = { 
    mediaQuery: ['47.938em'],//media query array function get these results 
    css: ['@media only screen and (max-width: 47.938em) { 
     .screen__start__play-btn::after { content: " "; display: block; height: 25px; position: relative; width: 100%; background-image: url(http://localhost:8080/_client/images/mouseover-line.png); background-size: cover; background-repeat: no-repeat; } 
    }'] // get css of each media query 
}; 


function removeUnwantedMedia(mediaQuery, css, arrayLength) { 
    var startString = css.indexOf('url('); 
    var endString = css.indexOf(')'); 

    if(css.indexOf('url(') === -1) { 
     cssPropertiesObj.mediaQuery.splice(arrayLength, 1); 
     cssPropertiesObj.css.splice(arrayLength, 1); 
    } else { 
     css.substring(startString, endString); 
     console.log(css.substring(startString, endString)); 
    } 
    console.log(css); 
} 
var i; 
for(i = 0; i < cssPropertiesObj.mediaQuery.length; i++){ 
    removeUnwantedMedia(cssPropertiesObj.mediaQuery[i], cssPropertiesObj.css[i], i); 
} 

我所期待cssPropertiesObj.css [0]等于'http://localhost:8080/_client/images/mouseover-line.png'没有所有的css行话。

这是可能做的JS？

Answer 1

您可以使用正则表达式/background-image: url\((.*)\)\;/摆脱字符串的背景图片网址：

var matches = cssPropertiesObj.css[0].match(/background-image: url\((.*)\)\;/); 
if (matches) { 
    cssPropertiesObj.css[0] = matches[1] 
}