---
url: https://sugarat.top/bigWeb/regexp/p1.md
---

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

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

## 反例

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

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

### chrome

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

### firefox

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

其它内核手头暂时没有,没有测试,使用传统的`substr`肯定是行不通了,接下来只有使用`正则表达式`去解决了
:::tip
如果使用`style.backgroundImage`这两浏览器获取到的值就会是一样的了
:::

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

## 第一步

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

```js
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`

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

## 最终

综合前面的例子

```js
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
```