解决微信小程序富文本JAVA后端渲染方案(参考html2wxml4j)
单于庆
基于Jsoup+FastJson。参考html2wxml4j。（仅Java部分， 前端自行百度。。。）
DEMO：
https://github.com/chenfangya/Html2wxml4jDemo
<dependency>
<groupId>org.jsoup</groupId>
<artifactId>jsoup</artifactId>
<version>1.11.3</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.55</version>
</dependency>
<dependency>
<groupId>com.codewaves.codehighlight</groupId>
<artifactId>codehighlight</artifactId>
<version>1.0.2</version>
</dependency>
public class RendererFactory implements StyleRendererFactory {
public StyleRenderer create(String languageName) {
return new HtmlRenderer("hljs-");
}
}
@Setter
@Getter
@ToString
public class Params {
public static final String TYPE_HTML = "html";
public static final String TYPE_MD = "md";
public static final String TYPE_MARKDOWN = "markdown";
private String type;// 类型 html markdown md
private Boolean highlight;// 是否开启pre代码高亮
private Boolean linenums;// 是否开启显示pre代码行号
private String baseUri;// 超链接或者图片的根URL
private String text;// 需要转换的html
}
private Params getParams(){
//这里因为需要适配html2wxml前端小程序 所以只能这么写
//拿到html2wxml组件版源码可以自行修改传递参数包装起来传递{"params":params}
Params params=new Params();
params.setHighlight(true);
params.setLinenums(true);
params.setType("html");//类型 默认HMTL
// params.setBaseUri(baseUri);
return params;
}
public class HtmlToJson {
private String html;// 待转Html
private Params params;
private int idx;// 图片资源idx html2wxml里存在这个值
private boolean needAbsUrl=false;
public static HtmlToJson by(String html,Params params) {
return new HtmlToJson(html,params);
}
private HtmlToJson(String html,Params params) {
this.html = html;
this.params=params;
this.idx = 0;
this.needAbsUrl=StringUtils.isNotBlank(params.getBaseUri());
this.clean();
}
/**
* 获取转换后的JSON 数组 有多级子节点
* @return
*/
public JSONArray get() {
if (StringUtils.isBlank(html)) {
return null;
}
Document document = null;
try {
//判断是否需要绝对路径URL
if (needAbsUrl) {
document = Jsoup.parseBodyFragment(html, params.getBaseUri());
} else {
document = Jsoup.parseBodyFragment(html);
}
} finally {
if (document == null) {
return null;
}
}
//以前使用Element元素会把无标签包裹的textNode节点给抛弃，这里改为选用Node节点实现
//Node节点可以将一段html的所有标签和无标签文本区分 都转为Node
List<Node> nodes = document.body().childNodes();
//如果获取的Node为空 直接返回Null不处理
if(nodes.isEmpty()){
return null;
}
//整个HTML转为JSON其实是转为一个JSON数组传递给前端html2wxml组件模板 循环解析
JSONArray array = new JSONArray();
JSONObject jsonObject = null;
String tag=null;
for (Node node : nodes) {
tag=node.nodeName().toLowerCase();
jsonObject = convertNodeToJsonObject(node,tag,"pre".equals(tag));
if (jsonObject != null) {
array.add(jsonObject);
}
}
return array;
}
/**
* 判断是否为TextNode
* @param tag
* @return
*/
public boolean isTextNode(String tag){
return "#text".equals(tag);
}
/**
* 判断是否为script tag标签节点
* @param tag
* @return
*/
public boolean isScriptNode(String tag){
return "script".equals(tag);
}
/**
* 判断是否为DateNode
* @param tag
* @return
*/
public boolean isDataNode(String tag){
return "#data".equals(tag);
}
/**
* 将一个节点元素转为JsonObject
* @param element
* @param needClass
* @return
*/
private JSONObject convertNodeToJsonObject(Node node,String tag, boolean needClass) {
/*if(isScriptNode(tag)){
return null;
}*/
if(isTextNode(tag)){
return processTextNode(tag, ((TextNode)node).getWholeText());
}
if(isDataNode(tag)){
return processDataNode(tag, ((DataNode)node).getWholeData());
}
//后面用Element操作更方便一点 转一下
//如果这个元素没有内容 忽略掉
/*if (elementIsEmpty(element)) {
return null;
}*/
JSONObject eleJsonObj = new JSONObject();
if(tag.equals("pre")){
Element element=(Element) node;
processTagPre(eleJsonObj, element);
}else{
// 1、处理主要的tag type attr
if(isTextNode(tag)||isDataNode(tag)||isCommentNode(tag)){
eleJsonObj.put("tag", "#text");
eleJsonObj.put("type", "inline");
}else{
Element element=(Element) node;
processMain(element, tag, eleJsonObj);
}
// 2、处理Onclick
processOnclick(node, tag, eleJsonObj);
// 3、处理Style
processStyle(node, tag, eleJsonObj);
if(needClass){
processClass(node, tag, eleJsonObj);
}
// 4、处理子节点
processChildNodes(node, tag, eleJsonObj,needClass);
}
return eleJsonObj;
}
/**
* 是否是注释
* @param tag
* @return
*/
private boolean isCommentNode(String tag) {
return "#comment".equals(tag);
}
private JSONObject processDataNode(String tag, String data) {
//暂不实现
return null;
}
private JSONObject processTextNode(String tag,String text) {
JSONObject jsonObject=new JSONObject();
String line=System.lineSeparator();
jsonObject.put("tag", tag);
jsonObject.put("text", text.replaceAll(line+"|\r|\n", ""));
return jsonObject;
}
/**
* 判断空元素
* 条件是 没有文本型内容 不包含图片、视频、音频数据、还没有Style或者class的标签
* @param element
* @return
*/
private boolean elementIsEmpty(Element element) {
return element.hasText() == false &&
element.selectFirst("img") == null&&
element.selectFirst("video") == null&&
element.selectFirst("audio") == null&&
element.hasAttr("style")==false&&
element.hasAttr("class")==false;
}
/**
* 处理主要的tab type attr a和img特殊处理href和src
* @param element
* @param tag
* @param eleJsonObj
*/
private void processMain(Element element, String tag, JSONObject eleJsonObj) {
eleJsonObj.put("tag", tag);
eleJsonObj.put("type", element.isBlock() ? "block" : "inline");
if (tag.equals("a")) {
processTagA(eleJsonObj, element);
} else if (tag.equals("img")) {
processTagImg(eleJsonObj, element);
} else if (tag.equals("video")||tag.equals("audio")) {
processTagVideoOrAudio(eleJsonObj,tag, element);
}
}
/**
* 处理Video标签或者audio标签
* @param node
* @param element
*/
private void processTagVideoOrAudio(JSONObject node,String tag, Element element) {
JSONObject attr = new JSONObject();
String src=element.attr("src");
if(needAbsUrl){
if(src.startsWith("http")){
attr.put("src",src );
}else{
attr.put("src", element.absUrl("src"));
}
}else{
attr.put("src",src );
}
if(element.hasAttr("controls")){
attr.put("controls","controls");
}
if(element.hasAttr("autoplay")){
attr.put("autoplay","autoplay");
}
if(element.hasAttr("loop")){
attr.put("loop","loop");
}
if(element.hasAttr("muted")&&tag.equals("video")){
attr.put("muted","muted");
}
if(tag.equals("audio")){
if(element.hasAttr("name")){
attr.put("name", element.attr("name"));
}
if(element.hasAttr("author")){
attr.put("author", element.attr("author"));
}
}
if(element.hasAttr("poster")){
String poster=element.attr("poster");
if(needAbsUrl){
if(src.startsWith("http")){
attr.put("poster",poster);
}else{
attr.put("poster", element.absUrl("poster"));
}
}else{
attr.put("poster",poster);
}
}
node.put("attr", attr);
}
/**
* 处理代码高亮
* @param node
* @param element
*/
private void processTagPre(JSONObject node, Element element) {
node.put("tag", "pre");
node.put("type", "block");
JSONObject attr = new JSONObject();
attr.put("class", "hljs");
node.put("attr", attr);
String code=element.html();
if(code.indexOf("ol")!=-1&&code.indexOf("linenums")!=-1){
code=element.text().trim();
}
//使用highlighter库 将代码进行高亮转换
final Highlighter highlighter = new Highlighter(new RendererFactory());
final Highlighter.HighlightResult result = highlighter.highlightAuto(code, null);
final CharSequence styledCode = result.getResult();
if(styledCode!=null){
element.html(styledCode.toString());
}
// 处理Class
processClass(element, "pre", node);
//pre标签里的代码内容 需要创建ol和li去包裹每一行转换后的代码 行号
JSONObject olNode=new JSONObject();
olNode.put("tag", "ol");
olNode.put("type", "block");
JSONArray olArray=new JSONArray();
olArray.add(olNode);
node.put("nodes", olArray);
//从处理OL开始
processPreOl(element, olNode);
}
/**
* 处理代码linenumbers
* @param element
* @param olNode
*/
private void processPreOl(Element element, JSONObject olNode) {
String html=element.html();
//拿到的代码需要按行分割字符串
String lines[] =html.split( System.lineSeparator());
//没有数据就put空list
if(lines!=null&&lines.length>0){
int size=lines.length;
JSONArray nodesArray=new JSONArray();
JSONObject liJsonObject=null;
//有数据 就逐行处理代码
for(int i=0;i<size;i++){
//目的就是一行li就是一个JSONObject 每个object的nodes就是他的子节点
liJsonObject=processPreLi(lines[i],i);
if(liJsonObject!=null){
nodesArray.add(liJsonObject);
}
}
olNode.put("nodes", nodesArray);
}else{
olNode.put("nodes", Collections.emptyList());
}
}
/**
* 处理每一行代码段
* @param lineHtml
* @param i
* @return
*/
private JSONObject processPreLi(String lineHtml, int i) {
JSONObject liNode=new JSONObject();
liNode.put("tag", "li");
liNode.put("type", "block");
liNode.put("idx", i);
//开始处理nodes 找到子节点解析出来
JSONArray jsonNodes=new JSONArray();
//如果一行数据里开头是有一段空格 需要单独处理成空格Text tag
if(lineHtml.startsWith(" ")){
String trimtext=lineHtml.trim();
int index=lineHtml.indexOf(trimtext);
String whiteSpaces=lineHtml.substring(0,index);
lineHtml=lineHtml.substring(index);
processMutilTextNode(jsonNodes,"#text",whiteSpaces);
}
//剩下的数据 按照左侧无空格方式处理生成Nodes
processLiWithoutLeftWhiteSpace(lineHtml, liNode, jsonNodes);
//最终返回一个包装好的liNode
return liNode;
}
/**
* 剩下的数据 按照左侧无空格方式处理生成Nodes
* @param lineHtml
* @param liNode
* @param jsonNodes
*/
private void processLiWithoutLeftWhiteSpace(String lineHtml, JSONObject liNode, JSONArray jsonNodes) {
List<Node> nodes=Jsoup.parse(lineHtml).selectFirst("body").childNodes();
if(nodes.isEmpty()){
liNode.put("nodes", Collections.emptyList());
}else{
JSONObject jsonObject=null;
for(Node node:nodes){
String tag=node.nodeName();
if(isTextNode(tag)){
processMutilTextNode(jsonNodes,tag,((TextNode)node).getWholeText());
}else{
if(isNotNullSpan(node)){
jsonObject=convertNodeToJsonObject(node, node.nodeName(), true);
if(jsonObject!=null){
jsonNodes.add(jsonObject);
}
}
}
}
liNode.put("nodes", jsonNodes);
}
}
private boolean isNotNullSpan(Node node) {
return !(node.hasAttr("class")&&node.attr("class").equals("null"));
}
/**
* 处理textNode类型的节点 里面可能带着左侧空格的 都需要把空格转为空格节点
* @param jsonNodes
* @param tag
* @param wholeText
*/
private void processMutilTextNode(JSONArray jsonNodes,String tag, String wholeText) {
if(wholeText.startsWith(" ")&&wholeText.length()>1&&StringUtils.isNotBlank(wholeText)){
String trimText=wholeText.trim();
int index=wholeText.indexOf(trimText);
jsonNodes.add(processTextNode(tag, wholeText.substring(0,index)));
jsonNodes.add(processTextNode(tag, wholeText.substring(index)));
}else{
jsonNodes.add(processTextNode(tag, wholeText));
}
}
/**
* 处理style属性
* @param element
* @param tag
* @param eleJsonObj
*/
private void processStyle(Node node, String tag, JSONObject eleJsonObj) {
if (node.hasAttr("style")) {
String style = node.attr("style");
if (StringUtils.isNotBlank(style)) {
JSONObject attr = eleJsonObj.getJSONObject("attr");
if (attr == null) {
attr = new JSONObject();
eleJsonObj.put("attr", attr);
}
attr.put("style", style);
}
}
}
/**
* 处理class属性
* @param node
* @param tag
* @param eleJsonObj
*/
private void processClass(Node node, String tag, JSONObject eleJsonObj) {
if (node.hasAttr("class")) {
String style = node.attr("class");
if (StringUtils.isNotBlank(style)) {
JSONObject attr = eleJsonObj.getJSONObject("class");
if (attr == null) {
attr = new JSONObject();
eleJsonObj.put("attr", attr);
}
attr.put("class", style);
}
}
}
/**
* 处理style属性
* @param element
* @param tag
* @param eleJsonObj
*/
private void processOnclick(Node node, String tag, JSONObject eleJsonObj) {
if (node.hasAttr("onclick")) {
String onclick = node.attr("onclick");
if (StringUtils.isNotBlank(onclick)) {
JSONObject attr = eleJsonObj.getJSONObject("onclick");
if (attr == null) {
attr = new JSONObject();
eleJsonObj.put("attr", attr);
}
attr.put("onclick", onclick);
}
}
}
/**
* 处理子节点
* @param element
* @param tag
* @param eleJsonObj
* @param needClass
*/
private void processChildNodes(Node node, String tag, JSONObject eleJsonObj, boolean needClass) {
if (tag.toLowerCase().equals("img")) {
return;
}
List<Node> sonNodes = node.childNodes();
JSONArray nodes = new JSONArray();
if (sonNodes.isEmpty()==false) {
JSONObject soneleJsonObj = null;
for (Node son : sonNodes) {
soneleJsonObj = convertNodeToJsonObject(son, son.nodeName(),needClass);
if (soneleJsonObj != null) {
nodes.add(soneleJsonObj);
}
}
}
eleJsonObj.put("nodes", nodes);
}
/**
* 处理超链接
*
* @param jsonObject
* @param element
*/
private void processTagA(JSONObject node, Element element) {
JSONObject attr = new JSONObject();
String href=element.attr("href");
if(needAbsUrl){
if(href.startsWith("http")){
attr.put("href",href );
}else{
attr.put("href", element.absUrl("href"));
}
}else{
attr.put("href",href );
}
//处理A标签style
String style=element.attr("style");
if (StringUtils.isNotBlank(style)) {
attr.put("style",style );
}
node.put("attr", attr);
}
/**
* 处理图片
*
* @param jsonObject
* @param element
*/
private void processTagImg(JSONObject node, Element element) {
JSONObject attr = new JSONObject();
String href=element.attr("src");
if(needAbsUrl){
if(href.startsWith("http")){
attr.put("src",href );
}else{
attr.put("src", element.absUrl("src"));
}
}else{
attr.put("src",href );
}
node.put("attr", attr);
node.put("idx", idx);
idx++;
}
/**
* 处理不安全html返回安全html
* @return
*/
private void clean() {
//TODO 这里可以在执行转换前过滤数据
}
}
//把html转换成JsonArray
String html="<div style=\"sss\" id=\"b\">cccccc<pre class=\"a\"><script src=\"script.js\">scripot</script> <link href=\"c.css\"></link></pre></div>";
JSONArray resultJson = HtmlToJson.by(html,params).get();
类似资料：