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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
实现js保留小数点后N位的代码
Nov 13 Javascript
node.js中的buffer.write方法使用说明
Dec 10 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
js比较日期大小的方法
May 12 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Angular排序实例详解
Jun 28 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
微信小程序实现图片翻转效果的实例代码
Sep 20 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的ob_start();控制您的浏览器cache!
2006/11/25 PHP
php 全文搜索和替换的实现代码
2008/07/29 PHP
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
js 蒙版进度条(结合图片)
2010/03/10 Javascript
WEB高性能开发之疯狂的HTML压缩
2010/06/19 Javascript
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
2016/12/26 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
python添加模块搜索路径方法
2017/09/11 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
说说如何遍历Python列表的方法示例
2019/02/11 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
django序列化serializers过程解析
2019/12/14 Python
Pytorch之view及view_as使用详解
2019/12/31 Python
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
大学同学聚会邀请函
2014/01/29 职场文书
软件毕业生个人鉴定
2014/03/03 职场文书
党员承诺践诺书
2014/05/20 职场文书
党的群众路线教育实践活动专题组织生活会发言材料
2014/10/17 职场文书
大队委员竞选稿
2015/11/20 职场文书
交通安全宣传标语(100条)
2019/08/22 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python