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

不确定为什么要使用RegEx进行简单的DOM解析，您可以这样做：

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=""/>';
// Create dummy element and append string
var dummy = document.createElement('div');
dummy.innerHTML = str;
// Fill the output object
var output = {};
var imgs = dummy.getElementsByTagName('img');
for(var i = 0, len = imgs.length; i < len; i++) {
    var attsObj = {};
    for(var j = 0, atts = imgs[i].attributes, jen = atts.length; j < jen; j++) {
        attsObj[atts[j].nodeName] = atts[j].nodeValue;
    }
    output[i] = attsObj;
}

这里不需要那些噪音，现在你有一个很好的对象：

output = {
    0: {
        "alt": "abc",
        "src": "/abc/2016-03-22/20160322101114771.jpg",
        "style": "width: 500px; height: 318px;"
    },
    1: {
        "alt": "",
        "src": "/abc/20160322101157885.jpg",
        "style": "width: 497px; height: 334px;"
    }
}

但是，如果您只想要最后一个IMG标记，则可以执行此操作：

var output = {};
var imgs = dummy.getElementsByTagName('img');
for(var i = 0, atts = imgs[imgs.length - 1].attributes, len = atts.length; i < len; i++) {
    output[atts[i].nodeName] = atts[i].nodeValue;
}

现在output对象具有字符串中最后一个IMG标记的属性，可以这样访问：

var src = output['src']; // "/abc/20160322101157885.jpg"
var style = output['style']; // "width: 497px; height: 334px;"
var alt = output['alt']; // ""

当JavaScript内置DOM来处理HTML元素时，不需要表达式。

Answer 2

正则表达式可能是不必要的。由于您已将其标记为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('---');
}

<强>输出

编年史：
  ＆lt; img src =＆＃34; / abc / 2016-03-22 / 20160322101114771.jpg＆＃34; style =＆＃34; width：500px; height：318px;＆＃34; ALT =＆＃34; ABC＆＃34;＆GT;
  src：/abc/2016-03-22/20160322101114771.jpg
  风格：宽度：500px;身高：318px;
  alt：abc
  ---
  编辑内容：
  ＆lt; img src =＆＃34; / abc / 20160322101157885.jpg＆＃34; style =＆＃34; width：497px; height：334px;＆＃34; ALT＆GT;
  src：/abc/20160322101157885.jpg
  风格：宽度：497px;身高：334px;
  ALT：
  ---

你可以看到它在这个JS小提琴中工作：https://jsfiddle.net/7urra3d8/

希望有所帮助！

Answer 3

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* [^<>]*>/g, match, matches = [];

while(match = reg.exec(str)) {

    matches.push(match[0]);   

}
console.log(matches);

<img>不是属性，而是html标记。
得到所有结果，你必须循环。

Answer 4

对于不包含RegExp的方法，您可以利用DOMParser()创建一个文档片段，其中包含解析为img元素的字符串，Array.prototype.map()，attributes迭代img属性返回一个数组，其中包含每个名称的对象，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 parser = new DOMParser();
var doc = parser.parseFromString(str, "text/html");
var attrs = [].map.call(doc.images, function(img) {
  return [].map.call(img.attributes, function(attr) {
    var imgAttrs = {}; imgAttrs[attr.name] = attr.value;
    return imgAttrs
  })
})

console.log(attrs)

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

4 个答案: