如何抓取<h2>之间的HTML

how to grab the html between <h2>

本文关键字：h2 之间 HTML 何抓取 抓取      更新时间：2023-09-26

我有这个HTML块:

<h2>heading A</h2>
<p>paragraph 1 of A</p>
<p>paragraph 2 of A</p>
<h2>heading B</h2>
<ul id="list-B">
  <li>list B1</li>
  <li>list B2</li>
</ul>
<p>paragraph 1 B</p>
<h2>...</h2>
..

我需要抓取每个"h2和它的内容"，并将它们分组成这样:

<div class="news">
  <h2>heading A</h2>
  <div class="content">
    <p>paragraph 1 of A</p>
    <p>paragraph 2 of A</p>
  </div>
</div>
<div class="news">
  <h2>heading B</h2>
  <div class="content">
    <ul id="list-B">
      <li>list B1</li>
      <li>list B2</li>
    </ul>
    <p>paragraph 1 B</p>
  </div>
</div>
...

有什么建议吗?

给你:

$( 'h2' ).each(function () {
    $( this ).nextUntil( 'h2' ).andSelf().wrapAll( '<div class="news" />' );
    $( this ).nextAll().wrapAll( '<div class="content" />' );
});

现场演示: http://jsfiddle.net/phJPq/2/

不使用jQuery:

function reFormat() {
  // Collect h2 elements
  var h, hs = document.getElementsByTagName('h2');
  var node;
  var d, od = document.createElement('div');
  od.className = 'news';
  var d2, od2 = od.cloneNode(false);
  od2.className = 'content';
  // For each h2
  for (var i=0, iLen=hs.length; i<iLen; i++) {
    h = hs[i];
    d = od.cloneNode(true);
    d2 = od2.cloneNode(true);
    node = h.nextSibling;
    // Append all siblings to new div until get to next h2
    while (node && node != hs[i + 1]) {
      d2.appendChild(node);
      node = h.nextSibling;   
    }
    // Replace h2 with div, then insert into div
    h.parentNode.replaceChild(d, h);
    d.appendChild(h);
    d.appendChild(d2);
  }
}
相关文章：