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 去字符串空格终极版(支持utf8)
Nov 14 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JavaScript面向对象之私有静态变量实例分析
Jan 14 Javascript
jquery trigger函数执行两次的解决方法
Feb 29 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
Aug 03 Javascript
javascript汉字拼音互转的简单实例
Oct 09 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
Zend Framework入门教程之Zend_Config组件用法详解
2016/12/09 PHP
PHP 实现公历日期与农历日期的互转换
2017/09/13 PHP
PHP+MySQL实现输入页码跳转到指定页面功能示例
2018/06/01 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
js将long日期格式转换为标准日期格式实现思路
2013/04/07 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
JS简单实现移动端日历功能示例
2016/12/28 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
解决vue attr取不到属性值的问题
2018/09/18 Javascript
原生js canvas实现鼠标跟随效果
2020/08/02 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
2020/09/21 Javascript
对numpy的array和python中自带的list之间相互转化详解
2018/04/13 Python
Python走楼梯问题解决方法示例
2018/07/25 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
使用Python实现图像标记点的坐标输出功能
2019/08/14 Python
给我一面国旗 python帮你实现
2019/09/30 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
微软英国官方网站:Microsoft英国
2016/10/15 全球购物
大学四年规划书范文
2013/12/27 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers