如何通过正则表达式获取img标签的src属性-程序员宅基地

技术标签: ViewUI  python  移动开发  javascript  

如何通过正则表达式获取img标签的src属性

1、部分正则语法介绍

\s    匹配任何空白字符,包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。

?    匹配前面的子表达式零次或一次,或指明一个非贪婪限定符。要匹配 ? 字符,请使用 \?。

|    指明两项之间的一个选择。要匹配 |,请使用 \|。

.     匹配除换行符 \n 之外的任何单字符。要匹配 . ,请使用 \. 。

g   全文搜索

i    忽略大小写

详情可参考 http://www.runoob.com/regexp/regexp-syntax.html

2、match 方法介绍

详情参考:http://www.w3school.com.cn/jsref/jsref_match.asp

3、使用正则表达式获取所有 img 标签

从图中可以看出,使用正则表达式  /<img\b.*?(?:\>|\/>)/gi  可以将字符串中的 img 标签进行匹配,并放到一个新数组中

关于  正则表达式  /<img\b.*?(?:\>|\/>)/gi 的解释

首先 标签的开始是 <  

其后紧跟着 img

故使用   /<img\b 进行匹配

.*?  则对字符串进行最小匹配(下一个匹配(?:\>|\/>)出现时,.* 就失效)

img 标签结尾 使用 > 或者 /> ,使用 (?:\>|\/>) 进行匹配

注:圆括号()会有一个副作用,是相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种副作用。

4、获取 img 标签对应的 src 属性



 

从图中可以看出,使用正则表达式 /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i  可以将字符串中的 img 标签进行匹配,并放到一个新数组中,数组下标为1,就是所需要的src属性

关于  正则表达式  /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i  的解释

 

 

\bsrc\b 是把src当成一个单词进行匹配

\s*=\s* 则是匹配 = 前后是否有空格(* 为0个以上,包括0)

[\'\"]?  进行最小匹配,src 一般用单引号或双引号包裹

([^\'\"]*)  匹配不上单引号和双引号的字符

注:这里没有使用 g 进行全局匹配,是因为 img 标签只有一个 src ,匹配到就可以结束了

5、总结

使用   /<img\b.*?(?:\>|\/>)/gi 对一个字符串进行全文匹配,获取所需要的 img 标签

使用   /\bsrc\b\s*=\s*[\'\"]?([^\'\"]*)[\'\"]?/i   对一个 img 标签进行匹配,获取所对应的 src 属性

注:因为个人书写手法的不一致,实际过程中坑你需要去除 \b \s 等一些特性限制,需根据实际需要进行修改

原文地址:http://www.cnblogs.com/ImCehnyx/p/7163691.html

转载于:https://www.cnblogs.com/ImCehnyx/p/7163691.html

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30394333/article/details/96553473

智能推荐

oracle复制文件后报错,virtualbox虚拟机 复制硬盘文件注册出错排除方法及virtualboxmanage命令...-程序员宅基地

文章浏览阅读315次。纪录下我使用VBoxManage的一些经验。1、创建虚拟机VBoxManage createvm –name "winxp" –register这里创建了一个名为winxp的虚拟机,创建完后可以用 VBoxManage list vms命令查看一下当前可用的虚拟机,也可以用VBoxManage showvminfo winxp命令查看一下当前虚拟机winxp的状态及一些默认配置。2、修改虚拟机设置..._oracle vm virtualbox 虚拟盘不能注册两次

matplotlib学习笔记-axis.labelpad是什么意思,有什么用?坐标轴标签的位置坐标-程序员宅基地

文章浏览阅读3.8k次,点赞5次,收藏6次。matplotlib学习笔记-axis.labelpad是什么意思,有什么用?坐标轴标签的位置坐标!_labelpad

Failed to get convolution algorithm. This is probably because cuDNN failed to initialize【解决】_windows10 this is probably because cudnn failed to-程序员宅基地

文章浏览阅读9.5k次。已安装系统背景1、tensorflow-gpu==1.122、cuda9.03、cudnn-9.0-linux-x64-v7.tgz4、ubuntu系统在运行代码的时候出现了报错UnknownError (see above for traceback): Failed to get convolution algorithm. This is probably becau..._windows10 this is probably because cudnn failed to initialize,

【转帖】接口测试人员必备知识技能_问个技术性问题,测接口的时候,怎么查看用户的资料-程序员宅基地

文章浏览阅读69次。一、首先明白接口是什么软件接口是指程序中具体负责在不同模块之间传输或接受数据的并做处理的类或者函数。(而不是指传输的数据!!)二、什么是接口测试接口测试就是通过向接口传递数据来测试这个接口是否正确。比如:一个QQ登录功能接口,就需要我们传递QQ号和密码去验证这个登录接口是否正确,能否使用。三、进行接口测试需要掌握哪些知识1、了解系统及内部各个组件之间的业务逻辑交互;2、了解接口的I/O(input/output:输入输出);3、了解协议的基本内容,包括:通信原理、三次握手、常用的_问个技术性问题,测接口的时候,怎么查看用户的资料

跟我打卡LeetCode 58最后一个单词长度&59螺旋矩阵Ⅱ&60排列序列_螺旋矩阵 58-程序员宅基地

文章浏览阅读2.7k次。最后一个单词长度题目描述给定一个仅包含大小写字母和空格 ’ ’ 的字符串 s,返回其最后一个单词的长度。如果字符串从左向右滚动显示,那么最后一个单词就是最后出现的单词。如果不存在最后一个单词,请返回 0 。说明:一个单词是指仅由字母组成、不包含任何空格字符的 最大子字符串。示例:输入: “Hello World”输出: 5分析这题其实很简单,就是三个步骤模拟这个过程就可以了:具体代码:public int lengthOfLastWord(String s) { if(_螺旋矩阵 58

使用eclipse查看java源码报错source not found_jar has no source attachment-程序员宅基地

文章浏览阅读2.5k次,点赞7次,收藏5次。使用eclipse查看java源码报错source not found的解决办法问题:编写java代码时想要查看调用的系统的类或者接口时,使用快捷键(按住Ctrl,单击类或接口名)报错source not found现象:Source not foundThe JAR file D:\Java\lib\rt.jar has no source attachment.You can at..._jar has no source attachment

随便推点

verdi显示数组设置_verdi 显示多维数组-程序员宅基地

文章浏览阅读1.7k次。IC设计中verdi显示数组设置默认情况下,verdi是显示数组的。默写特殊情况下,verdi不会显示数组信号的值具体设置如下:![verdi数组设置](https://img-blog.csdnimg.cn/dab4574bd64447a4b47109dc5a42e3b3.png#pic_center)4行是生成fsdb波形;5行是生成包含几层波形文件;6行是显示之前不能显示的数组信号..._verdi 显示多维数组

基于FFT的音频分析_可以把fft-音频程序进行改进,提供一个实时的频谱分析界面,更好的进行声音频-程序员宅基地

文章浏览阅读1.6k次。FFT用于信号的频谱分析,本项目基于K60开发板(渡鸦)。##信号采集在测试初期的信号采集选择了用K60片上ADC以单端模式对1KHz方波进行采集。采用方波的原因:第一,方波的频谱是sa函数,可以清楚的看到谐波。第二,片上ADC的动态范围为0~3.3V,对负电压采集需要进行处理。##FFT将ADC采集的时域信号变换到频域ADC采集的信号以数组的形式存放起来,经过FFT算法将时域转换到频谱。..._可以把fft-音频程序进行改进,提供一个实时的频谱分析界面,更好的进行声音频

天天基金网数据接口_天天基金api文档-程序员宅基地

文章浏览阅读4.7w次,点赞18次,收藏72次。基金实时信息:http://fundgz.1234567.com.cn/js/001186.js?rt=1463558676006返回值:jsonpgz({"fundcode":"001186","name":"富国文体健康股票","jzrq":"2016-05-17","dwjz":"0.7420","gsz":"0.7251","gszzl":"-2.28","gztime":"2_天天基金api文档

前端开发必备之MDN(API查阅文档)-程序员宅基地

文章浏览阅读1.2w次,点赞6次,收藏29次。MDN Web Docs(旧称Mozilla Developer Network、Mozilla Developer Center,简称MDN)是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。MDN网址:https://developer.mozilla.org/zh-CN/另外,通过W3C查文档学习也可以,但是MDN更普遍和常用。W3C 指万维网联盟(World Wide Web Consortium)创建于1994年10月,由 Tim Berners-Lee 创建,W3C 是

《论文阅读》Video Super-resolution with Temporal Group Attention-程序员宅基地

文章浏览阅读1.7k次。留个笔记自用Video Super-resolution with Temporal Group Attention做什么Video super-resolution视频超分辨,经典应用,低分辨率的图片在放大后必然是模糊的,超分辨做的便是将低分辨的图片转化成高分辨率的图片并且做到清晰。这里的视频超分辨也是同样一个意思,不过将图片转换成了视频的某个部分,但这里有所增加的依靠便是视频存在着上下帧。做了什么怎么做总结..._video super-resolution with temporal group attention

操作系统置换策略基本算法_opt策略-程序员宅基地

文章浏览阅读3.2k次,点赞4次,收藏8次。页面置换:在地址映射过程中,若在页面中发现所要访问的页面不再内存中,则产生缺页中断(page fault)。当发生缺页中断时操作系统必须在内存选择一个页面将其移出内存,以便为即将调入的页面让出空间。 典型的置换算法有四种,如下所示: OPT:最佳替换算法(optional replacement)。替换下次访问距当前时间最长的页。opt算法需要知道操作_opt策略

推荐文章

热门文章

相关标签