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程序设计有所帮助。

赞 (0)

相关推荐

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

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

  • 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 密码强度校验的正则表达式(简单且好用)

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

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

    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

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

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

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

    本文实例讲述了JavaScript正则表达式替换字符串中图片地址(img src)的方法.分享给大家供大家参考,具体如下: 今天开发中遇到一个问题:如何替换一段HTML字符串中包含的所有img标签的src值? 开始想到的解决方法是: content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match) { console.log(match); }); 输出结果是: 复制代码 代码如下: &

  • JavaScript实现替换字符串中最后一个字符的方法

    JavaScript实现替换字符串中最后一个字符的方法

    本文实例讲述了JavaScript实现替换字符串中最后一个字符的方法.分享给大家供大家参考,具体如下: 1.问题背景 在一个输入框中,限制字符串长度为12位,利用键盘输入一个数字,会将字符串中最后一位替换,比如:111111111111,再输入一个3,会显示111111111113 2.具体实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

  • C#基于正则表达式删除字符串中数字或非数字的方法

    本文实例讲述了C#基于正则表达式删除字符串中数字或非数字的方法.分享给大家供大家参考,具体如下: /// 去掉字符串中的数字 public static string RemoveNumber(string key) { return Regex.Replace(key, @"\d", ""); } //去掉字符串中的非数字 public static string RemoveNotNumber(string key) { return Regex.Replace

  • JS替换字符串中指定位置的字符(多种方法)

    假设有一个字符串,可能'Good Morning'也可能是'Hello World',我想将第五个字符,替换成'-'. 因为字符串虽然可以像数组那样获取某一位置字符'Hello World'[4],但是不能像数组那样直接修改某一位置的字符'Hello World'[4] = '-',这样是行不通的,但是可以把它切分成数组,修改某一位置的值,然后在合并回来. 方法1: const replaceStr1 = (str, index, char) => { const strAry = str.sp

  • php中替换字符串中的空格为逗号','的方法

    今天在网查到一篇介绍php中替换字符串中的空格为逗号','的文章,作个日记保存下来. 复制代码 代码如下: <pre name="code" class="php"><? php /* * 关键词中的空格替换为',' */ public function emptyreplace($str) { $str = str_replace(' ', ' ', $str); //替换全角空格为半角 $str = str_replace(' ', ' ',

  • JavaScript利用正则表达式替换字符串中的内容

    话不多说,请看具体实现代码 //从字符串'Is this all there is'中剪去'is': var str='Is this all there is'; var subStr=new RegExp('is');//创建正则表达式对象 var result=str.replace(subStr,"");//把'is'替换为空字符串 console.log(result);//Is th all there is var subStr=new RegExp('is','i');

  • Java 替换字符串中的回车换行符的方法

    使用正则表达式进行替换: 代码片段: String documentTxt = EntityUtils.toString(entity,"gbk");//获取数据 documentTxt=documentTxt.replaceAll("[\\t\\n\\r]", "");//将内容区域的回车换行去除 说明:String类的replaceAll就有正则替换功能. \t为制表符 \n为换行 \r为回车 java正则使用: 示例方法: 复制代码 代码如

  • SQL Server中利用正则表达式替换字符串的方法

    建立正则替换函数,利用了OLE对象,以下是函数代码: --如果存在则删除原有函数 IF OBJECT_ID(N'dbo.RegexReplace') IS NOT NULL DROP FUNCTION dbo.RegexReplace GO --开始创建正则替换函数 CREATE FUNCTION dbo.RegexReplace ( @string VARCHAR(MAX), --被替换的字符串 @pattern VARCHAR(255), --替换模板 @replacestr VARCHAR

  • JavaScript基于扩展String实现替换字符串中index处字符的方法

    JavaScript基于扩展String实现替换字符串中index处字符的方法

    本文实例讲述了JavaScript基于扩展String实现替换字符串中index处字符的方法.分享给大家供大家参考,具体如下: 核心代码: String.prototype.replaceCharAt = function(n,c){ return this.substr(0, n)+ c + this.substr(n+1,this.length-1-n); } 用法示例: <!DOCTYPE html> <html lang="en"> <head&g

  • javascript正则表达式和字符串RegExp and String（二）

    javascript正则表达式和字符串RegExp and String（二）

    在上篇文章给大家介绍了javascript正则表达式和字符串RegExp and String(一),本文给大家继续分享相关内容. 前言 我认为,在学习一门编程语言的过程中,字符串.数组.容器是非常重要的部分,为了提高编程效率,我通常会对字符串.数组以及容器作深入的学习,详细了解相关特点及对应的API.这篇文章是针对javascript字符串学习写下的笔记,在此与需要的朋友分享. 思维导图 字符串的创建方式 字符串是javascript中的基本类型之一,它对应的类型是String,可以通过两种方

随机推荐