Groovy (Java) Jsoup 解析 API 需求 使用示例 测试 注意点

具体文档请见:
英文官网:
中文页面:(由深度开源译制)
官方API:

需求

笔记模版功能需要把前端制作好的笔记模版 html 页面中的 data-setting 属性进行拆分,data-setting 中的数据是 JSONObject 格式,通过拆分,解析内部的属性,通过属性对日程进行具体的筛选查询。
 
由前端传入的页面如下,里面的 data-setting 已经标记为蓝色
 
 1 <h4 title='keep'>Keep:今日完成了哪些工作</h4>
 2 <p class='unselection-wrapper' data-unique-id='52ce32fd-ab80-ca58-6043-b1b1c28630b7' data-task-block='true' data-setting='{&quot;preContext&quot;:&quot;taskTime&quot;,&quot;taskContent&quot;:[],&quot;subTodo&quot;:&quot;currentDone&quot;,&quot;filter&quot;:{&quot;type&quot;:&quot;current&quot;,&quot;doneState&quot;:&quot;finished&quot;,&quot;pContainer&quot;:[&quot;IE&quot;,&quot;IU&quot;,&quot;UE&quot;,&quot;UU&quot;],&quot;label&quot;:[],&quot;kanban&quot;:[]}}'>
 3 <inherit> <span class='unselection-inline-wrapper'> <span class='unselection-task-block unselection-content' contenteditable='false'> <span data-title='自动填充日程任务'></span> <span data-sub-title='筛选结果:当日完成的任务'></span> <span class='simditor-r-icon-setting unselection-task-block-setting'></span> <span class='simditor-r-icon-close unselection-attach-delete'></span> </span>
 4 </span>
 5 </inherit>
 6 </p>
 7 <p><br></p>
 8 <h4 title='problem'>Problem:遇到了什么问题?</h4>
 9 <p><br></p>
10 <h4 title='try'>Try:准备尝试哪些措施</h4>
11 <p><br></p>
12 <h4>今日未完</h4>
13 <p><br></p>
14 <h4 title='plan'>Plan:明日的任务</h4>
15 <p class='unselection-wrapper' data-unique-id='cc466372-493e-6bb1-056b-5ed6d1b07ebd' data-task-block='true' data-setting='{&quot;preContext&quot;:&quot;taskTime&quot;,&quot;taskContent&quot;:[],&quot;subTodo&quot;:&quot;none&quot;,&quot;filter&quot;:{&quot;type&quot;:&quot;next&quot;,&quot;doneState&quot;:&quot;all&quot;,&quot;pContainer&quot;:[&quot;IE&quot;,&quot;IU&quot;,&quot;UE&quot;,&quot;UU&quot;],&quot;label&quot;:[],&quot;kanban&quot;:[]}}'>
16 <inherit> <span class='unselection-inline-wrapper'> <span class='unselection-task-block unselection-content' contenteditable='false'> <span data-title='自动填充日程任务'></span> <span data-sub-title='筛选结果:明天任务、全部'></span> <span class='simditor-r-icon-setting unselection-task-block-setting'></span> <span class='simditor-r-icon-close unselection-attach-delete'></span> </span>
17 </span>
18 </inherit>
19 </p>

使用示例

1、使用 Jsoup 拆解元素后把属性内容返回

Jsoup 具有自动补全的功能,即使上述页面不是一个完整的 html 页面(没有 <html> 标签,没有<body> 体),Jsoup 也能智能的进行补全操作(自动添加 <html> 标签和 <body> 标签)。
 
我要做的是,把这个页面当成一个参数传入某接口,并在接口中通过 Jsoup 进行拆分,最后把 data-setting 属性转换成 JSONObject 返回给前端。
 
请求格式:
 
Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点
接口样式:
 
Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点

测试

1、接受 content 参数,可以看到成功接收
 
Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点
 
2、通过 Jsoup 之后,页面改变为完成的 html 格式
 
Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点

3、获取含有 data-setting 的属性的 dom

Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点
 
4、把其中的一个转换成 JSONObject 之后返回结果
 
Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点
 
5、前端收到返回结果
 
Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点

2、当然,也可以通过 Jsoup 拆解 HTML 页面后,重新填写页面中的属性和 DOM 元素再把页面返回

Groovy (Java) Jsoup 解析
API
需求
使用示例
测试
注意点

其中,可以通过 Element.attr("attribute","value") 来进行属性值的设计。同样的操作可以用于填充 DOM 的内容或者直接填充 DOM 元素。
 
最后返回时,如果需要返回 <html> 体的内容,那么直接 Document.body() 可以获取 doc 中 <body> 体中的元素,再通过 Element.html() 返回一个字符串类型的 html 页面。
 
返回结果:
 1 <h4 title="keep">Keep:今日完成了哪些工作</h4>
 2 <p class="unselection-wrapper" data-unique-id="52ce32fd-ab80-ca58-6043-b1b1c28630b7" data-task-block="true" data-setting="日了狗">
 3  <inherit> 
 4   <span class="unselection-inline-wrapper"> <span class="unselection-task-block unselection-content" contenteditable="false"> <span data-title="自动填充日程任务"></span> <span data-sub-title="筛选结果:当日完成的任务"></span> <span class="simditor-r-icon-setting unselection-task-block-setting"></span> <span class="simditor-r-icon-close unselection-attach-delete"></span> </span> </span> 
 5  </inherit></p>
 6 <p><br /></p>
 7 <h4 title="problem">Problem:遇到了什么问题?</h4>
 8 <p><br /></p>
 9 <h4 title="try">Try:准备尝试哪些措施</h4>
10 <p><br /></p>
11 <h4>今日未完</h4>
12 <p><br /></p>
13 <h4 title="plan">Plan:明日的任务</h4>
14 <p class="unselection-wrapper" data-unique-id="cc466372-493e-6bb1-056b-5ed6d1b07ebd" data-task-block="true" data-setting="{&quot;preContext&quot;:&quot;taskTime&quot;,&quot;taskContent&quot;:[],&quot;subTodo&quot;:&quot;none&quot;,&quot;filter&quot;:{&quot;type&quot;:&quot;next&quot;,&quot;doneState&quot;:&quot;all&quot;,&quot;pContainer&quot;:[&quot;IE&quot;,&quot;IU&quot;,&quot;UE&quot;,&quot;UU&quot;],&quot;label&quot;:[],&quot;kanban&quot;:[]}}">
15  <inherit> 
16   <span class="unselection-inline-wrapper"> <span class="unselection-task-block unselection-content" contenteditable="false"> <span data-title="自动填充日程任务"></span> <span data-sub-title="筛选结果:明天任务、全部"></span> <span class="simditor-r-icon-setting unselection-task-block-setting"></span> <span class="simditor-r-icon-close unselection-attach-delete"></span> </span> </span> 
17  </inherit></p>

注意点

1、通过 Jsoup 解析后,首先是一个 
org.jsoup.nodes.Document
需要再用 Elements 解析后使用
2、Elements 解析是一个数组的格式,
 
                                                          2017-08-09 11:54:55 原创  转载注明出处