提取样式表中url()中的内容

开发中经常碰见元素使用background或者background-imgae等样式表提供的属性来展示图片而不是img使用标签,在修改的时候就会发现弊端在需要动态修改图片的时候没有img.src那样顺手,简单的法子就是提取出元素的background属性,然后使用substr字符传截取获取到的值,马虎的思考一下这确实没问题,但是真这样做了之后就发现了一个问题(说的正式在下😄),不同浏览器下面同样的代码获取到的结果不一致

反例

<div id='test' style='background:url(https://www.baidu.com/img/bd_logo1.png) 200px 100px;width:200px;height:100px'></div>

document.querSelector('#test').style.background

chrome

url("https://www.baidu.com/img/bd_logo1.png") 200px 100px

firefox

rgba(0, 0, 0, 0) url("https://www.baidu.com/img/bd_logo1.png") repeat scroll 200px 100px

其它内核手头暂时没有,没有测试,使用传统的substr肯定是行不通了,接下来只有使用正则表达式去解决了

如果使用style.backgroundImage这两浏览器获取到的值就会是一样的了

下面是使用正则表达式去获取目标内容

第一步

匹配出url(xxxx)使用/url\("?'?.*"?'?\)/g

let reg = /url\("?'?.*"?'?\)/g
'rgba(0, 0, 0, 0) url("https://www.baidu.com/img/bd_logo1.png") repeat scroll 200px 100px'.match(reg)
// ['url("https://www.baidu.com/img/bd_logo1.png")']
'url(https://www.baidu.com/img/bd_logo1.png)'.match(reg)
// ['url("https://www.baidu.com/img/bd_logo1.png")']

第二步

剔除不相关的内容,/"|'|url|\(|\)/g

let reg = /"|'|url|\(|\)/g
'url("https://www.baidu.com/img/bd_logo1.png")'.replace(reg,'')
// https://www.baidu.com/img/bd_logo1.png

最终

综合前面的例子

function getBackgroundUrl(background){
  let regBackgroundUrl = /url\("?'?.*"?'?\)/g;
  let regReplace = /"|'|url|\(|\)/g;
  return background.match(regBackgroundUrl)[0].replace(regReplace,'')
}

console.log(getBackgroundUrl('rgba(0, 0, 0, 0) url("https://www.baidu.com/img/bd_logo1.png") repeat scroll 200px 100px'))
// https://www.baidu.com/img/bd_logo1.png