Question

我正在尝试在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);

Demonstration

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

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

Answer 4

我不知道java，但通常你需要转义符号＆lt; ＆GT;像这样：

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

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

4 个答案: