正则匹配多个div标签包含的内容

Question

比如这种

<div class="abc">
    <div>123</div>
    <div>456</div>
</div>
balabala..中间很多内容
<div>阿拉嘎多</div>
balabala..
<div class="abc">
    <div>fff</div>
    <div>avbb</div>
</div>

现在需求就是说结果要匹配出

 <div class="abc">
    <div>123</div>
    <div>456</div>
</div>
<div class="abc">
    <div>fff</div>
    <div>avbb</div>
</div>

也就是说class="abc"的div里面包含的内容..

Answer 1

php简单代码奉上

$content = '<div class="abc">
                <div>123</div>
                <div>456</div>
            </div>
            <div class="abc">
                <div>fff</div>
                <div>avbb</div>
            </div>';
$patten = '/<div class="abc">([\w\s<>\/]+)<\/div>/';
preg_match_all($patten , $content , $match);
var_dump($match);

javascript代码

html = '<div class="abc"> ' + 
          '<div>123</div> ' + 
          '<div>456</div> ' + 
      '</div> ' + 
      '<div class="abc"> ' + 
          '<div>fff</div> ' + 
          '<div>avbb</div> ' + 
      '</div>';
  console.log(html.match(/<div class="abc">([\w\s<>\/]+)<\/div>/g));

Answer 2

非常困难，除非你保证你的数据源的格式一定是：

<div class="abc">
    <div>123</div>
    <div>456</div>
</div>

但，其实有另一种更漂亮的做法，那就是 jQuery。

比如：

var el = $('<div/>').append($('HTML数据')),
    result = [];
el.find('.abc').each(function() {
    result.push(this.outerHTML);
});
console.log(result.join(''));

Answer 3

曾做过模板渲染，这个html的层级用正则没搞出来，要解析html字符串成节点树，这才是最靠谱的做法。

Answer 4

可以用SimpleHtmlDom这个PHP基于正则实现的DOM操作库,用find('div.abc')就能找到class为abc的div块.

<?php
# http://sourceforge.net/projects/simplehtmldom/
require __DIR__.'/simple_html_dom.php';
$html = str_get_html('你的HTML字符串');
foreach($html->find('div.abc') as $v) {
    echo $v;
}