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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
jQuery 插件开发指南
Nov 14 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
jquery实现表单获取短信验证码代码
Mar 13 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
React Native 截屏组件的示例代码
Dec 06 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
koa-router源码学习小结
Sep 07 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 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
一个目录遍历函数
2006/10/09 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
Zend的MVC机制使用分析(二)
2013/05/02 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php一行代码获取文件后缀名实例分析
2014/11/12 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
微信小程序 slider的简单实例
2017/04/19 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
微信小程序实现搜索功能并跳转搜索结果页面
2019/05/18 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python局域网ip扫描示例分享
2014/04/03 Python
python3中set(集合)的语法总结分享
2017/03/24 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
Java中实现多态的机制
2015/08/09 面试题
人事专员职责
2014/02/22 职场文书
年检委托书
2014/08/30 职场文书
九一八事变演讲稿范文
2014/09/14 职场文书
用Python爬取某乎手机APP数据
2021/06/15 Python