JavaScript正则表达式替换字符串中图片地址(img src)的方法

本文实例讲述了JavaScript正则表达式替换字符串中图片地址(img src)的方法。分享给大家供大家参考,具体如下:

今天开发中遇到一个问题:如何替换一段HTML字符串中包含的所有img标签的src值?

开始想到的解决方法是:

content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match) {
  console.log(match);
});

输出结果是:

复制代码 代码如下:

<img src="http://www.jb51.net/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);
});

输出结果:

http://www.jb51.net/images/logo.gif

搞定!

PS:这里再为大家提供2款非常方便的正则表达式工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript正则表达式技巧大全》、《JavaScript替换操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

时间: 2017-01-11

js正则表达式实现数字每隔四位用空格分隔代码

数字每隔四位用空格分隔代码实例: 分享一段代码实例,它实现了数字每隔四位就用空格分隔. 这样的效果在填写银行卡的时候十分常见,这也是非常人性化的举措. 代码实例如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>我们</title> <script src="http://libs.baidu.com/jquery/1.9.

JS正则表达式验证账号、手机号、电话和邮箱是否合法

 验证帐号是否合法 验证规则:字母.数字.下划线组成,字母开头,4-16位. function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.test(str)){ alert("正确"); }else{ alert("错误"); } } checkUser("jihua_cnblogs");//调用 验证手机号码 验证规则:11位数字,以1开头. function checkMobil

js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析

本文实例分析了js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法.分享给大家供大家参考,具体如下: 最近在阅读RequireJS 2.1.15源码,源码开始处定义了一系列的变量,有4个正则表达式: var commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg, cjsRequireRegExp = /[^.]\s*require\s*\(\s*["']([^'"\s]+)["']\s*\)/g, jsS

JS 密码强度校验的正则表达式(简单且好用)

最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高).今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求. html 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"/> <title>密码强度</title> <style type="text/

js正则表达式验证密码强度【推荐】

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>验证密码强度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{background:#ccc;} #demo{width:400

JS中关于正则的巧妙操作

废话不多说了,直接给大家贴代码了,具体代码如下所示: var msg="dsada[emoji:37]dsadas[emoji:3900]法拉綏芬河"; function fetch(msg) { var match, result = msg, reg = /\[emoji:\d+\]/g, emojiIndex, totalEmojiNum = 45; while (match = reg.exec(msg)) { console.log(match[0]);//[emoji:37

node.js中 mysql 增删改查操作及async,await处理实例分析

本文实例讲述了node.js中 mysql 增删改查操作及async,await处理.分享给大家供大家参考,具体如下: 要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = require('mysql'); //创建数据库连接 let conn = mysql.createConnection({ //主机地址 host: '127.0.0.1', //用户

学习JS中的DOM节点以及操作

DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下JS中DOM操作的门吧!! 一.DOM树的节点 1. DOM节点分为三大类: 元素节点(标签节点).属性节点和文本节点. 属性节点和文本节点都属于元素节点的子节点. 因此操作时,需先选中元素节点,再修改属性和文本. [查看元素节点] 1. 使用getElement系列方法: 具体的HTML代码如下图

js中的cookie的读写操作示例详解

cookie是一小段信息,以键/值对的信息保存在计算机硬盘上的字符串, cookie存储容量大概在4kb,不同的浏览器厂家对cookie大小的限制有微微的差异:cookie主要的本质是"识别",通过识别来做一些事情;cookie 也是无法从你的硬盘取得任何其它数据,传送电脑病毒或者获取你的电子邮件地址.cookie是有有效期的,cookie的默认有效期是从cookie生成至浏览器关闭,也可以通过设置cookie的有效期来指定其失效日期:用户也可以禁止cookie也可以手动删除cooki

js中复制行和删除行的操作实例

复制代码 代码如下: var validateForm = null;  var num = 2;  $(document).ready(function(){ var lastCommunAddTr = $("#workDay"); $("#add").click(function() {     //复制一行               var tr = $("#workDay").clone();               tr.find

js中使用正则表达式查找字母和数字的方法

废话不多说,先看下js中使用正则查找字母和数字的方法,具体代码如下所示: <!DOCTYPE HTML> <html > <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload=function(){ localStorage.fiveData="

Vue.js中轻松解决v-for执行出错的三个方案

前言 Vue.js 是开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js在近年来受到一定程度的关注,目前在 GitHub上已经有5000+. 本文是笔者在开发实践中踩过的坑,总结和分享出来,希望对大家学习Vue有所帮助.下面来看看详细的介绍: [问题描述] v-for遍历数组中存在空值导致页面报错,情况如下: 开发框架是以Vue为模型绑定的核心,根据错误可以进行一个简单的判断: ▪ removeChild操作既然不是发生在开发者显示

JS中setTimeout的巧妙用法前端函数节流

什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如

Angular.js中数组操作的方法教程

前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.最近在学习Angular.js,将自己学习的一些经验技巧分享给大家,下面本文将给大家介绍关于Angular.js中数组操作的相关资料,话不多说了,来一起看看详细的介绍. 1:ng-click,ng-model,ng-bind,ng-class,ng-hide,ng-app 2:placeholder, 3:{}中加入代码":true|false",使用逗号隔开,可以

js中confirm实现执行操作前弹出确认框的方法

本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在删除或其它操作前弹出确定提示,我们有很多方法,最基本的就是利用js自带的函数confirm来操作了 最简单的用法如下: 鼠标事件使用confirm 复制代码 代码如下: <a href="#" onclick= "if(confirm( '是否确定! ')==false)return   false; ">点击确定</a> 想简单