如何用Jsoup从HTML页面提取完整格式的TypeScript代码？

我正在学习Jsoup，需要从包含<p>标签以及带synStatement、synIdentifier、synConstant、synType类的<span>标签的HTML页面中提取TypeScript代码，但编写的Java程序输出既不完整，格式也不符合要求。

目标HTML片段 #

<p>Currency.ts</p>

<pre class="code lang-typescript" data-lang="typescript" data-unlink><span class="synStatement">export</span> <span class="synStatement">type</span> Currency <span class="synStatement">=</span> <span class="synIdentifier">{</span>
  unit: <span class="synConstant">'EUR'</span> | <span class="synConstant">'GBP'</span> | <span class="synConstant">'JPY'</span> | <span class="synConstant">'USD'</span>
  value: <span class="synType">number</span>
<span class="synIdentifier">}</span>

<span class="synStatement">export</span> <span class="synStatement">const</span> Currency <span class="synStatement">=</span> <span class="synIdentifier">{</span>
  <span class="synStatement">from(</span>value: <span class="synType">number</span><span class="synStatement">,</span> unit: Currency<span class="synIdentifier">[</span><span class="synConstant">'unit'</span><span class="synIdentifier">]</span> <span class="synStatement">=</span> <span class="synConstant">'USD'</span><span class="synStatement">)</span>: Currency <span class="synIdentifier">{</span>
    <span class="synStatement">return</span> <span class="synIdentifier">{</span> unit<span class="synStatement">,</span> value <span class="synIdentifier">}</span>
  <span class="synIdentifier">}</span>
<span class="synIdentifier">}</span>
</pre>

期望提取结果 #

Currency.ts

export type Currency = {
  unit: 'EUR' | 'GBP' | 'JPY' | 'USD'
  value: number
}

export const Currency = {
  from(value: number, unit: Currency['unit'] = 'USD'): Currency {
    return { unit, value }
  }
}

现有代码的问题 #

原代码存在以下问题：

• 按span类分组收集文本，破坏了原有代码的顺序
• 忽略了非span节点的文本（比如Currency、|、:这些内容）
• 每个span文本后都添加换行，完全打乱了原有格式
• 没有提取<p>标签里的文件名

修正后的代码 #

import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Node;
import org.jsoup.nodes.TextNode;
import org.jsoup.select.Elements;

import java.io.File;
import java.io.IOException;

public class CurrencyExtractor {
    public static void main(String[] args) {
        try {
            File input = new File("Currency.html");
            Document doc = Jsoup.parse(input, "UTF-8", "");
            
            // 提取文件名
            String fileName = doc.select("p").first().text();
            System.out.println(fileName);
            System.out.println();
            
            // 定位到代码所在的pre标签
            Elements codePre = doc.select("pre.code.lang-typescript");
            if (!codePre.isEmpty()) {
                StringBuilder tsCode = new StringBuilder();
                // 遍历pre下的所有子节点，包括文本节点和span
                for (Node node : codePre.first().childNodes()) {
                    if (node instanceof TextNode) {
                        // 添加文本节点的内容，保留换行和空格
                        tsCode.append(((TextNode) node).text());
                    } else {
                        // 添加span标签的文本内容
                        tsCode.append(node.text());
                    }
                }
                System.out.println(tsCode.toString());
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

代码说明 #

1. 先提取<p>标签的文本作为文件名，直接输出
2. 通过选择器定位到包含TypeScript代码的<pre>标签
3. 遍历<pre>标签下的所有子节点，无论是文本节点还是带类的<span>，都按顺序提取文本内容
4. 保留原有的换行、空格等格式，最终拼接输出完整的TypeScript代码

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