使用正则表达式从具有特定类名称的IMG标签中提取src链接

Question

当我们有：

<img src="http://example.com/myimageurl.jpg" />
<img class="my-image-class" src="http://example.com/myimageurl2.jpg" />

使用grep：

grep -Po '(?<=src=")[^"]*' filename

我有两个图像网址。

实际上，我只需要具有特定类“ my-image-class”的图像的url。

我该如何实现？

提前致谢！

Answer 1

您不应该使用正则表达式解析html，但是如果您正在寻找快速的grep
正则表达式，这有效。

<img\s+(?=[^>]*?(?<=\s)class\s*=\s*"my-image-class")[^>]*?(?<=\ssrc=")([^"]*)

展开式

 <img \s+ 
 (?=
      [^>]*? 
      (?<= \s )
      class \s* = \s* "my-image-class"
 )
 [^>]*? 
 (?<= \s src=" )
 ( [^"]* )                     # (1)

输出量

 **  Grp 0 -  ( pos 49 , len 67 ) 
<img class="my-image-class" src="http://example.com/myimageurl2.jpg  
 **  Grp 1 -  ( pos 82 , len 34 ) 
http://example.com/myimageurl2.jpg  

Answer 2

不确定这里的用例是什么，但是您可以通过将HTML粘贴到类似http://jsbin.com的站点中并编写几行jQuery来轻松实现此目的：

var imgs = [];

$('img').each( function() {
  var $img = $(this);

  if( $img.hasClass('my-image-class') ) {
    imgs.push($img.attr('src'));
  }
});

console.log(imgs);

演示： http : //jsbin.com/cicoli/edit?html,js,console,output