开发中经常碰见元素使用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

使用正则表达式提取background:url()中的内容的更多相关文章

  1. Jmeter 使用正则表达式提取响应结果中的值

    正则表达式提取的界面如下图: apply to: Main sample and sub-samples:作用于父节点取样器及对应子节点取样器Main sample only:仅作用于父节点取样器Su ...

  2. Java正则表达式提取String字符串中的IP地址

    /** * 正则提前字符串中的IP地址 * @param ipString * @return */ public static List<String> getIps(String ip ...

  3. PHP正则表达式提取html超链接中的href地址

    $preg='/<a .*?href="(.*?)".*?>/is'; preg_match_all($preg,$str,$array2); ;$i<count ...

  4. java 正则表达式提取html纯文本

    本文来自我的个人博客: java 正则表达式提取html纯文本 做内容的大家都知道,从html中直接提取纯文本是一个非常大的问题.现将我做的正则匹配贴上: import java.util.regex ...

  5. Nginx负载均衡-如何自定义URL中的hash key

    "例如请求的url为http://www.a.com/{path_var1}/{path_var2}path_var1和path_var2是两个path variable如果现在只想根据pa ...

  6. JS获取url中的指定参数

    function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...

  7. python利用正则表达式提取文本中特定内容

    正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python ...

  8. C#正则表达式提取HTML中IMG标签的SRC地址(转)

    一般来说一个 HTML 文档有很多标签,比如“<html>”.“<body>”.“<table>”等,想把文档中的 img 标签提取出来并不是一件容易的事.由于 i ...

  9. Jmeter 中正则表达式提取器Regular Expression Extractor

    正则表达式提取器点击后置处理器中Post Processors 中的正则表达式提取器 Regular Expression Extractor Appy to: 表示作用于哪一个请求Main samp ...

  10. 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Contract 分享 WebView 中的内容, 为 WebView 截图

    [源码下载] 重新想象 Windows 8.1 Store Apps (81) - 控件增强: WebView 之加载本地 html, 智能替换 html 中的 url 引用, 通过 Share Co ...

随机推荐

  1. Python-字符串format方法指定参数

    一.字符串的format方法有几种指定参数的方式:(1)按照位置传参(默认方式),传入的参数与{}一一对应(2)关键字传参,关键字(keyword)传递是根据每个参数的名字传递参数.关键字并不用遵守位 ...

  2. 从零开始的 dbt 入门教程 (dbt core 开发进阶篇)

    引 在上一篇文章中,我们花了专门的篇幅介绍了 dbt 更多实用的命令,那么我们继续按照之前的约定来聊 dbt 中你可能会遇到的疑惑以及有用的概念,如果你是 dbt 初学者,我相信如下知识点一定会对你有 ...

  3. 快速上手typescript(进阶篇)

    壹 ❀ 引 我们在快速上手typescript(基础篇)一文中,已经介绍了typescript大部分基础知识,文章结尾也提到这些知识点已足以支撑日常typescript开发,而本文算是对于前文知识点的 ...

  4. NC23048 月月给华华出题

    题目链接 题目 题目描述 因为月月是个信息学高手,所以她也给华华出了一题,让他求: \(\sum_{i=1}^N\frac{i}{\gcd(i,N)}\) 但是因为这个式子实在太简单了,所以月月希望华 ...

  5. NC19429 红球进黑洞

    题目链接 题目 题目描述 在心理疏导室中有一种奇特的疏导工具,叫做红球.红球被提前分为了许多正方形小方格. 每当有人来找ATB做心理疏导时,ATB就会让他去先玩红球,然后通过红球小格方的高度来判断一个 ...

  6. SavedStateHandle的介绍----ViewModel不具备保存状态数据的功能

    LiveData本身不能在进程销毁中存活,当内存不足时,Activity被系统杀死,ViewModel本身也会被销毁. 为了保存LiveData的数据,使用SavedStateHandle. 事故场景 ...

  7. Git实战系列教程

    介绍 本文详细记录了Git一系列核心概念和工作中常用的操作命令,通篇以实际出发拒绝过度理论,值得典藏:). 概念 版本管理系统 版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的 ...

  8. SpringBoot整合Swagger2实现接口文档

    展示一下 访问方式一 访问地址:http://localhost:8080/swagger-ui.html#/ 首页 详情页 访问方式二 访问地址:http://localhost:8080/doc. ...

  9. cronet 的简单学习

    官方的解释 "Cronet is the networking stack of Chromium put into a library for use on mobile. This is ...

  10. 【Android逆向】修改so文件方式修改程序行为

    1. 还是之前的那个apk 链接:https://pan.baidu.com/s/1vKC1SevvHfeI7f0d2c6IqQ 密码:u1an 尝试使用 010Editor来修改so文件 2. 使用 ...