解析 ul 和 ol 中的嵌套 li

parse nested li inside ul and ol

我有一个场景,当 li 出现在 ul 下时,我需要用点 (.) 替换它,当 li 出现时,ol 我需要用数字替换它。

但问题是-

1) 不是嵌套的 li

2)同级追加。相同级别意味着一旦找到 li 它将首先添加 dot(.) 然后它会添加 number.

我想要的

1) 每当 li 进入 ul 时,它应该添加点 (.)。

2) 每当 li 进入 ol 时,它应该添加一个数字。

data = "<ol>\n<li>Introduction\n<ol>\n<li>hyy ssss</li>\n</ol>\n</li>\n<li>Description</li>\n<li>Observation</li>\n<li>Results</li>\n<li>Summary</li>\n</ol>\n<ul>\n<li>Introduction</li>\n<li>Description\n<ul>\n<li>Observation\n<ul>\n<li>Results\n<ul>\n<li>Summary</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Overview</li>\n</ul>\n<p>All the testing regarding bullet points would have been covered with the above content. Hence publishing this content will make an entry in in the selected  page, cricket page and so on.</p>\n"

    content = Nokogiri::HTML.parse(data)
    content.at('ul').children.xpath("//li").each { |li| li.inner_html="\u2022 "+li.inner_html }
    content.at('ol').children.xpath("//li").each_with_index { |li,index| li.inner_html="#{index} "+li.inner_html }

也许你需要这个:

content.css('ol').reverse.each do |ol| 
  ol.css('> li').each_with_index { |li,index| li.inner_html="#{index + 1} "+li.inner_html }
end
content.css('ul > li').reverse.each { |li| li.inner_html="\u2022 "+li.inner_html }

puts content

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html><body>
<ol>
  <li>1 Introduction
    <ol>
      <li>1 hyy ssss</li>
    </ol>
  </li>
  <li>2 Description</li>
  <li>3 Observation</li>
  <li>4 Results</li>
  <li>5 Summary</li>
</ol>
<ul>
  <li>• Introduction</li>
  <li>• Description
    <ul>
      <li>• Observation
        <ul>
          <li>• Results
            <ul>
              <li>• Summary</li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li>• Overview</li>
</ul>
</body></html>

这样做的原因reverse -
考虑 dom:

<ul>
  <li>Description
    <ul>
      <li>Observation</li>
    </ul>
  </li>
</ul>

当你content.css('ul > li')时,你得到[描述,观察]的顺序。如果没有 reverse,当您 运行 代码段时,您会更改 描述 ,但这样做也会更改 object_id观察节点。然后您更改了 observation 节点,该节点在 content 中的任何地方都没有被引用。这就是为什么,我反其道而行之,在parents之前获得了children。通过这样做,我确保我先更改 child 然后更改 parent 所以 parent 知道 child 并且任何地方都没有未引用的节点。

假设描述的节点 id 是 1234 并且观察 node_id 是 2345。当你 突变 描述时,它改变了自己但也改变了它的 child(2345 ).新的object id可以分别为3456和4567。然后你改变了 2345 (通过迭代),但它没有效果,因为你的 content 显示 3456 -> 4567

希望这是有道理的。