甘肃省网站建设_网站建设公司_MongoDB_seo优化
2026/1/17 17:29:35 网站建设 项目流程

一、背景说明

浏览器(Chrome / Edge / Firefox)导出的书签文件,通常是Netscape Bookmark HTML 格式
在实际开发中,我们可能会遇到以下需求:

  • 将浏览器书签导入到自己的系统
  • 对书签进行结构化存储(如数据库、JSON)
  • 做书签导航站、搜索、同步工具等

本文通过Jsoup + Fastjson2,演示如何将书签 HTML解析为层级 JSON 结构,并支持递归子目录


二、书签 HTML 格式说明

浏览器导出的书签文件大致结构如下:

<DL><DT><H3>文件夹</H3><DL><DT><AHREF="https://www.baidu.com/">百度</A><DT><H3>子文件夹</H3><DL><DT><AHREF="https://map.baidu.com/">百度地图</A></DL></DL></DL>

关键点:

  • <H3>:表示一个文件夹
  • <A>:表示一个书签链接
  • <DL>:表示当前文件夹的内容
  • 文件夹与其内容是H3 → 紧跟的 DL

三、技术选型

技术作用
Jsoup解析 HTML DOM
Fastjson2构建 JSON 数据
JUnit + SpringBootTest测试运行

四、完整示例代码

下面给出完整可运行代码,包括导入、类定义和递归方法:

packagecom.nav.test;importcom.alibaba.fastjson2.JSONArray;importcom.alibaba.fastjson2.JSONObject;importorg.jsoup.Jsoup;importorg.jsoup.nodes.Document;importorg.jsoup.nodes.Element;importorg.jsoup.select.Elements;importorg.junit.Test;importorg.junit.runner.RunWith;importorg.springframework.boot.test.context.SpringBootTest;importorg.springframework.test.context.junit4.SpringRunner;@SpringBootTest@RunWith(SpringRunner.class)publicclassBookmark{@Testpublicvoidmain(){// 模拟浏览器导出的书签 HTML 内容StringbookmarkContent="<!DOCTYPE NETSCAPE-Bookmark-file-1>\n"+"<!-- This is an automatically generated file. -->\n"+"<META HTTP-EQUIV=\"Content-Type\" CONTENT=\"text/html; charset=UTF-8\">\n"+"<TITLE>Bookmarks</TITLE>\n"+"<H1>Bookmarks</H1>\n"+"<DL><p>\n"+" <DT><H3 ADD_DATE=\"1632971641\" LAST_MODIFIED=\"1689686797\" PERSONAL_TOOLBAR_FOLDER=\"true\">书签栏</H3>\n"+" <DL><p>\n"+" <DT><A HREF=\"https://www.baidu.com/\" ADD_DATE=\"1689686710\">百度一下,你就知道</A>\n"+" <DT><H3 ADD_DATE=\"1689686747\" LAST_MODIFIED=\"1689686798\">子书签</H3>\n"+" <DL><p>\n"+" <DT><A HREF=\"https://map.baidu.com/\" ADD_DATE=\"1689686769\">百度地图</A>\n"+" </DL><p>\n"+" </DL><p>\n"+"</DL><p>";// 使用 Jsoup 解析 HTMLDocumentdoc=Jsoup.parse(bookmarkContent);// 找到书签栏(Chrome 的 PERSONAL_TOOLBAR_FOLDER)ElementmainFolder=doc.select("h3[personal_toolbar_folder]").first();// 递归处理JSONObjectresult=processFolder(mainFolder);// 输出 JSONSystem.out.println(result.toJSONString());}/** * 递归处理文件夹 * * @param folderElement 文件夹对应的 H3 元素 * @return JSONObject 结构 {name, links, subFolders} */privatestaticJSONObjectprocessFolder(ElementfolderElement){JSONObjectfolderJson=newJSONObject();// 文件夹名称folderJson.put("name",folderElement.text());// 当前文件夹对应的 <DL>Elementdl=folderElement.nextElementSibling();// 当前目录下的链接JSONArraylinks=newJSONArray();for(Elementa:dl.select("> dt > a")){JSONObjectlinkJson=newJSONObject();linkJson.put("name",a.text());linkJson.put("url",a.attr("href"));links.add(linkJson);}folderJson.put("links",links);// 子文件夹JSONArraysubFolders=newJSONArray();for(Elementh3:dl.select("> dt > h3")){subFolders.add(processFolder(h3));}folderJson.put("subFolders",subFolders);returnfolderJson;}}

五、输出 JSON 示例

运行上面的代码,控制台输出类似:

{"name":"书签栏","links":[{"name":"百度一下,你就知道","url":"https://www.baidu.com/"}],"subFolders":[{"name":"子书签","links":[{"name":"百度地图","url":"https://map.baidu.com/"}],"subFolders":[]}]}

六、实现思路总结

  1. H3 表示文件夹
  2. H3 后面的 DL 是内容
  3. 使用nextElementSibling()关联目录
  4. 递归解析子文件夹
  5. 通过> dt > a> dt > h3选择器分别获取当前目录的书签和子文件夹

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询