JavaScript正则表达式替换字符串中图片地址(img src)的方法


Posted in Javascript onJanuary 13, 2017

本文实例讲述了JavaScript正则表达式替换字符串中图片地址(img src)的方法。分享给大家供大家参考,具体如下:

今天开发中遇到一个问题:如何替换一段HTML字符串中包含的所有img标签的src值?

开始想到的解决方法是:

content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match) {
  console.log(match);
});

输出结果是:

<img src="https://3water.com/images/logo.gif" alt="" width="142" height="55" />

得到的是整个img标签,但我期望得到的是src中的网址,这样只需在function(match)中返回新地址就行了。

于是,卡在这里了。。。

后来,通过Google搜索关键字“javascript replace callback”,在stackoverflow中找到了“replace callback function with matches”,才知道function(match)还有其他参数(详见developer.mozilla.org)。

然后,改为下面的代码,问题就解决了。

content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
  console.log(capture);
});

输出结果:

https://3water.com/images/logo.gif

搞定!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JS创建自定义表格具体实现
Feb 11 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
Oct 26 Javascript
JSX在render函数中的应用详解
Sep 04 Javascript
js获取图片的base64编码并压缩
Dec 05 Javascript
原生js实现手风琴功能(支持横纵向调用)
Jan 13 #Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 #Javascript
bootstrap网格系统使用方法解析
Jan 13 #Javascript
js 判断数据类型的几种方法
Jan 13 #Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 #Javascript
BootStrap表单验证实例代码
Jan 13 #Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 #Javascript
You might like
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
JavaScript Chart 插件整理
2010/06/18 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
vue quill editor 使用富文本添加上传音频功能
2020/01/14 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
Vue SPA 首屏优化方案
2021/02/26 Vue.js
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[02:05:03]完美世界DOTA2联赛循环赛 LBZS VS Matador BO2 10.28
2020/10/28 DOTA
python多线程用法实例详解
2015/01/15 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
Python不同目录间进行模块调用的实现方法
2019/01/29 Python
如何基于线程池提升request模块效率
2020/04/18 Python
Python-for循环的内部机制
2020/06/12 Python
Python 如何实现访问者模式
2020/07/28 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
造型师求职自荐信
2013/09/27 职场文书
测绘工程个人的自我评价
2013/11/23 职场文书
护士毕业生自荐信
2014/02/07 职场文书
安全环保标语
2014/06/09 职场文书
做一个有道德的人活动方案
2014/08/25 职场文书
旷课检讨书500字
2014/10/14 职场文书
2015毕业寄语大全
2015/02/26 职场文书
学校社团活动总结
2015/05/07 职场文书
电台广播稿范文
2015/08/19 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
七年级作文之雪景
2019/11/18 职场文书
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
Python中的pprint模块
2021/11/27 Python
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript