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 相关文章推荐
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
jQuery中clone()方法用法实例
Jan 16 Javascript
JavaScript转换二进制编码为ASCII码的方法
Apr 16 Javascript
很全面的JavaScript常用功能汇总集合
Jan 22 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 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外部执行命令函数用法小结
2016/10/11 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
js下获取div中的数据的原理分析
2010/04/07 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
js动态切换图片的方法
2015/01/20 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
详解js中的apply与call的用法
2016/07/30 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
[02:11]2016国际邀请赛中国区预选赛最美TA采访现场玩家
2016/06/28 DOTA
[47:22]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
Python中的自省(反射)详解
2015/06/02 Python
使用Python获取并处理IP的类型及格式方法
2018/11/01 Python
python 获取等间隔的数组实例
2019/07/04 Python
HTML的form表单和django的form表单
2019/07/25 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
python对 MySQL 数据库进行增删改查的脚本
2020/10/22 Python
如何在pycharm中安装第三方包
2020/10/27 Python
浅析Python的命名空间与作用域
2020/11/25 Python
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
在线课程:Skillshare
2019/04/02 全球购物
个人简历自我评价范文
2014/02/04 职场文书
市场部业务员岗位职责
2014/04/02 职场文书
演讲稿的写法
2014/05/19 职场文书
档案保密承诺书
2014/06/03 职场文书
公司门卫工作职责
2014/06/28 职场文书
技术支持岗位职责
2015/02/13 职场文书
基于Python实现流星雨效果的绘制
2022/03/18 Python