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 相关文章推荐
AJAX 网页保留浏览器前进后退等功能
Feb 12 Javascript
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
JavaScript中的闭包
Feb 24 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
Oct 25 Javascript
js精确的加减乘除实例
Nov 14 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
原生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加速 eAccelerator配置和使用指南
2009/06/05 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
jQuery function的正确书写方法
2013/08/02 Javascript
jquery使用animate方法实现控制元素移动
2015/03/27 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
JavaScript实现动态删除列表框值的方法
2015/08/12 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
2015/10/09 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
JavaScript常用正则函数用法示例
2017/01/23 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python GUI Tkinter简单实现个性签名设计
2018/06/19 Python
python3.7环境下安装Anaconda的教程图解
2019/09/10 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
高中生毕业学习总结的自我评价
2013/11/14 职场文书
优秀演讲稿范文
2013/12/29 职场文书
乔迁之喜主持词
2014/03/27 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
《天游峰的扫路人》教学反思
2014/04/25 职场文书
个人考核材料
2014/05/15 职场文书
煤矿安全承诺书
2014/05/22 职场文书
护士工作失误检讨书
2014/09/14 职场文书
毕业生捐书活动倡议书
2015/04/27 职场文书