为什么这个简单的REGEX不起作用？

Question

http://jsfiddle.net/C4K6c/

I'm trying to do a simple regex in JavaScript but it's not working.

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] )
}

I am not getting back what I am expecting, which is this:

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

Answer 1

Add the g flag and avoid the closing > to avoid having </p> in your match. And to avoid other problems if your HTML can be more diverse, you should also change the first .+ :

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

Demonstration

Answer 2

Try to make it non-greedy and the DOTALL work-around:

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

I also added global and ignore case switch.

Answer 3

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

As much as I love regex, I highly recommend using the DOM to your advantage here.

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]);

This algorithm has the advantage of being self documenting. It's also probably faster than using a regular expression.

Answer 4

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

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