javascript - 如何使用正则表达式查找所有 img 属性？

Question

我使用这个正则表达式查找 img 及其属性。

 var str = '<img src="/abc/2016-03-22/20160322101114771.jpg" style="width: 500px; height: 318px;" alt="abc"><img  src="/abc/20160322101157885.jpg" style="width: 497px; height: 334px;" alt=""/>'

 var reg = /<img(\s*([^=>]+)="([^">]*?)"\s*?)+?\/>/

 var matchs = str.match(reg)

 console.log(matchs)

这是结果:

[ '<img  src="/abc/20160322101157885.jpg" style="width: 497px; height: 334px;" alt=""/>',
  ' alt=""',
  'alt',
  '',
  index: 96,
  input: '<img src="/abc/2016-03-22/20160322101114771.jpg" style="width: 500px; height: 318px;" alt="abc"><img  src="/abc/20160322101157885.jpg" style="width: 497px; height: 334px;" alt=""/>' ]

我想从结果中找到所有属性，但只找到最后一个。

我能做什么？

Answer 1

正则表达式可能是不必要的。由于您已将其标记为 JavaSciprt，因此您可以使用 JavaScript 查询选择器并循环遍历属性来获取所有属性。这样的事情会起作用:

HTML

<img src="/abc/2016-03-22/20160322101114771.jpg" style="width: 500px; height: 318px;" alt="abc">

<img  src="/abc/20160322101157885.jpg" style="width: 497px; height: 334px;" alt=""/>

JavaScript

var images = document.querySelectorAll('img');

//loop over all the images in the dom
for (var h = 0; h < images.length; h++) {
    var el = images[h];

  //loop over all the attributes for the matched image
  console.log('Arrtibutes for:');
  console.log(el)
    for (var i = 0, atts = el.attributes, n = atts.length, arr = []; i < n; i++){
    //do what you need with the values here
    console.log(atts[i].nodeName + ': ' + atts[i].nodeValue);
    }
  console.log('---');
}

输出

Arrtibutes for:
<img src=​"/​abc/​2016-03-22/​20160322101114771.jpg" style=​"width:​ 500px;​ height:​ 318px;​" alt=​"abc">​
src: /abc/2016-03-22/20160322101114771.jpg
style: width: 500px; height: 318px;
alt: abc
‐‐‐
Arrtibutes for:
<img src=​"/​abc/​20160322101157885.jpg" style=​"width:​ 497px;​ height:​ 334px;​" alt>​
src: /abc/20160322101157885.jpg
style: width: 497px; height: 334px;
alt:
‐‐‐

您可以在这个 JS Fiddle 中看到它的工作:https://jsfiddle.net/7urra3d8/

希望对您有所帮助!