要从HTML中提取img标签的src属性(图片链接),可以使用正则表达式方式。

news2024/11/15 21:27:09

1. 定义提取src属性的正则表达式:

const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g

这个正则会匹配类似<img src="http://example.com/1.jpg">中的src属性和括号中的连接。2. 调用字符串的matchAll()方法使用正则匹配字符串:

const result = [...yourHTML.matchAll(srcRegex)] 

3. result变量会是正则匹配结果的数组,包含匹配的img标签src属性信息,我们将src属性的值(图片链接)提取出来:

const imgSrcs = result.map(v => v[2])

4. imgSrcs数组包含了所有img标签的src链接,我们获取到了HTML中图片的URL列表。完整代码如下:

const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g 
const result = [...yourHTML.matchAll(srcRegex)]
const imgSrcs = result.map(v => v[2])
console.log(imgSrcs)

例子:

getImage(){
				const srcRegex = /<img\s+(?:[^>]*?\s+)?src\s*=\s*(["'])((?:[^\1"]|\\\1|.)*?)\1/g
				const result = [...this.editorHtml.matchAll(srcRegex)]
				const imgSrcs = result.map(v => v[2])
				return imgSrcs
			},

结果:

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/693143.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

系统集成项目管理工程师(项目管理知识[二])

第八章 项目进度管理 1、前导图法4种类型依赖关系&#xff1a; (1)结束-开始的关系&#xff08;F-S型&#xff09; (2)结束-结束的关系&#xff08;F-F型&#xff09; (3)开始-开始的关系&#xff08;S-S型&#xff09; (4)开始-结束的关系&#xff08;S-F型&#xff09; 2、…

Fastjson漏洞

Fastjson 概述 Fastjson是阿里巴巴公司开源的一款json解析器&#xff0c;它可以解析 JSON 格式的字符串&#xff0c;支持将 Java Bean 序列化为 JSON 字符串&#xff0c;也可以从 JSON 字符串反序列化到JavaBean。 漏洞版本 Fastjson <1.2.24 反序列化远程命令执行漏洞 F…

如何关闭带有隐患的端口?一键关闭危险端口?封锁电脑端口工具

你是否担心自己的Windows电脑存在安全隐患&#xff1f;毕竟&#xff0c;黑客攻击时刻都在发生&#xff01;今天&#xff0c;我将为大家分享一些有关Windows危险端口的知识&#xff0c;以及如何一键关闭高危端口&#xff0c;保障你的电脑安全。希望这些能够帮助你更好地保护自己…

Hidl编程实战(一)——定义HAL服务

1. 概述 hidl基本知识可以参考官网 安卓官网-hidl 也讲解了C和Java实现hidl 本文讲解CHal服务的创建 2. 文件的创建 aosp整编过的代码&#xff0c;可以直接choosecombo后使用hidl-gen工具。如果没有整编过&#xff0c;可以单编hidl-gen工具。 hidl-gen工具可以用来协助创建h…

6应用层-6.3【实验】【计算机网络】

6应用层-6.3【实验】【计算机网络】 前言推荐6应用层知识DHCP协议分析DHCP报文格式DHCP抓包分析 6.1 Web服务与FTP服务配置6.2 DNS域名系统配置6.3 DHCP动态协议参数配置实验目的实验内容及实验环境实验原理实验过程1.搭建网络环境2.配置路由器3.配置DSCP服务器4.完成右侧网络主…

20230627通过WPS给PPT幻灯片加入页码

20230627通过WPS给PPT幻灯片加入页码 2023/6/27 23:16 缘起&#xff1a;不想每次都手工给打印的PPT加页码&#xff0c;就通过百度搜索来自动加页码了&#xff01; 真是偷懒让人进步呀&#xff01; 百度搜索&#xff1a;ppt加页码怎么设置 方法步骤.png ?点击「插入」选项卡「幻…

C++(Day1)

思维导图 2.定义一个命名空间Myspace&#xff0c;包含以下函数&#xff1a;将一个字符串中的所有单词进行反转&#xff0c;并输出反转后的结果。例如&#xff0c;输入字符串为"Hello World"&#xff0c;输出结果为"olleH dlroW"&#xff0c;并在主函数内测…

GPT所想即所见的快速解惑

这是学习笔记的第 2464篇文章 在很多年前&#xff0c;自己脑袋里面冒出来这样的一段文字&#xff0c; 黑暗中一个孩子站在田野上看着另外一个孩子 就好像自己在看自己。 说是感慨也好&#xff0c;伤感也罢。那种画面感是一直难以名状的&#xff0c;最近试了下GPT&#xff0c;给…

7.用python写网络爬虫,验证码处理

前言 验证码&#xff08;CAPTCHA&#xff09;的全称为全自动区分计算机和人类的公开图灵测试&#xff08;Completely Automated Public Turing testtotellComputersand Humans Apart&#xff09;从其全称可以看出&#xff0c;验证码用 于测试用户是否为真实人类。一个典型的验证…

高速电路设计系列分享-熟悉JESD204B(下)

目录 概要 整体架构流程 技术名词解释 技术细节 1.物理层 小结 概要 随着高速ADC跨入GSPS范围&#xff0c;与FPGA(定制ASIC)进行数据传输的首选接口协JESD204B。为了捕捉频率范围更高的RF频谱&#xff0c;需要宽带RFADC。在其推动下&#xff0c;对于能够捕捉更宽带宽并支持配置…

eclipse配置tomcat

一、为什么要配置tomcat &#xff1f; Eclipse是一款非常流行的Java开发集成环境&#xff08;IDE&#xff09;&#xff0c;它主要用于开发Java语言相关的应用程序。而Tomcat则是一个流行的开源Web服务器&#xff0c;也是一个Servlet容器。 在Java Web应用程序的开发过程中&…

有哪些免费好用的Python IDE(集成开发环境)?

工欲善其事&#xff0c;必先利其器。Python的学习过程少不了集成开发编辑环境(IDE)。这些Python IDE会提供插件、工具等帮助开发者加快使用Python开发的速度&#xff0c;提高效率。这里收集了一些对开发者非常有帮助的Python IDE(来自hittp://doc.okbase.net/havoc/archive/242…

【CGAL】Clion+vcpkg+MacOS M2

安装brew 链接如下&#xff1a; MacBook使用笔记&#xff1a;安装Homebrew&#xff08;M1&#xff09; - 知乎 打开mac终端&#xff0c;输入&#xff1a; /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" 这个是国内镜…

【Java面试题】设计模式

文章目录 设计模式你知道哪些?工厂模式单例模式★★★适配器模式代理模式定义作用静态代理动态代理★★★ 观察者模式★★★责任链模式 设计模式你知道哪些? ​ 创建型模式&#xff08;Creational Pattern&#xff09;&#xff1a;对类的实例化过程进行了抽象&#xff0c;能…

vegeta压测工具源码修改, 增加 摸高模式

在pacer.go中增加如下代码. pacer接口实现类作用就是控制吞吐量, 什么时间吞吐量多少. 摸高模式(梯度加压)效果如下 type HighTouchPacer struct {StartAt RateSlope float64HighTouchTimes float64PerHighTouchDuration float64PerStayDu…

uniapp 封装 navbar tabbar

最近换了一家公司工作 因为上家公司老板给的钱不多 还特别会压榨员工 好了好了&#xff0c;不扯皮了 1、封装navbar&#xff1a; 首先需要在pages.json中将对应页面的原生navbar给取消 举例&#xff1a; {"pages": [{"path" : "pages/home/inde…

Windows 10 首次RDP提示需要修改密码的处理方式

有一台Windows 10 的机器&#xff0c; 系统管理员给了一个RDP账号和密码&#xff0c; 使用这个账号远程登录这台机器&#xff0c; 在命令行输入 mstsc 命令&#xff0c;输入用户名密码之后却无法正常登入&#xff0c; 提示要修改密码&#xff0c; 提示的信息如下&#xff1a;…

《计算机系统与网络安全》 第三章 网络攻击预防与技术

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…

【Android】跨端安全小计

前言 在挖移动端的时候&#xff0c;通常会关注跨端方向的问题&#xff0c;因为我们能直接从webview容器去访问native的代码&#xff0c;从客户端角度&#xff0c;从前端能直接深入到客户端&#xff0c;所以跨端这块比较有研究意义。 本文详细介绍android前端到客户端跨端通信…

用pytorch进行BERT文本分类

BERT 是一个强大的语言模型&#xff0c;至少有两个原因&#xff1a; 它使用从 BooksCorpus &#xff08;有 8 亿字&#xff09;和 Wikipedia&#xff08;有 25 亿字&#xff09;中提取的未标记数据进行预训练。顾名思义&#xff0c;它是通过利用编码器堆栈的双向特性进行预训练…