在HTML元素文本中添加换行符：递归遍历与DOM操作的挑战

import 'package:html/dom.dart' as dom;

/// 递归遍历HTML元素，并在所有叶子节点的文本内容后添加换行符。
///
/// [node] 要处理的HTML元素。
/// 返回修改后的HTML元素。
dom.Element addNewlineToLeafTexts(dom.Element node) {
  // 获取当前节点的所有直接子元素
  final List<dom.Element> children = node.children;

  for (final dom.Element child in children) {
    if (child.children.isNotEmpty) {
      // 如果子元素还有自己的子元素，则递归处理
      addNewlineToLeafTexts(child);
    } else if (child.text.isNotEmpty) {
      // 如果是叶子节点（没有子元素）且有文本内容，则添加换行符
      // 注意：这里使用 innerHtml 会覆盖所有内容，但对于叶子节点，
      // 它的 innerHtml 通常就是它的 textContent，所以是安全的。
      child.innerHtml = '${child.text}\n';
    }
  }
  return node;
}

void main() {
  // 示例文本，模拟一个HTML片段
  final String htmlString = '''
  <div>
     <ul>
        <li>test1</li>
        <li>
           test2
           <ul>
              <li>
                  test3
                 <ul>
                    <li>test4</li>
                    <li>test5</li>
                 </ul>
              </li>
              <li>test6</li>
           </ul>
        </li>
        <li>test7</li>
     </ul>
  </div>
  ''';

  // 使用 package:html 解析HTML字符串
  final dom.Document document = dom.Document.html(htmlString);
  // 获取要操作的根元素（这里假设是body的第一个子元素，即div）
  final dom.Element? rootDiv = document.body?.children.firstWhere(
    (element) => element.localName == 'div',
    orElse: () => throw Exception("Could not find div element"),
  );

  if (rootDiv != null) {
    // 调用函数修改DOM树
    final dom.Element modifiedDiv = addNewlineToLeafTexts(rootDiv);
    // 打印修改后的HTML结构
    print(modifiedDiv.outerHtml);
  }
}

<div>
   <ul>
      <li>test1
</li>
      <li>
         test2
         <ul>
            <li>
                test3
               <ul>
                  <li>test4
</li>
                  <li>test5
</li>
               </ul>
            </li>
            <li>test6
</li>
         </ul>
      </li>
      <li>test7
</li>
   </ul>
</div>