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

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.mfbz.cn/a/34476.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【数据仓库】Apache Doris介绍

Apache Doris介绍 Apache Doris应用场景 Apache Doris核心特性 Apache Doris架构 Doris数据模型三种 Aggregate模型介绍 Uniq模型介绍 在某些多维分析场景下,用户更关注的是如何保证Key的唯一性Key 唯一性约束。因此&#xff0c;我们引入了 Unig 的数据模型。该模型本质上是聚…

redis高可用(二)

redis高可用&#xff08;二&#xff09; 一、主从复制 1.概念 主从复制&#xff0c;是指将一台Redis服务器的数据&#xff0c;复制到其他的Redis服务器。前者称为主节点(Master)&#xff0c;后者称为从节点(Slave)&#xff1b;数据的复制是单向的&#xff0c;只能由主节点到…

爬虫入门指南(5): 分布式爬虫与并发控制 【提高爬取效率与请求合理性控制的实现方法】

文章目录 前言多线程与多进程多线程多进程多线程和多进程的选择 使用Scrapy框架实现分布式爬虫1. 创建Scrapy项目2. 配置Scrapy-Redis3. 创建爬虫4. 启动爬虫节点5. 添加任务到队列 并发控制与限制请求频率并发控制限制请求频率 未完待续... 前言 在进行爬虫任务时&#xff0c;…

开源 sysgrok — 用于分析、理解和优化系统的人工智能助手

作者&#xff1a;Sean Heelan 在这篇文章中&#xff0c;我将介绍 sysgrok&#xff0c;这是一个研究原型&#xff0c;我们正在研究大型语言模型 (LLM)&#xff08;例如 OpenAI 的 GPT 模型&#xff09;如何应用于性能优化、根本原因分析和系统工程领域的问题。 你可以在 GitHub …

Scrapy框架--settings配置 (详解)

目录 settings配置 官网-参考配置 配置文档 Scrapy默认BASE设置 settings配置 Scrapy框架中的配置文件&#xff08;settings.py&#xff09;是用来管理爬虫行为和功能的关键部分。它是一个Python模块&#xff0c;提供了各种配置选项&#xff0c;可以自定义和控制爬虫的行为。…

Excel实用技巧 如何将EXCEL中在同个单元格中的汉字和数字分开

右边字符串&#xff0c;左边数字 RIGHT(A1,LENB(A1)-LEN(A1)) LEFT(A1,2*LEN(A1)-LENB(A1)) 左边字符串&#xff0c;右边数字 LEFT(A1,LENB(A1)-LEN(A1)) RIGHT(A1,2*LEN(A1)-LENB(A1))

关注个人信息安全

近日&#xff0c;某高校毕业生在校期间窃取学校内网数据&#xff0c;收集全校学生个人隐私信息的新闻引发了人们对互联网生活中个人信息安全问题的再度关注。在大数据时代&#xff0c;算法分发带来了隐私侵犯&#xff0c;在享受消费生活等便捷权利的同时&#xff0c;似乎又有不…

jupyter-notebook使用指南

jupyter-notebook使用指南 jupyter-notebook安装[python版][anaconda版] jupyter-notebook如何导出PDF&#xff1f;【没解决&#xff0c;直接看最后&#xff0c;不要跟着操作&#xff01;】正常导出步骤安装Pandoc安装Xelatex问题没解决&#xff0c;懒得安装了&#xff0c;放弃…

【数据可视化】大作业(意向考研高校的数据可视化)

文章目录 前言一、数据介绍1.1 基本信息1.2 考研信息1.3 导师信息 二、预处理及分析2.1 数据预处理2.1.1 考研信息预处理2.1.2 导师信息预处理 2.2 数据分析 三、可视化方法及结果3.1 可视化方法3.2 可视化结果展示3.2.1 基本信息3.2.2 考研信息3.2.3 导师信息 四、总结五、附录…

WWDC2023 Metal swift 头显ARKit支持c c++ 开发

1 今年WWDC&#xff0c;我们看见了苹果的空间计算设备&#xff0c;visionOS也支持了c c API. 这有什么好处呢&#xff0c;不是说能够吸引更多c c开发者加入苹果开发者阵营&#xff0c;而是我们过去的很多软件&#xff0c;可以轻松对接到苹果的头显设备&#xff0c;让我们的软件…

AI 语音 - 人物音色训练

前情提要 2023-07-02 周日 杭州 阴晴不定 AI 入门三大项&#xff0c;AI 绘画基础学习&#xff0c;AI 语音合成&#xff0c;AI 智能对话训练&#xff0c;进入 AI 语音合成阶段了&#xff0c;搓搓小手很激动的&#xff0c;对于一个五音不全的我来说&#xff0c;这个简直了(摆脱…

DatenLord前沿技术分享 No.29

达坦科技专注于打造新一代开源跨云存储平台DatenLord&#xff0c;通过软硬件深度融合的方式打通云云壁垒&#xff0c;致力于解决多云架构、多数据中心场景下异构存储、数据统一管理需求等问题&#xff0c;以满足不同行业客户对海量数据跨云、跨数据中心高性能访问的需求。BSV的…

C国演义 [第四章]

第四章 全排列题目理解步骤树形图递归函数递归结束条件单层逻辑 代码 全排列II题目理解步骤递归函数递归结束条件单层逻辑 代码 全排列 力扣链接 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 示例 1&#xff1a; 输…

【前端】导航栏html(ul+li)/css/js(jq)

引入jq <script src"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> css代码 <style>ul {list-style: none;margin: 0;padding: 0;}li {cursor: pointer;}.color-white {color: #FFFFFF !important;background-color: rgb…

Python工具箱系列(三十七)

二进制文件操作&#xff08;上&#xff09; python比较擅长与文本相关的操作。但现实世界中&#xff0c;对于非文本消息的处理也很普遍。例如&#xff1a; ◆通过有线、无线传递传感器获得的测量数据。 ◆卫星通过电磁波发送测量数据。 ◆数据中心的数万台服务器发送当前CP…

Eureka注册失败解决

根据查看网上资料发现是服务端自己自己注册了&#xff0c;所以需要自己关闭服务端注册 加上两行代码 fetch-registry: false register-with-eureka: false 即可注册成功

基于Java+SpringBoot+Vue前后端分离摄影分享网站平台系统

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

python爬虫-逆向实例小记-3

注意&#xff01;&#xff01;&#xff01;&#xff01;某数据网站逆向实例仅作为学习案例&#xff0c;禁止其他个人以及团体做谋利用途&#xff01;&#xff01;&#xff01;&#xff01; 案例分析 第一步&#xff1a;分析页面。查看响应内容&#xff0c;内容加密 第二步&am…

【周末闲谈】浅谈“AI+算力”

随着人工智能技术的飞速发展&#xff0c;“AI算力”的结合应用已成为科技行业的热点话题&#xff0c;甚至诞生出“AI算力最强龙头“的网络热门等式。该组合不仅可以提高计算效率&#xff0c;还可以为各行各业带来更强大的数据处理和分析能力&#xff0c;从而推动创新和增长。 文…

k8s中kubectl陈述式资源管理

陈述式管理资源的方法 1&#xff0c;陈述时资源管理集群资源的唯一入口是通过相应的方法调用的apiserver的接口 2&#xff0c;kubectl 是官方的ctl命令&#xff0c;用于与 apiserver 进行通信&#xff0c;将用户在命令行输入的命令&#xff0c;组织并转化为 apiserver 能识别…
最新文章