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 相关文章推荐
Mootools 1.2教程 Tooltips
Sep 15 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
javascript DOM编程实例(智播客学习)
Nov 23 Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
Jun 15 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
vuex的使用步骤
Jan 06 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最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
php微信公众号开发之翻页查询
2018/10/20 PHP
php让json_encode不自动转义斜杠“/”的方法
2020/04/27 PHP
基于jquery的气泡提示效果
2010/05/31 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
js实现上传图片预览的方法
2015/02/09 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
python开发之str.format()用法实例分析
2016/02/22 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python实现中文文本分句的例子
2019/07/15 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
24个canvas基础知识小结
2014/12/17 HTML / CSS
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
机电一体化求职信
2014/03/10 职场文书
应届生简历自我评价
2015/03/11 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python经常使用的一些内置函数
2022/04/11 Python