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


  • 2018-11-22 21:13:28

    webview之独立进程

    app内存占用大,被系统回收的概率就高,当每次把app切到后台再回到app时,可能每次app都会重启,最常见的是activity或fragment被回收了,导致fragment使用activity的数据时,出现NullPointerException。内存占用大,app越不稳定。运行性能差。webview加载页面后会占用更多的内存,从而导致app内存占用大,最终导致出现以上问题。

  • 2018-11-22 21:14:34

    为什么要采用WebView独立进程

    App中大量Web页面的使用容易导致App内存占用巨大,存在内存泄露,崩溃率高等问题,WebView独立进程的使用是解决Android WebView相关问题的一个合理的方案。

  • 2018-11-22 21:15:45

    Android WebView: 性能优化不得不说的事

    Mo说:大家通过前两篇文章想必都能顺利的 get 到 WebView 与 JavaScript 交互的技能了。现在 App 嵌入 H5 页面已经是稀松平常的事情了,开发者要面对 WebView 也越来越多的爆发出来,比如页面加载慢,内存泄露,不同 Android 系统版本采用了不同内核的兼容问题等等。 所以当我们使用了 WebView 这个组件的时候,性能优化的事情就不能不提上议程了。这篇文章我们就针对上述问题来总结下 Android WebView 性能优化的常见方法。 作者:MoTalksCn_林墨 链接:https://www.jianshu.com/p/95d4d73be3d1 來源:简书 简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 2018-11-22 21:20:04

    WebView内存泄漏--解决方法小结

    Android混合开发时经常用到WebView加载html等页面,而WebView的内存泄漏就是最经常遇到的问题,尤其是当项目中需要用webview加载的页面比较多时。 即使当我退出页面时在我的BrowserActivity的onDestroy()方法中进行内存占用回收(如下图)但并没有效果:

  • 2018-11-23 09:19:27

    论索引的重要性

    我还有什么能说的呢,看来索引基本能解决一切慢sql。好开心。

  • 2018-11-26 17:03:59

    有些 where 条件会导致索引无效

    在查询中,WHERE 条件也是一个比较重要的因素,尽量少并且是合理的 where 条件是徆重要的,尽量在多个条件的时候,把会提取尽量少数据量的条件放在前 面,减少后一个 where 条件的查询时间。

  • 2018-11-26 17:05:47

    sql查询调优之where条件排序字段以及limit使用索引的奥秘

    看起来匪夷所思,其实搞清楚mysql查询的原理之后,其实很简单 我们来看这2条sql查询,都用到了where order by limit 当有limit存在时,查询的顺序就有可能发生变化,这时并不是从数据库中先通过where过滤再排序再limit 因为如果这样的话,从500万数据中通过where过滤就不会是5s了。