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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JS解析XML实例分析
Jan 30 Javascript
简介JavaScript中search()方法的使用
Jun 06 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
JS中IP地址与整数相互转换的实现代码
Apr 10 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
JavaScript计算正方形面积
Nov 26 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
如何阻止移动端浏览器点击图片浏览
Aug 29 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 魔术函数使用说明
2010/02/21 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
ThinkPHP中ajax使用实例教程
2014/08/22 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php处理带有中文URL的方法
2016/07/11 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
javascript innerHTML、outerHTML、innerText、outerText的区别
2008/11/24 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
JS实现点餐自动选择框(案例分析)
2019/12/10 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
Python连接Redis的基本配置方法
2018/09/13 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
python实现拼图小游戏
2020/02/22 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
《乌塔》教学反思
2014/02/17 职场文书
西湖英语导游词
2015/02/06 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server