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

2017-11-09 14:03:45

这篇文章主要介绍了JavaScript正则表达式替换字符串中图片地址(img src)的方法,结合实例形式分析了JS正则替换的常用技巧与注意事项,需要的朋友可以参考下

本文实例讲述了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-04-15 21:47:44

    Android开发笔记——圆角和边框们

    在做Android界面开发时,我们往往希望它尽可能优美,尽可能显得专业。于是你看了看其他应用,哇,好多边框和圆角啊。你是不是也想给自己的应用加上边框和圆角效果?呃……那怎么做呢?如果你是从web前端跑到Android来的,那么我想你一定想到了不下三种解决方案。如用图片替代,用CSS3定义,用JS画。在Android中,其实也有类似的用法,本文将简单介绍两种Android圆角和边框的实现。

  • 2017-04-15 21:49:06

    Android样式的开发:Style篇

    前面铺垫了那么多,终于要讲到本系列的终篇,整合所有资源,定义成统一的样式。 哪些该定义成统一的样式呢?举几个例子吧:

  • 2017-04-15 23:54:49

    ViewPager+Fragment取消预加载以及禁止滑动

    取消预加载 网上了解了很多取消预加载的方法,里面提到了使用一个viewpager的public方法setOffscreenPageLimit 经过查看源码以及验证发现该方法是管理Viewpager预加载的页数,最低也是默认为一页(例如ViewPager一共有4页,当前手机屏幕显示第一页

  • 2017-04-15 23:56:30

    onInterceptTouchEvent和onTouchEvent调用关系详解

    如果没有onInterceptTouchEvent,只考虑onTouchEvent的话,比较容易分析和理解。假如有三层布局结构,linearLayout1,linearLayout2,textView,从前到后是包含的关系。那么下面分情况说明。

  • 2017-04-16 19:36:32

    ViewPager预加载问题和onCreateView多次调用问题的解决

    1,在使用ViewPager嵌套Fragment的时候,由于VIewPager的几个Adapter的设置来说,都会有一定的预加载(默认是左右各一个Frament)。通过设置setOffscreenPageLimit(int number) 来设置预加载的熟练,在V4包中,默认的预加载是1,即使你设置为0,也是不起作用的,设置的只能是大于1才会有效果的。我们需要通过更改V4包中的默认属性才可以

  • 2017-04-16 21:02:55

    ImageView的android:adjustViewBounds属性

    取值为true时: Adjust the ImageView's bounds to preserve the aspect ration of its drawable. 调整ImageView的界限来保持图像纵横比不变。 这并不意味着ImageView的纵横比就一定和图像的纵横比相同