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中遭遇级联表达式陷阱
Mar 08 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
firefox插件Firebug的使用教程
Jan 02 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
jQuery插件版本冲突的处理方法分析
Jan 16 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
May 12 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
绿山咖啡和蓝山咖啡
2021/03/04 新手入门
用PHP调用Oracle存储过程
2006/10/09 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP文件缓存类实现代码
2015/10/26 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
2012/08/22 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
在百度知道团队中快速审批新成员的js脚本
2014/02/02 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
JS中递归函数
2016/06/17 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
python查看FTP是否能连接成功的方法
2015/07/30 Python
django ORM之values和annotate使用详解
2020/05/19 Python
PyTorch安装与基本使用详解
2020/08/31 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
C#面试题
2016/05/06 面试题
实习生岗位职责
2014/04/12 职场文书
保密工作承诺书
2014/08/29 职场文书
销售助理岗位职责
2015/02/11 职场文书
2016全国“质量月”活动标语口号
2015/12/26 职场文书