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改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
jQuery实现内容定时切换效果完整实例
Apr 06 Javascript
强大Vue.js组件浅析
Sep 12 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
微信小程序开发animation心跳动画效果
Aug 16 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
vue使用nprogress实现进度条
Dec 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
PHP初学入门
2006/11/19 PHP
php日历[测试通过]
2008/03/27 PHP
用php过滤危险html代码的函数
2008/07/22 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
JavaScript 学习笔记之基础中的基础
2015/01/13 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
js实现文字截断功能
2016/09/14 Javascript
原生JS实现Ajax跨域请求flask响应内容
2017/10/24 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
Windows下python2.7.8安装图文教程
2016/05/26 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
python中round函数如何使用
2020/06/19 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
董事长岗位职责
2013/11/30 职场文书
餐饮主管岗位职责
2013/12/10 职场文书
基层党员对照检查材料
2014/08/25 职场文书
违反工作规定检讨书范文
2014/12/14 职场文书
生日寿星公答谢词
2015/09/29 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技
详解Mysql事务并发(脏读、不可重复读、幻读)
2022/04/29 MySQL