如何修改Dart方法，为所有HTML元素内文本添加换行符？

问题说明 #

需要给HTML元素内的所有文本值末尾添加换行符(\n)，但原Dart方法无法处理包含文本和子元素的混合节点场景，比如既有文本又嵌套<ul>的<li>元素。

原实现代码 #

dom.Element loop(dom.Element node){
    
    final List<dom.Element> elements = node.children;
    for (int i = 0; i < elements.length; i++){

      if(elements[i].hasContent() && elements[i].children.isEmpty){
        elements[i].innerHtml = '${elements[i].text}\n';
        continue;
      } else

      if(elements[i].children.isNotEmpty){
        loop(elements[i]);
      }
    }
   return node;
  }

输入HTML示例 #

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

预期输出 #

<div>
   <ul>
      <li>test1\n</li>
      <li>
         test2\n
         <ul>
            <li>
               &nbsp;test3\n
               <ul>
                  <li>test4\n</li>
                  <li>test5\n</li>
               </ul>
            </li>
            <li>test6\n</li>
         </ul>
      </li>
      <li>test7\n</li>
   </ul>
</div>

问题分析 #

原方法只遍历元素的子元素节点（node.children），忽略了元素内部的文本节点（比如<li>里直接写的test2就是文本节点，不属于子元素）。同时，原逻辑仅处理没有子元素的元素，导致包含文本和子元素的混合节点中的文本无法被添加换行符。

修正后的代码 #

dom.Element loop(dom.Element node) {
  // 遍历所有子节点：包含文本节点、元素节点等所有类型
  final List<dom.Node> childNodes = node.childNodes;
  for (int i = 0; i < childNodes.length; i++) {
    final dom.Node currentNode = childNodes[i];
    
    // 处理非空白的文本节点，添加换行符
    if (currentNode is dom.Text && currentNode.text.trim().isNotEmpty) {
      currentNode.text = '${currentNode.text}\n';
    } 
    // 处理元素节点，递归遍历其子节点
    else if (currentNode is dom.Element) {
      loop(currentNode);
    }
  }
  return node;
}

修正说明 #

1. 遍历所有子节点：使用node.childNodes替代node.children，确保文本节点不会被遗漏；
2. 区分节点类型：判断节点是文本节点还是元素节点，分别处理；
3. 过滤空白文本：仅对非空白的文本节点添加换行符，避免给缩进、换行等空白内容添加不必要的\n；
4. 递归处理元素：元素节点继续递归遍历内部所有节点，实现全层级覆盖。

内容的提问来源于stack exchange，提问作者Rajitha Perera