CN113807050A

CN113807050A - 一种基于富文本的节点截取方法、系统、设备和存储介质

Info

Publication number: CN113807050A
Application number: CN202110742641.4A
Authority: CN
Inventors: 周帅超
Original assignee: Xi'an Huaxun Technology Co ltd
Current assignee: Xi'an Huaxun Technology Co ltd
Priority date: 2021-07-01
Filing date: 2021-07-01
Publication date: 2021-12-17
Anticipated expiration: 2041-07-01
Also published as: CN113807050B

Abstract

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

Description

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

技术领域

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

背景技术

现代的文章编辑基本上都基于富文本编辑器，富文本编辑器，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中，如果子节点是文本节点，则创建文本节点，如果子节点是普通节点，则创建普通节点。

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

节点获取模块，用于通过JavaScript获取原始富文本的DOM节点；

对象数生成模块，通过序列化DOM节点，生成对象树；

文本数量计算模块，通过递归节点对象树计算文本数量，遍历节点对象树数组；

文本截取模块，当计数满足预期的截取文本数量时，用于截取文本内容，跳出循环，截取剩下的DOM对象树；

DOM节点生成模块，用于将DOM对象树反序列化成DOM节点，遍历DOM 对象树；

富文本生成模块，调用DOM节点的innerHTML方法生成一个保留样式的富文本；

上传模块，用于将保留样式后的富文本上传到服务器端；

渲染模块，用于对用户端获取的富文本进行DOM的innerHTML方法渲染。

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

进一步的方案为，所述文本数量计算模块在计算节点对象树数量时，如果是普通节点，查看有没有子节点，如果有子节点，接着遍历子节点直到没有子节点为止，如果是文本节点，根据文本长度进行计数。

进一步的方案为，所述DOM节点生成模块在生成DOM节点时，如果子节点是文本节点，则创建文本节点，如果子节点是普通节点，则创建普通节点。

本发明的第三方面，提供了一种设备，包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行上述所述方法的步骤。

本发明的第四方面，提供了一种计算机可读存储介质，包括程序代码，当所述程序产品在电子设备上运行时，所述程序代码用于使所述电子设备执行上述任一所述方法的步骤。

在本发明内容中，普通节点包括文本节点，文本节点是一种特殊的DOM 节点，是展示文字用的，常见P，span，或者标签内直接展示文字内容的。

普通节点是指除了文本节点之外的节点。

与现有技术相比，本发明的有益效果在于：

(1)本发明通过序列化DOM树的方法，能够精准到字数的对富文本进行截取，并且可以保留样式。

(2)本发明可以在保留原有样式的情况下截取富文本的内容，可用于常规的富文本组件，适用性广，可用于更灵活的UI界面

(3)本发明截取的富文本自动带样式，不需要二次开发。

(4)本发明通过递归序列化DOM节点的属性后，转为节点对象，通过递归节点对象进行字数计算，当计算的数量大于等于需要截取的数量后，截取对象树，再反序列化成DOM节点，渲染页面。实现富文本保存样式的截取。

附图说明

以下附图仅对本发明作示意性的说明和解释，并不用于限定本发明的范围，其中：

图1：本发明的节点截取方法流程图。

具体实施方式

为了使本发明的目的、技术方案、设计方法及优点更加清楚明了，以下结合附图通过具体实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅用于解释本发明，并不用于限定本发明。

如图1所示，本发明提供了一种基于富文本的节点截取方法，包括以下步骤：

(1)通过JavaScript获取原始富文本的DOM节点。

(2)通过序列化DOM节点，生成对象树。获取到DOM节点后，遍历查询子节点，如果子节点是文本节点，则删除特殊字符，比如： &quot；&gt；&lt； \r\n|\r|\n，如果子节点是普通节点，将节点属性遍历保存到对象属性上。如果子节点还有子节点，重复以上过程。直到没有子节点为止。

(3)通过递归节点对象树计算文本数量，遍历节点对象树数组，如果是普通节点，查看有没有子节点，如果有子节点，接着遍历子节点直到没有子节点为止。如果是文本节点，则根据文本长度进行计数。

(4)当计数满足预期的截取文本数量时，截取文本内容，跳出循环之后。截取剩下的DOM对象树。

(5)将DOM对象树反序列化成DOM节点，遍历DOM对象树，如果子节点是文本节点，则创建文本节点，如果子节点是普通节点，则创建普通节点。如果子节点还有子节点，重复以上过程。直到没有子节点为止。

(6)调用DOM节点的innerHTML方法生成一个保留样式的富文本。

(7)将保留样式后的富文本上传到服务器端。

(8)用户端获取富文本后直接设置DOM的innerHTML方法渲染即可。

本发明还提供了一种基于富文本的节点截取系统，包括：

节点获取模块，用于通过JavaScript获取原始富文本的DOM节点；

对象数生成模块，通过序列化DOM节点，生成对象树；

上传模块，用于将保留样式后的富文本上传到服务器端；

在本系统中，所述对象数生成模块，获取到DOM节点后，遍历查询子节点，如果子节点是文本节点，则删除特殊字符，如果子节点是普通节点，将节点属性遍历保存到对象属性上，如果子节点还有子节点，重复以上过程，直到没有子节点为止。

在本系统中，所述文本数量计算模块在计算节点对象树数量时，如果是普通节点，查看有没有子节点，如果有子节点，接着遍历子节点直到没有子节点为止，如果是文本节点，根据文本长度进行计数。

在本系统中，所述DOM节点生成模块在生成DOM节点时，如果子节点是文本节点，则创建文本节点，如果子节点是普通节点，则创建普通节点。

基于上述方法和系统，为了更好的理解本发明，通过以下示例进一步说明：

本示例中的原始文章为：

中国有色金属报社是由国资委举办，中国有色金属工业协会主管、主办的行业传媒机构，日前有一报——《中国有色金属报》，一网——中国有色网，三个微信公众号——中国有色金属报、钛微媒、铜微媒，具有报纸出版、网络出版、手机报出版、网络视频制作播放等专项许可资质。《中国有色金属报》面向国内外公开发行，是覆盖中国有色金属全行业、具权威性、报网一体的立体综合信息传媒。

为进一步加强中国有色金属报社新闻采编力量，建设具有行业影的力的一流媒体，现公开招聘新闻采编人员两名，实习记者三名，招聘要求:

1.具有正确的价值观。

2.大学本科以上学历，热爱新闻事业、文字功底扎实。

3.有良好的团队合作精神和沟通能力。

4.能熟练应用计算机办公软件。

5.身心健康。

原始富文本：

中国有色金属报社是由国资委举办，中国有色金属工业协会主管、主办的行业传媒机构，目前有一报&mdash；&mdash；《中国有色金属报》、一网&mdash；&mdash；中国有色网，三个微信公众号&mdash；&mdash；中国有色金属报、钛微媒、铜微媒，具有报纸出版、网络出版、手机报出版、网络视频制作播放等专项许可与资质。《中国有色金属报》面向国内外公开发行，是覆盖中国有色金属全行业、具权威性、报网一体的立体综合信息传媒。

为进一步加强中国有色金属报社新闻采编力量，建设具有行业影响力的一流媒体，现公开招聘新闻采编人员两名，实习记者三名。

招聘要求：

1.具有正确的价值观。

2.大学本科以上学历，热爱新闻事业，文字功底扎实。

3.有良好的团队合作精神和沟通能力。

4.能熟练应用计算机办公软件。

5.身心健康。

报社属事业单位，目前正处在转企阶段。待遇包括：工资、奖金、交通补贴、免费午餐，五险一金，带薪休假，健康体检等。

格式化为DOM对象

0:

attrs:[]

children:Array(3)

0:"中国有色金属报社是由国"

1:

>attrs:[{...}]

children:["资委举办"]

tag:"span"

>_proto_:Object

2:“，中国有色金属工业协会主"

length:3

_proto_:Array(0)

tag:"p"

_proto_:Object

1:" "

>2:{tag:"p"，attrs:Array(0)，children:Array(1)}

3:" "

>4:{tag:"p"，attrs:Array(0)，children:Array(1)}

5:" "

>6:{tag:"p"，attrs:Array(0)，children:Array(1)}

7:" "

>8:{tag:"p",attrs:Array(0)，children:Array(1))}

9:" "

>10:{tag:"p",attrs:Array(0)，children:Array(1)}

11:" "

>12:{tag:"p"，attrs:Array(0)，children:Array(1)}

13:"

>14:{tag:"p"，attrs:Array(0)，children:Array(1)}

15:" "

16:{tag:"p"，attrs:Array(0)，children:Array(1)}

[{"tag":"p","attrs":[],"children":

["中国有色金属报社是由国",

{"tag":"span","attrs":[{"name":"style","value":"color:#3498 db；"}],"children":["资委举办"]},"，中国有色金属工业协会主管、主办的行业传媒机构，目前有一报——《中国有色金属报》、一网——中国有色网，三个微信公众号——中国有色金属报、钛微媒、铜微媒，具有报纸出版、网络出版、手机报出版、网络视频制作播放等专项许可与资质。《中国有色金属报》面向国内外公开发行，是覆盖中国有色金属全行业、具权威性、报网一体的立体综合信息传媒。

"]}," ",{"tag":"p","attrs":[],"children":["为进一步加强中国有色金属报社新闻采编力量，建设具有行业影响力的一流媒体，现公开招聘新闻采编人员两名，实习记者三名。

"]}," ",{"tag":"p","attrs":[],"children":["招聘要求："]}," ",{"tag":"p","attrs":[],"children":["1.具有正确的价值观。"]}," ",{"tag":"p","attrs":[],"children":

["2.大学本科以上学历，热爱新闻事业，文字功底扎实。

"]}," ",{"tag":"p","attrs":[],"children":

["3.有良好的团队合作精神和沟通能力。

"]}," ",{"tag":"p","attrs":[],"children":

["4.能熟练应用计算机办公软件。

"]}," ",{"tag":"p","attrs":[],"children":["5.身心健康。"]}," ",{"tag":"p","attrs":[],"children":["报社属事业单位，目前正处在转企阶段。待遇包括：工资、奖金、交通补贴、免费午餐，五险一金，带薪休假，健康体检等。"]}]

截取后DOM对象

最后生成的富文本

中国有色金属报社是由国资委举办，中国有色金属工业协会主。

本发明还提供了一种设备，包括：至少一个处理器，以及与所述至少一个处理器通信连接的存储器，其中，所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器执行所述的方法。

具体地，上述存储器和处理器能够为通用的存储器和处理器，这里不做具体限定，当处理器运行存储器存储的计算机程序时，能够执行上述节点截取方法，从而能够实现在保留原有样式的情况下截取富文本的内容。

本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时，实现所述的方法。具体实现可参见方法实施例，在此不再赘述。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims

1.一种基于富文本的节点截取方法，其特征在于，包括以下步骤：

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

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

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

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

2.根据权利要求1所述的一种基于富文本的节点截取方法，其特征在于，所述步骤2中，获取到DOM节点后，遍历查询子节点，如果子节点是文本节点，则删除特殊字符，如果子节点是普通节点，将节点属性遍历保存到对象属性上，如果子节点还有子节点，重复以上过程，直到没有子节点为止。

3.根据权利要求2所述的一种基于富文本的节点截取方法，其特征在于，所述步骤3中，如果是普通节点，查看有没有子节点，如果有子节点，接着遍历子节点直到没有子节点为止，如果是文本节点，根据文本长度进行计数。

4.根据权利要求3所述的一种基于富文本的节点截取方法，其特征在于，所述步骤5中，如果子节点是文本节点，则创建文本节点，如果子节点是普通节点，则创建普通节点。

5.一种基于富文本的节点截取系统，其特征在于，包括：

节点获取模块，用于通过JavaScript获取原始富文本的DOM节点；

对象数生成模块，通过序列化DOM节点，生成对象树；

DOM节点生成模块，用于将DOM对象树反序列化成DOM节点，遍历DOM对象树；

上传模块，用于将保留样式后的富文本上传到服务器端；

6.根据权利要求5所述的一种基于富文本的节点截取系统，其特征在于，所述对象数生成模块，获取到DOM节点后，遍历查询子节点，如果子节点是文本节点，则删除特殊字符，如果子节点是普通节点，将节点属性遍历保存到对象属性上，如果子节点还有子节点，重复以上过程，直到没有子节点为止。

7.根据权利要求6所述的一种基于富文本的节点截取系统，其特征在于，所述文本数量计算模块在计算节点对象树数量时，如果是普通节点，查看有没有子节点，如果有子节点，接着遍历子节点直到没有子节点为止，如果是文本节点，根据文本长度进行计数。

8.根据权利要求7所述的一种基于富文本的节点截取系统，其特征在于，所述DOM节点生成模块在生成DOM节点时，如果子节点是文本节点，则创建文本节点，如果子节点是普通节点，则创建普通节点。

9.一种设备，其特征在于，包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行权利要求1～4中任一所述方法的步骤。

10.一种计算机可读存储介质，其特征在于，包括程序代码，当所述程序产品在电子设备上运行时，所述程序代码用于使所述电子设备执行权利要求1～4中任一所述方法的步骤。