代码拉取完成，页面将自动刷新
使用Go语言开发的HTML和Markdown转JSON工具，将HTML/Markdown内容转换为符合各种小程序rich-text组件内容渲染所需格式的JSON
在开发 BookStack 的配套微信小程序 BookChat
以及使用 uni-app 开发配套的手机APP应用 BookChatApp的过程中，
我尝试了很多种开源的小程序HTML解析渲染组件，但都不是很满意。
后来将HTML内容在后端解析，并在小程序段使用自带的rich-text组件进行渲染，性能、稳定性以及渲染效果都比较符合预期，尽管并没有第三方HTML渲染工具那样提供图片预览的功能。
目前已经在BookStack v2.1 版本中使用了。
更多使用帮助，使用如下方式查看
./html2json --help
./html2json serve --port 8888 --tags weixin-html-tags.json
--port - [非必需参数]指定服务端口，默认为 8888--tags - [非必须参数]指定信任的HTML元素。json数组文件，里面存放各个支持的HTML标签。默认使用 uni-app 信任的HTML标签各小程序支持的HTML标签
- 微信小程序：https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html
- 支付宝小程序：https://docs.alipay.com/mini/component/rich-text
- 百度小程序：https://smartprogram.baidu.com/docs/develop/component/base/#rich-text-%E5%AF%8C%E6%96%87%E6%9C%AC/
- 头条小程序：https://developer.toutiao.com/dev/miniapp/uEDMy4SMwIjLxAjM
- QQ小程序：https://q.qq.com/wiki/develop/miniprogram/component/basic-content/rich-text.html
- uni-app: https://uniapp.dcloud.io/component/rich-text?id=rich-text
weixin-html-tags.json文件示例：
["a", "abbr", "address", "article", "aside", "b", "bdi", "bdo", "big", "blockquote", "br", "caption", "center", "cite", "code", "col", "colgroup", "dd", "del", "div", "dl", "dt", "em", "fieldset", "font", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hr", "i", "img", "ins", "label", "legend", "li", "mark", "nav", "ol", "p", "pre", "q", "rt", "ruby", "s", "section", "small", "span", "strong", "sub", "sup", "table", "tbody", "td", "tfoot", "th", "thead", "tr", "tt", "u", "ul"]
请求方法
GET
请求接口
/html2json
请求参数
url - [必需]需要解析的内容链接。timeout - 超时时间，单位为秒，默认为10秒domain - 图片等静态资源域名，用于拼装图片等链接。需带 http 或 https，如 https://static.bookstack.cn
注意：程序只解析 HTML 中的 Body 内容
使用示例
http://localhost:8888/html2json?timeout=5&url=https://gitee.com/truthhun/BookStack
请求方法
POST
请求接口
/html2json
请求参数
html - HTML内容字符串domain - 图片等静态资源域名，用于拼装图片等链接。需带 http 或 https，如 https://static.bookstack.cn
请求方法
POST
请求接口
/md2json
请求参数
markdown - [必需] markdown内容字符串domain - 图片等静态资源域名，用于拼装图片等链接。需带 http 或 https，如 https://static.bookstack.cn
go get -v github.com/TruthHun/html2json
package main
import (
"encoding/json"
"fmt"
"time"
"github.com/TruthHun/html2json/html2json"
)
func main() {
//rt:=html2json.NewDefault()
appTags:=html2json.GetTags(html2json.TagUniAPP)
rt:=html2json.New(appTags)
htmlStr:=`
<div>
hello world!
<span>this is a span</span>
a b c d e
<img src="https://www.bookstack.cn/static/images/logo.png"/>
<audio src="helloworld.mp3"></audio>
<video src="../bookstack.mp4"></video>
<a href="https://www.bookstack.cn">书栈网 - 分享知识，共享智慧</a>
</div>
<iframe src="https://www.baidu.com" frameborder="0"></iframe>
<pre>
this is pre code
</pre>
`
now:=time.Now()
nodes,err:=rt.Parse(htmlStr,"https://www.bookstack.cn/static/")
if err!=nil{
panic(err)
}
fmt.Println("spend time",time.Since(now))
fmt.Println(toJSON(nodes))
}
func toJSON(v interface{}) (js string) {
b,_:=json.Marshal(v)
return string(b)
}
示例代码输出结果
[{
"name": "div",
"attrs": {
"class": "tag-div"
},
"children": [{
"type": "text",
"text": "\n\thello world!\n\t"
}, {
"name": "span",
"attrs": {
"class": "tag-span"
},
"children": [{
"type": "text",
"text": "this is a span"
}]
}, {
"type": "text",
"text": "\n\ta b c d e\n\t"
}, {
"name": "img",
"attrs": {
"class": "tag-img",
"src": "https://www.bookstack.cn/static/images/logo.png"
}
}, {
"type": "text",
"text": "\n\t"
}, {
"name": "a",
"attrs": {
"class": "tag-audio",
"href": "https://www.bookstack.cn/static/helloworld.mp3",
},
"children": [{
"type": "text",
"text": " [audio] https://www.bookstack.cn/static/helloworld.mp3 "
}]
}, {
"type": "text",
"text": "\n\t"
}, {
"name": "a",
"attrs": {
"class": "tag-video",
"href": "https://www.bookstack.cn/bookstack.mp4",
},
"children": [{
"type": "text",
"text": " [video] https://www.bookstack.cn/bookstack.mp4 "
}]
}, {
"type": "text",
"text": "\n"
}, {
"name": "a",
"attrs": {
"class": "tag-a",
"href": "https://www.bookstack.cn"
},
"children": [{
"type": "text",
"text": "书栈网 - 分享知识，共享智慧"
}]
}, {
"type": "text",
"text": "\n"
}]
}, {
"type": "text",
"text": "\n"
}, {
"name": "a",
"attrs": {
"class": "tag-iframe",
"frameborder": "0",
"href": "https://www.baidu.com",
},
"children": [{
"type": "text",
"text": " [iframe] https://www.baidu.com "
}]
}, {
"type": "text",
"text": "\n"
}, {
"name": "div",
"attrs": {
"class": "tag-pre",
"style": "display: block;font-family: monospace;white-space: pre;margin: 1em 0;"
},
"children": [{
"type": "text",
"text": "\tthis is pre code\n"
}]
}, {
"type": "text",
"text": "\n"
}]
所有标签都会生成一个 "tag-"+标签名的class，以便于对标签进行样式控制。
比如 a标签，会添加上tag-a的class，div标签会添加一个tag-div，code标签会添加一个 tag-code的class，以此类推。
特别注释事项
由于部分小程序rich-text组件并不支持pre标签，所以pre标签会被转为div标签，并且多出一个tag-pre的class，同时会在增加一个
pre标签本身默认的css样式：
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
同时，如果video、iframe、audio标签，如果不在信任的标签里面，则作为a标签处理
编译好了的程序，只有一个可执行文件，部署和使用都和简单。
如果是部署到线上生产环境，需要设置守护进程。
注意：如果服务不对外提供API请求服务，建议把端口不对外网开放
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。