javascript - 为什么这个简单的正则表达式不起作用？

Question

http://jsfiddle.net/C4K6c/

我正在尝试在 JavaScript 中做一个简单的正则表达式，但它不起作用。

HTML：

<div id="content">
    <p><img class="inline-image" src="1.jpg" data-frame="full" alt="" /></p>
    <p><img class="inline-image" src="2.jpg" data-frame="half" /></p>
    <p><img src="2.jpg" /></p>    
</div>

JS：

var content = document.getElementById('content').innerHTML,
    matches = content.match(/<img(.+)data-frame(.+)>/);

for(var i=0; i < matches.length; i++) {
    alert( matches[i] )
}

我没有得到我所期望的，这是：

<img class="inline-image" src="2.jpg" data-frame="half" />
<img class="inline-image" src="1.jpg" data-frame="full" alt="" />

Answer 1

添加g标志并避免关闭>以避免</p>在您的比赛中出现。如果您的 HTML 可以更加多样化，为了避免其他问题，您还应该更改第一个.+：

matches = content.match(/<img([^>]+)data-frame([^>]+)>/g);

示范

Answer 2

尝试使其不贪婪，并使用 DOTALL 解决方法：

matches = content.match(/<img([\s\S]+?)data-frame([^>]*)>/ig);

我还添加global并ignore case切换。

Answer 3

http://jsfiddle.net/C4K6c/3/

尽管我很喜欢正则表达式，但我强烈建议在这里使用 DOM 来发挥你的优势。

var content = document.getElementById('content');
var images = content.getElementsByTagName('img');
var final = [];
for (var i = 0; i< images.length; i++)
    if (images[i].hasAttribute("data-frame"))
        final.push(images[i]);

该算法具有自我记录的优点。它也可能比使用正则表达式更快。

Answer 4

我不了解java，但通常你需要像这样转义符号< >：

matches = content.match(/\<img(.+)data-frame(.+)\>/);