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下利用fso判断文件是否存在的代码
Dec 11 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
Jun 08 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
小程序获取当前位置加搜索附近热门小区及商区的方法
Apr 08 Javascript
微信小程序实现侧边分类栏
Oct 21 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 购物车的例子
2009/05/04 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
JavaScript的Function详细
2006/11/14 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
第十章之巨幕页头缩略图与警告框组件
2016/04/25 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
React Native使用Modal自定义分享界面的示例代码
2017/10/31 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
NProgress显示顶部进度条效果及使用详解
2019/09/21 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Carter’s官方旗舰店:美国受欢迎的婴童服装品牌
2018/01/21 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
UNIX文件系统分类
2014/11/11 面试题
保密工作整改报告
2014/11/06 职场文书
单位介绍信格式
2015/01/31 职场文书
审美与表现自我评价
2015/03/09 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
大学生志愿者心得体会
2016/01/15 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
七年级之家长会发言稿范文
2019/09/04 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
WIN10使用IIS部署ftp服务器详细教程
2022/08/05 Servers