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学习资源站点
Aug 29 Javascript
js 发个判断字符串是否为符合标准的函数
Apr 27 Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 Javascript
setTimeout和setInterval的深入理解
Nov 08 Javascript
JS中getYear()和getFullYear()区别分析
Jul 04 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
js实现跨域的4种实用方法原理分析
Oct 29 Javascript
javascript求日期差的方法
Mar 02 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
Sep 02 Javascript
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 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
一个域名查询的程序
2006/10/09 PHP
简单采集了yahoo的一些数据
2007/02/14 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
javascript GUID生成器实现代码
2009/10/31 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
js获取系统的根路径实现介绍
2013/09/08 Javascript
jQuery和AngularJS的区别浅析
2015/01/29 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
jQuery实现为table表格动态添加或删除tr功能示例
2019/02/19 jQuery
TypeScript 引用资源文件后提示找不到的异常处理技巧
2020/07/15 Javascript
微信小程序wx.getUserInfo授权获取用户信息(头像、昵称)的实现
2020/08/19 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
python抓取百度首页的方法
2015/05/19 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
python中常用的数据结构介绍
2021/01/12 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
服装设计专业求职信
2014/06/16 职场文书
个人总结与自我评价
2014/09/18 职场文书
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android