使用正则匹配标签

2023-11-16

在我写上一个试题管理项目时,有一个需求是需要匹配HTML文档节点的,因为有些试题是有图片的,所以需要把图片给匹配出来,他储存在数据库的形式如下:

“<img src=”../xxx/xx/x/x.png”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx ~~A.xxx ~~B.xxx ~~C.xxx ~~D.xxx”。我需要把其中的img给匹配出来。

我的第一版答案:/<.+>/结果如下:

确实这样可以把里面的图片匹配出来,但是这个有缺陷。我解释下里面用到的知识点: “.”是匹配任意字符,“+”是匹配多次,所以/<.+>/就是说匹配以”<”开头,中间多个任意字符,以“>”结尾。那么很明显他的缺陷就是当试题中不只有一张图片时他的匹配规则无法满足。图示:

当有两个图片夹着试题内容时,他会把试题给匹配出来,这不符合我们的需求。所以,改

分析为什么会出先这种情况。

注:/<.+>/的匹配规则:匹配以”<”开头,中间多个任意字符,以“>”结尾。

根据上述匹配规则得出结论。

在“<img src=”../xxx/xx/x/x.png”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx<img src=”../xxx/xx/x/x.png”> ~~A.xxx ~~B.xxx ~~C.xxx ~~D.xxx”中符合匹配的有多种。

而正则默认也许是匹配最大范围的:这里用集合的包含关系很好理解。

符合1:<img src=”../xxx/xx/x/x.png”>

符合2:<img src=”../xxx/xx/x/x.png”>xxxxxxxxxx<img src=”../xxx/xx/x/x.png”>

2包含了1,所以他直接跳过了第一个“>”匹配最后一个“>”。

所以这里要用到另一个正则小知识:?

“?”是懒惰匹配,如字面意思,当有符合的匹配项时停止匹配,返回结果。

那么该把“?”放在哪呢。嘿嘿,我想应该有人会想到这个结果:/?<.+>/g。(手动滑稽)

这个是错的。

最终结果:/<.+?>/g,匹配结果如下:

但!这就完美了吗?实则不然,回想下标题:匹配标签。

如果其中不单单有图片标签,试题用了p标签呢?

<img src=”../xx/xx/xxx/x.png”><p>xxxxxxxxxxxxxxxxxxxxxxxx</p>,那么它又炸了。结果:

其实这个想要解决也简单:只需要给他指定匹配哪个标签就行,众所周知:HTML文档的标签都有自己的节点名那么我们只需要基于上面的基础,给他指定匹配img就能解决

那么最最终版答案:/<img.+>/g,下图结果:

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用正则匹配标签 的相关文章

随机推荐

  • Flutter ListView详解

    ListView详解 ListView常用构造 ListView ListView 默认构建 效果 ListView ListTile ListTile 属性 ListTile 使用 效果 ListView builder builder属
  • C# combobox绑定数据源(datasource)

    1 绑定数据源 1 1数据源为dataTable DataTable dt new DataTable 显示的数据 ComBox1 DisplayMemeber name name为DataTable的字段名 隐藏的数据 对于多个数据 可以
  • 左连接(LEFT JOIN)无法返回主表所有行的解决方法

    需求 在业务员管理客户页面 需要展示所有客户信息 并且按客户的最近下单次数进行排序 第一次写的代码如下
  • Vue 2 升级Vue3 ,并且使用vsCode 搭建Vue3 开发环境

    Vue 2 升级Vue 3 版本详细步骤 第一 使用快捷键win R 打开cmd 命令窗口 第二 查看当前电脑运行的vue 版本 请使用如下指令 vue V vue Version 卸载目前vue版本 输入如下指令 npm uninstal
  • JAVA常用的七种设计模式

    学习设计模式之前 我们先要了解一下设计模式的怎么来的 对于设计人员 特别是开发人员吗 往往受限于眼界或经验不能够体会到设计原则的实用性 或者在处理具体问题时 不知道如何把设计原则应用到到设计和代码 因此产生了 模式 随着参与的项目越来越多
  • 数据结构练习题-算法设计题-线性表

    算法设计题 1 将两个递增的有序链表合并为一个递增的有序链表 要求结果链表仍使用原来两个链表的存储空间 不另外占用其它的存储空间 表中不允许有重复的数据 题目分析 合并后的新表使用头指针Lc指向 pa和pb分别是链表La和Lb的工作指针 初
  • vue项目中封装手动上传单个图片并支持修改和移除

    现有的组件库无法满足手动上传文件到服务器 并支持通过按钮修改和移除文件的操作 所以我利用原生input进行封装 如有需要请拿走 1 页面部分 div class upload picture div class uploadItem div
  • 通信原理及系统系列38——图解过采样和欠采样

  • 【华为OD机试真题 JS】关联子串

    标题 关联子串 时间限制 1秒 内存限制 262144K 语言限制 不限 给定两个字符串str1和str2 如果字符串str1中的字符 经过排列组合后的字符串中 只要有一个字符串是str2的子串 则认为str1是str2的关联子串 若str
  • uni-app左右平分九宫格样式

    效果图 1 template 布局
  • 对区块链技术的一些思考

    作者 朱金灿 来源 clever101的专栏 为什么大多数人学不会人工智能编程 gt gt gt 缘起 本想把标题起为有些扯淡的区块链 但想想咱们还是别标题党了 实在一些吧 前段时间有个朋友向我介绍区块链技术 提到区块链技术如何牛逼 说到
  • OSI七层模型与TCP/IP五层模型

    一 OSI参考模型 1 OSI的来源 OSI Open System Interconnect 即开放式系统互联 一般都叫OSI参考模型 是ISO 国际标准化组织 组织在1985年研究的网络互连模型 ISO为了更好的使网络应用更为普及 推出
  • python—test2021.11.2

    1 filter 函数的语法格式如下 newIter filter function iterable 正因为该函数是根据自定义的过滤函数进行过滤操作 所以支持更加灵活的过滤规格 其中 各个参数的含义如下 function 可传递一个用于判
  • Android P PowerManagerService分析(一)

    1 概述 PowerManagerService是负责管理 协调设备电源管理的系统服务之一 设备常见功能如亮灭屏 亮度调节 低电量模式 保持CPU唤醒等 都会通过PMS的协调和处理 其继承自SystemService 因此具有SystemS
  • 创建线程的三种方式,常用线程池介绍

    进程和线程 线程是在一个进程中 并发执行的多个程序逻辑 线程是进程执行的单位 一个进程中至少有一个线程 而这个线程被称为主线程 主线程是一个程序的入口 main 就是由主线程来执行的 线程创建三种方式 1 继承Thread类 2 实现Rnn
  • 深度前馈网络(DNN):理解、应用和Python示例

    目录 1 引言 2 什么是深度前馈网络 3 深度前馈网络的原理 3 1 神经元和激活函数 3 2 前馈传播 3 3 反向传播和参数更新 4 深度前馈网络的应用 4 1 图像分类 4 1 1 数据预处理 4 1 2 模型选择与训练 4 1 3
  • /etc/目录下的passwd文件内容详解

    etc passwd中一行记录对应着一个用户 每行记录又被冒号 分隔为7个字段 其格式和具体含义如下 用户名 口令 用户标识号 组标识号 注释性描述 主目录 登录Shell 1 用户名 是代表用户账号的字符串 通常长度不超过8个字符 并且由
  • 《数据库系统内 幕》存储引擎

    数据库系统内幕 存储引擎 负责内存和磁盘上存储 检索和管理数据 章一 TPC C基准 acid属性 设计存储引擎 章二 b树的平衡 基于磁盘存储的树 不太了解 分页二叉树 总结 章三 文件格式 章四 页头 搜索 分裂合并 平衡 压缩 清扫维
  • html输入框文字颜色_HTML5颜色输入

    html输入框文字颜色 Currently supported in all modern browsers with the exception of Safari and Internet Explorer the potential
  • 使用正则匹配标签

    在我写上一个试题管理项目时 有一个需求是需要匹配HTML文档节点的 因为有些试题是有图片的 所以需要把图片给匹配出来 他储存在数据库的形式如下 img src xxx xx x x png xxxxxxxxxxxxxxxxxxxxxxxxx