Question

I have a HTML document that has a structure like this:

<li class="indent1">(something)
  <li class="indent2">(something else)</li>
  <li class="indent2">(something else)
    <li class="indent3">(another sublevel)</li>
  </li>
  <li class="indent2">(something else)</li>
</li>

What I need to do is wrap these LI tags in OL tags. There are numerous lists such as these throughout the document. The HTML needs to look as follows:

<ol>
  <li>(something)
    <ol>
      <li>(something else)</li>
      <li>(something else)
        <ol>
          <li>(another sublevel)</li>
        </ol>
      </li>
      <li>(something else)</li>
    </ol>
  </li>
</ol>

How might I go about doing this in Nokogiri? Many thanks in advance.

Edit:

Here’s an example of the HTML as it is in the original document. My script converted all of the P tags to LI tags.

  <p class="indent1"><i>a.</i> This regulation describes the Army Planning, Programming,
  Budgeting, and Execution System (PPBES). It explains how an integrated Secretariat and
  Army Staff, with the full participation of major Army commands (MACOMs), Program
  Executive Offices (PEOs), and other operating agencies--</p>

  <p class="indent2">(1) Plan, program, budget, and then allocate and manage approved
  resources.</p>

  <p class="indent2">(2) Provide the commanders in chief (CINCs) of United States unified
  and specified commands with the best mix of Army forces, equipment, and support
  attainable within available resources.</p>

  <p class="indent1"><i>b.</i> The regulation assigns responsibilities and describes
  policy and procedures for using the PPBES to:</p>

Indent 1 classes mean a first-level list item, indent 2 means second level, etc. I need these indent classes converted into proper ordered lists.

Answer 1

The following solution works by looping through each <li> in the document and either:

• If there is is no preceding <ol>, swap the <li> with a new one and then put the <li> inside there.
• If there is an immediately preceding <ol>, move this <li> into it.

document.css('li').each do |li|
  if li.at_xpath('preceding-sibling::node()[not(self::text()[not(normalize-space())])][1][self::ol]')
    li.previous_element << li
  else
    li.replace('<ol/>').first << li
  end
end

Here it is, tested:

require 'nokogiri'

# Use XML instead of HTML fragment due to problems with XPath
fragment = Nokogiri::XML.fragment '
  <li>List 1
    <li>List 1a</li>
    <li>List 1b
      <li>List 1bi</li>
    </li>
    <li>List 1c</li>
    New List
    <li>New List 1a</li>
  </li>
  <p>Break 1</p>
  <li>List 2a</li>
  <li>List 2b</li>
  <p>Break 2</p>
  <li>List 3 <li>List 3a</li></li>
'

fragment.css('li').each do |li|
  # Complex test to see if the preceding element is an <ol> and there's no non-empty text the li and it
  # See http://stackoverflow.com/q/14045519/405017
  if li.at_xpath('preceding-sibling::node()[not(self::text()[not(normalize-space())])][1][self::ol]')
    li.previous_element << li
  else
    li.replace('<ol/>').first << li
  end
end

puts fragment   # I've normalized the whitespace in the output to make it clear
#=> <ol>
#=>   <li>List 1
#=>     <ol>
#=>       <li>List 1a</li>
#=>       <li>List 1b
#=>         <ol>
#=>           <li>List 1bi</li>
#=>         </ol>
#=>       </li>
#=>       <li>List 1c</li>
#=>     </ol>
#=>     New List
#=>     <ol><li>New List 1a</li></ol>
#=>   </li>
#=> </ol>
#=> <p>Break 1</p>
#=> <ol>
#=>   <li>List 2a</li>
#=>   <li>List 2b</li>
#=> </ol>
#=> <p>Break 2</p>
#=> <ol>
#=>   <li>List 3
#=>     <ol>
#=>       <li>List 3a</li>
#=>     </ol>
#=>   </li>
#=> </ol>