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 06 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
jQuery Validate验证框架详解(推荐)
Dec 17 Javascript
vue获取dom元素注意事项
Dec 28 Javascript
浅谈Webpack下多环境配置的思路
Jun 27 Javascript
three.js实现圆柱体
Dec 30 Javascript
浅谈vue异步数据影响页面渲染
Oct 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/22 PHP
php共享内存段示例分享
2014/01/20 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
JQUERY 设置SELECT选中项代码
2014/02/07 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
JS中Eval解析JSON字符串的一个小问题
2016/02/21 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
[02:57]DOTA2英雄基础教程 风行者
2014/01/16 DOTA
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
Python随机生成彩票号码的方法
2015/03/05 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
将Django框架和遗留的Web应用集成的方法
2015/07/24 Python
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
树莓派实现移动拍照
2019/06/22 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
python3中布局背景颜色代码分析
2020/12/01 Python
amaze ui 的使用详细教程
2020/08/19 HTML / CSS
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
神秘岛读书笔记
2015/07/01 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
先进基层党组织事迹材料2016
2016/02/29 职场文书