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 相关文章推荐
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
javascript插入样式实现代码
Feb 22 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
JS原型和原型链原理与用法实例详解
Feb 05 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
Openlayers显示地理位置坐标的方法
Sep 28 Javascript
vue中data改变后让视图同步更新的方法
Mar 29 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水印技术
2007/02/14 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
PHP命名空间namespace的定义方法详解
2017/03/29 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
载入进度条 效果
2006/07/08 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
jquery图片切换插件
2015/03/16 Javascript
JavaScript中string对象
2015/06/12 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
使用JavaScript实现node.js中的path.join方法
2018/08/12 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
在tensorflow中设置使用某一块GPU、多GPU、CPU的操作
2020/02/07 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
详解python的xlwings库读写excel操作总结
2021/02/26 Python
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
银行类自荐信
2014/02/04 职场文书
代理班主任的自我评价
2014/02/04 职场文书
个人现实表现材料
2014/02/04 职场文书
部队2015年终工作总结
2015/04/02 职场文书
名人传读书笔记
2015/06/26 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python
如何制作自己的原生JavaScript路由
2021/05/05 Javascript