[发明专利]一种基于富文本的节点截取方法、系统、设备和存储介质

说明书

本发明属于文本截取技术领域，具体公开了一种基于富文本的节点截取方法，包括：获取原始富文本的DOM节点；通过序列化DOM节点，生成对象树；通过递归节点对象树计算文本数量，遍历节点对象树数组；计数满足预期的截取文本数量时，截取文本内容，跳出循环，截取剩下的DOM对象树；将DOM对象树反序列化成DOM节点，遍历DOM对象树；调用DOM节点的innerHTML方法生成一个保留样式的富文本；将保留样式后的富文本上传到服务器端；用户端获取富文本后直接设置DOM的innerHTML方法渲染即可完成精准截取。本发明通过序列化DOM树的方法，能够精准到字数的对富文本进行截取，并且可以保留样式。

技术领域

本发明属于文本截取技术领域，特别涉及一种基于富文本的节点截取 方法、系统、设备和存储介质。

背景技术

现代的文章编辑基本上都基于富文本编辑器，富文本编辑器，Rich Text Editor,简称RTE,是一种可内嵌于浏览器，所见即所得的文本编 辑器。它是一种解决可一般的用户不同HTML等网页标记但是需要在网页 上设置字体的颜色、大小、样式等信息问题一个文本编辑器。

随着知识付费文章等场景的流行，大多数付费文章都是基于富文本段 落的截取，比如得到，微信付费文章，得到付费阅读等应用。但是现有技 术中基于段落的截取遇到的问题如下：

1.不能够精准的截取到具体文字数量，只能根据段落截取。

2.样式与文本分离，还需要前端另行处理。

3.后台编辑页面，后端存储，用户展示端都需要不同程度的修改。

因此，提供一种新的基于富文本的节点截取方法是本领域技术人员亟 需解决的技术问题。

发明内容

本发明的目的在于克服现有技术中存在的缺陷，提供一种基于富文本 的节点截取方法。

本发明的第一方面，提供了一种基于富文本的节点截取方法，包括以 下步骤：

步骤1：通过JavaScript获取原始富文本的DOM节点；

步骤2：通过序列化DOM节点，生成对象树；

步骤3：通过递归节点对象树计算文本数量，遍历节点对象树数组；

步骤4：计数满足预期的截取文本数量时，截取文本内容，跳出循环， 截取剩下的DOM对象树；

步骤5：将DOM对象树反序列化成DOM节点，遍历DOM对象树；判断 DOM节点是否还有子节点，如果没有，进行下一步，如果有重复以上过程， 直到没有子节点为止；

步骤6：调用DOM节点的innerHTML方法生成一个保留样式的富文本；

步骤7：将保留样式后的富文本上传到服务器端；

步骤8：用户端获取富文本后直接设置DOM的innerHTML方法渲染即 可完成精准截取。

进一步的方案为，所述步骤2中，获取到DOM节点后，遍历查询子节 点，如果子节点是文本节点，则删除特殊字符，如果子节点是普通节点， 将节点属性遍历保存到对象属性上，如果子节点还有子节点，重复以上过 程，直到没有子节点为止。

进一步的方案为，所述步骤3中，如果是普通节点，查看有没有子节 点，如果有子节点，接着遍历子节点直到没有子节点为止，如果是文本节 点，根据文本长度进行计数。

进一步的方案为，所述步骤5中，如果子节点是文本节点，则创建文 本节点，如果子节点是普通节点，则创建普通节点。

本发明的第二方面，提供了一种基于富文本的节点截取系统，其特征 在于，包括：