一种基于WEB文档标记技术的研究的制作方法

一种基于web文档标记技术的研究
技术领域
1.本发明涉及文档标记技术领域，具体为一种基于web文档标记技术的研究。


背景技术：

2.知识图谱平台包含了信息抽取、知识提取、知识储存和管理等功能，平台会自动对文档识别并标注好一些关键字，然后在页面上显示；在此基础上用户还可以在页面上标注新的关键字和删除重复或不必要的关键字。这就涉及到如何在页面中提取和标记关键字，如何把标记数据和文本数据进行分别存储和结合渲染，研发文档标记方法就很有必要。在所有需要在页面上进行标注、回显的业务上都可以用此技术，如文献、新闻、文档的批注和信息提取等。
3.现有技术一般包括如下：
4.方案一javascript自带的window.getselection方法；可以获取页面上的用户所选中的文本、改区域起始和结束的dom节点、起始和结束的dom节点中的偏移量、起始和结束是否为同一dom节点等参数。
5.方案二基于web页面在线文档编辑、富文本编辑控件，他们在window.getselection的基础上做了二次封装，获取用户选中的文本只是其控件的最基础的功能，在此功能上可以实现文本字体大小，加粗，颜色等样式的改变。
6.但方案一的缺点就是当选中的文本只存在一个dom节点的时候可以精准的获取到在dom中的下标，但是选中的文本中存在多个dom节点就无法获取真实的下标。在一片文档中，存在非常多的文本标记，只用此方法无法达到预期效果。
7.方案二的获取选中文本只是基础功能，和控件耦合度强；官方提供的api没有提及此功能；想做二次开发只能阅读源码，由于控件复杂，改造成本很高，及时剥离出来也仅仅实现了获取文本的功能。
8.基于此，本发明设计了一种基于web文档标记技术的研究，以解决上述问题。


技术实现要素：

9.本发明的目的在于提供一种基于web文档标记技术的研究，以解决上述背景技术中提出的选中的文本中存在多个dom节点就无法获取真实的下标；控件复杂，改造成本很高，及时剥离出来也仅仅实现了获取文本的功能的问题。
10.为实现上述目的，本发明提供如下技术方案：一种基于web文档标记技术的研究，包括以下步骤：
11.s1：配置初始化文本；
12.s2：把初始化文本拆分成单个字符，创建dom；
13.s3：根据是否只读，选择添加文本标记事件或继续判断是否有标记数据；
14.s4：判断是否有标记数据，有则把标记数据分别用span标签包裹，添加颜色和名称，插入到文本dom当中，反之则结束步骤；
15.s5：根据只读看是否添加删除标记事件；触发删除事件，先删除当前的标记数据，然后执行s2。
16.优选的，s1中，所述配置初始化文本具体为根据参数初始化数据配置文本、标记类型和颜色、控制最大文本选词的长度、是否只读。
17.优选的，s2中，所述创建dom具体为把初始化文本拆分成单个字符，分别用i标签包裹，并给i标签添加下标。
18.优选的，s3中，所述添加文本标记事件触发后具体步骤为：
19.s31：除之前选中的文本但未进行标记的文本；
20.s32：判断是否有选择内容，没有则返回；
21.s33：根据鼠标抬起的位置计算出标记类型选择框的位置，并显示；
22.s34：判断选中的文本是否已经有标注内容，如果有则提示“选中文本已有标记内容，无法标记”；
23.s35：计算选中的文本的长度是否在配置参数最大文本选词的长度范围内，如果不是，则提示“超出字数显示，无法标记”，处理正拖和反拖数据，保证小的下标在前面；
24.s36：把选中的文本用span标签包裹渲染出来，并添加isnew属性用于标识选中还未添加标记数据；
25.s37：如果选择标记类型，则把数据插入标记数据执行步骤二，否则视用户操作执行s31。
26.与现有技术相比，本发明的有益效果是：
27.本发明基于原生js，不依赖任何js框架，可随意在各个web前端系统框架中使用；通过此方法可以轻松的获取文本的真实下标；采用的是标记数据和真实文本分开存储，结合渲染的思路，极大地降低了数据间的耦合度，增强了可读性、可维护性和易扩展性。
附图说明
28.为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
29.图1为本发明拆分文本为单个节点示意图；
30.图2为本发明选择文本标记类型示意图；
31.图3为本发明标记文本示意图。
具体实施方式
32.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。
33.请参阅图1-3，本发明提供一种技术方案：一种基于web文档标记技术的研究，包括以下步骤：
34.s1：配置初始化文本；
35.s2：把初始化文本拆分成单个字符，创建dom；
36.s3：根据是否只读，选择添加文本标记事件或继续判断是否有标记数据；
37.s4：判断是否有标记数据，有则把标记数据分别用span标签包裹，添加颜色和名称，插入到文本dom当中，反之则结束步骤；
38.s5：根据只读看是否添加删除标记事件；触发删除事件，先删除当前的标记数据，然后执行s2。
39.本发明提供了一个在浏览器页面中标记出选中文本的方法，弥补javascript提供的window.getselection功能的不足，它只能实现单个且无嵌套dom节点取出被选中文本的在整个文本中的位置。因为需要在文本中插入各种标记类型的文本、图标、样式、处理事件，文本dom节点有了多层嵌套和其他的dom节点，无法通过window.getselection获取标记文本的真实位置。所以本方法通过拆分文本数据形成单个dom渲染的方式，就可以保证不管在文本嵌套层次和包含的内容有多复杂，都可以精准的找到其真实的位置，从而不会导致文本渲染错乱。
40.实现了标记文本功能，采用的是文本数据和标记数据分开存储，结合渲染的思路。
41.此方法基于原生js封装的，可以随意在各个web前端系统框架中使用，不依赖于任何组件库，使用方便。
42.对外提供初始化文本的内容、标记类型和颜色、控制最大文本选词的长度、是否只读传参配置。
43.其中，s1中，所述配置初始化文本具体为根据参数初始化数据配置文本、标记类型和颜色、控制最大文本选词的长度、是否只读。
44.其中，s2中，所述创建dom具体为把初始化文本拆分成单个字符，分别用i标签包裹，并给i标签添加下标。
45.其中，s3中，所述添加文本标记事件触发后具体步骤为：
46.s31：除之前选中的文本但未进行标记的文本；
47.s32：判断是否有选择内容，没有则返回；
48.s33：根据鼠标抬起的位置计算出标记类型选择框的位置，并显示；
49.s34：判断选中的文本是否已经有标注内容，如果有则提示“选中文本已有标记内容，无法标记”；
50.s35：计算选中的文本的长度是否在配置参数最大文本选词的长度范围内，如果不是，则提示“超出字数显示，无法标记”，处理正拖和反拖数据，保证小的下标在前面；
51.s36：把选中的文本用span标签包裹渲染出来，并添加isnew属性用于标识选中还未添加标记数据；
52.s37：如果选择标记类型，则把数据插入标记数据执行步骤二，否则视用户操作执行s31。
53.本发明拆分文本为单个节点，通过获取初始节点和结束节点的属性值来来定位真实的文本区间下标。采用的是标记数据和真实文本分开存储，结合渲染的思路。可以配置标记文本的类型和颜色。
54.本发明基于原生js，不依赖任何js框架，可随意在各个web前端系统框架中使用；
通过此方法可以轻松的获取文本的真实下标；采用的是标记数据和真实文本分开存储，结合渲染的思路，极大地降低了数据间的耦合度，增强了可读性、可维护性和易扩展性。
55.在本说明书的描述中，参考术语“一个实施例”、“示例”、“具体示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
56.以上公开的本发明优选实施例只是用于帮助阐述本发明。优选实施例并没有详尽叙述所有的细节，也不限制该发明仅为所述的具体实施方式。显然，根据本说明书的内容，可作很多的修改和变化。本说明书选取并具体描述这些实施例，是为了更好地解释本发明的原理和实际应用，从而使所属技术领域技术人员能很好地理解和利用本发明。本发明仅受权利要求书及其全部范围和等效物的限制。