正则表达式怎么匹配图片地址与img标签
这次给大家带来正则表达式怎么匹配图片地址与img标签的,正则表达式匹配图片地址与img标签的注意事项有哪些,下面就是实战案例,一起来看一下。
再上传表情或者图片地址时候很多时候不能直接上传<img src=" " />
,因此在上传评论或者图片之前应该先处理一下img标签。举例如下,希望可以帮助更多的程序猿~
<span style="font-size:14px;">//第一步是获取到带有img标签的字符串 var str = '图片1<img src="arclist/sanai.png">图片2<img src="arclist/em_23.gif">图片3<img src="arclist/451.gif">';</span>
处理获取到的字符串
<span style="font-size:14px;">//将img标签替换为特定编码方式的表达式 var reg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi; str = str.replace(reg, "[face:$1.gif]"); console.log(str);</span>
运算结果为:
<span style="font-size:14px;">图片1[face:sanai.gif]图片2[face:em_23.gif]图片3[face:451.gif]</span>
这样上传到服务器的代码就不会存在html标签,这是一种很好的应对带有图片评论且上传信息禁止html标签的方法。
接下来:
从服务器上返回的上一步中的运行结果,在反向解析,方法如下:
<span style="font-size:14px;">//将特定编码方式替换成img标签的表达式 var regg = / face:([\w]+).gif /gi; str = str.replace(regg,"<img src='images/$1.gif' />"); console.log(str);</span>
运行结果为:
<span style="font-size:14px;">图片1<img src='images/sanai.gif' />图片2<img src='images/em_23.gif' />图片3<img src='images/451.gif' /></span>
下面附上代码的html页,可以全部复制粘贴到html文件中直接运行,亲测可用
<span style="font-size:14px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var str = '图片1<img src="arclist/sanai.png">图片2<img src="arclist/em_23.gif">图片3<img src="arclist/451.gif">'; //将img标签替换为特定编码方式的表达式 var reg = /<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi; str = str.replace(reg, "[face:$1.gif]"); console.log(str); //将特定编码方式替换成img标签的表达式 var regg = / face:([\w]+).gif /gi; str = str.replace(regg,"<img src='images/$1.gif' />"); console.log(str); </script> </body> </html></span>
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是正则表达式怎么匹配图片地址与img标签的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

热门话题

随着社交媒体的不断发展,小红书已经成为越来越多年轻人分享生活、发现美好事物的平台。许多用户在发布图片时遇到了自动保存的问题,这让他们感到十分困扰。那么,如何解决这个问题呢?一、小红书发布自动保存图片怎么解决?1.清除缓存首先,我们可以尝试清除小红书的缓存数据。步骤如下:(1)打开小红书,点击右下角的“我的”按钮;(2)在个人中心页面,找到“设置”并点击;(3)向下滚动,找到“清除缓存”选项,点击确认。清除缓存后,重新进入小红书,尝试发布图片看是否解决了自动保存的问题。2.更新小红书版本确保你的小

随着抖音短视频的火爆,用户们在评论区互动变得更加丰富多彩。有些用户希望在评论中分享图片,以更好地表达自己的观点或情感。那么,抖音评论里怎么发图片呢?本文将为你详细解答这个问题,并为你提供一些相关的技巧和注意事项。一、抖音评论里怎么发图片?1.打开抖音:首先,你需要打开抖音APP,并登录你的账号。2.找到评论区:在浏览或发布短视频时,找到想要评论的地方,点击“评论”按钮。3.输入评论内容:在评论区输入你的评论内容。4.选择发送图片:在输入评论内容的界面,你会看到一个“图片”按钮或者“+”号按钮,点

Apple最近的iPhone可以通过清晰的细节、饱和度和亮度来捕捉回忆。但有时,您可能会遇到一些问题,这些问题可能会导致图像看起来不那么清晰。尽管iPhone相机上的自动对焦已经取得了长足的进步,可以让您快速拍照,但相机在某些情况下可能会错误地对焦错误的拍摄对象,从而使照片在不需要的区域更加模糊。如果iPhone上的照片看起来失焦或总体上缺乏清晰度,以下帖子应该可以帮助您使它们更清晰。如何在iPhone上使图片更清晰[6种方法]您可以尝试使用本机的“照片”应用来清理照片。如果您需要更多功能和选项

在PowerPoint中,让图片逐一显示是一种常用的技巧,可以通过设置动画效果来实现。本指南详细介绍了实现这一技巧的步骤,包括基本设置、图片插入、添加动画、调整动画顺序和时间。此外,还提供了高级设置和调整,例如使用触发器、调整动画速度和顺序,以及预览动画效果。通过遵循这些步骤和技巧,用户可以轻松地在PowerPoint中设置图片逐一出现,从而提升演示文稿的视觉效果并吸引观众的注意力。

你们是不是也在使用福昕PDF阅读器软件呢?那么你们知道福昕PDF阅读器如何将pdf文档转成jpg图片吗?下面这篇文章就为大伙带来了福昕PDF阅读器将pdf文档转成jpg图片的方法,感兴趣的小伙伴们快来下文看看吧。先启动福昕PDF阅读器,接着在顶部工具栏找到“特色功能”,然后选择“PDF转其他”功能。在接下来,打开一个名为“福昕pdf在线转换”的网页。在页面上方右侧点击“登录”按钮进行登录,然后打开“PDF转图片”功能。之后点击上传按钮并将想要转换成图片的pdf文件添加进来,添加完毕后点击“开始转

如何使用HTML、CSS和jQuery实现图片合并展示的高级功能概述:在网页设计中,图片展示是一个重要的环节,而图片合并展示是提高页面加载速度和提升用户体验的常用技巧之一。本文将介绍如何使用HTML、CSS和jQuery来实现图片合并展示的高级功能,并提供具体的代码示例。一、HTML布局:首先,我们需要在HTML中创建一个容器来展示合并后的图片。可以使用di

如何使用JavaScript实现图片的拖拽缩放功能?在现代web开发中,实现图片的拖拽和缩放是常见的需求。通过使用JavaScript,我们可以轻松地为图片添加拖拽和缩放功能,提供更好的用户体验。在本篇文章中,将介绍如何使用JavaScript来实现这一功能,以及附有具体的代码示例。HTML结构首先,我们需要一个基本的HTML结构来展示图片,并为图片添

有网友发现打开浏览器网页,网页上的图片迟迟加载不出来,是怎么回事?检查过网络是正常的,那是哪里出现了问题呢?下面小编就给大家介绍一下网页图片加载不出来的六种解决方法。 网页图片加载不出来: 1、网速问题 网页显示不出图片有可能是因为电脑的网速比较慢,电脑中开启的软件比较多, 而我们访问的图片比较大,这就可能因为加载超时,导致图片显示不出来, 可以将比较占网速的软件将关掉,可以去任务管理器查看一下。 2、访问人数过多 网页显示不出图片还有可能是因为我们访问的网页,在同时间段访问的
