Question

我有一个正则表达式模式，可以捕获 src 和 height （可能在height或style属性中） <img>个html元素。这是我的模式：

/img[^\>]*(?:height="([\d]+)")?[^\>]*src="([^"]+)"[^\>]*(?:style\="height:([\d]+)px;?[^"]+")?[^\>]*/i

我使用preg_match_all函数搜索以下字符串：

<img alt="" height="200" src="http://www.example.com/example.png" width="1500" style="height:200px;" />

src 没有问题，但它无法捕获 height 子组。我对正则表达式模式错了吗？

Answer 1

如果它是您的选项，您可以使用DOM而不是正则表达式来获取src和height：

var div = document.createElement('div');
div.innerHTML = '<img alt="" height="200" src="http://www.example.com/example.png" width="1500" style="height:200px;" />';
var elm = div.firstChild;
console.log(elm.src);
console.log(elm.height);
console.log(elm.style.height);

Answer 2

如果您选择使用正则表达式进行解析 - 最好逐步捕获信息：

首先捕获img元素
然后 - 内部元素 - 捕获 src，height，style-height属性

在这种情况下，如果属性的顺序将来发生变化，您无需担心。代码示例：

$str = '<img alt="" height="210" src="http://www.example.com/example1.png" width="1500" style="height:220px;" />
        <img alt="" src="http://www.example.com/example2.png" height="230" width="1500" style="height:240px;" />';

preg_match_all('#<img[^>]*>#mui', $str, $images, PREG_SET_ORDER);

foreach ($images as $img) {
    preg_match('#src="[^"]+"#mui', $img[0],            $m_src);
    preg_match('#height="\d+"#mui', $img[0],           $m_height);
    preg_match('#style="height:\d+px;?"#mui', $img[0], $m_st_height);

    var_dump('<pre>',$m_src[0], $m_height[0], $m_st_height[0], '<hr></pre>');
}

DEMO

无法捕获PHP正则表达式子组

2 个答案: