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

Why isn't this simple REGEX working?

本文关键字:正则表达式 不起作用 简单 为什么      更新时间:2023-09-26

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="" />

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

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

示范

尝试使其不贪婪和 DOTALL 变通方法:

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

我还添加了globalignore case开关。

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

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

我不

了解java,但通常你需要像这样转义符号<>:

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