CN115248881A - 网页输入信息的渲染方法、装置、电子设备及存储介质 - Google Patents

Abstract

本申请涉及数据处理技术领域，尤其涉及云技术领域，公开了一种网页输入信息的渲染方法、装置、电子设备及存储介质，该方法为：响应于输入对象在网页中目标区域内触发的输入操作，对所述待渲染的输入信息进行渲染处理，获得渲染后的输入信息；渲染处理至少包括：对待渲染的输入信息进行划分，获得多个字符段集合，每个字符段集合关联一个关键字符段组，并建立抽象结构树，以及基于所述抽象结构树，生成所述渲染后的输入信息。这样，实现了对网页中输入信息的渲染，且借助于抽象结构树的处理方式，简化了对于输入信息的渲染处理逻辑，无需占用过多的处理资源，提高了输入信息的渲染效率，且实现了对网页输入信息进行针对性处理。

Description

网页输入信息的渲染方法、装置、电子设备及存储介质

技术领域

本申请涉及数据处理技术领域，尤其涉及云技术领域，公开了一种网页输入信息的渲染方法、装置、电子设备及存储介质。

背景技术

为了对输入的信息内容进行有效区分，以实现将不同的输入信息进行差异化显示，通常情况下，可以借助于各类型的编辑器，对各个输入信息进行区分性渲染；如，可以采用基于内容可编辑属性(contenteditable)的实时编辑器、由脚本语言(JavaScript，JS)实现的编辑器，或者，类似编程工具(visual studio code)的代码编辑器，对接收的输入数据进行渲染处理。

然而，当需要渲染网页中的输入信息时，若借助于各类型的编辑器进行处理，则存在以下问题：其一、各类编辑器在对编辑区域内的输入信息进行渲染时，需要执行复杂的处理逻辑，导致占用极大的处理资源，使得网页应用无法对输入信息进行快速渲染；其二、各类编辑器中的编辑区域与网页中的输入区域分别对应不同的页面组件，无法直接将对应编辑区域中输入信息的处理方式，应用于对输入区域中输入信息的处理；其三、各类编辑器存在固定的编辑规则，无法调用各类编辑器实现对自定义内容的渲染，导致无法根据实际处理需要，实现对网页输入信息的自定义渲染。

发明内容

本申请实施例提供一种网页输入信息的渲染方法、装置、电子设备及存储介质，用以解决存在的输入信息渲染方式无法适用于对网页输入信息的渲染问题，提高输入信息的渲染效率，实现对输入信息进行自定义渲染。

本申请实施例提供了一种网页输入信息的渲染方法，所述方法包括：

响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息；

基于预定义的至少一个关键字符段组，对所述待渲染的输入信息进行渲染处理，获得渲染后的输入信息；其中，所述渲染处理包括：按照所述预定义的至少一个关键字符段组对所述待渲染的输入信息进行划分，获得多个字符段集合，并基于所述多个字符段集合建立包括关键节点的抽象结构树，以及遍历所述抽象结构树，基于所述关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成所述渲染后的输入信息，每个关键节点对应一个关键字符段组；

基于所述目标区域，呈现所述渲染后的输入信息。

可选的，所述待渲染的输入信息在所述目标区域中是隐藏的；

则基于所述目标区域，呈现所述渲染后的输入信息，包括：

基于所述目标区域生成渲染区域，所述渲染区域与所述目标区域完全重叠；

在所述渲染区域内，呈现所述渲染后的输入信息。

可选的，采用以下方式对所述待渲染的输入信息进行渲染处理：

将所述待渲染的输入信息包含的各个待处理字符，分别与所述预定义的至少一个关键字符段组进行匹配，其中，每匹配成功一次，基于匹配成功的至少一个待处理字符，对所述待渲染的输入信息进行划分；

获取基于划分所述待渲染的输入信息得到的各个字符段，基于所述各个字符段以及所述各个字符段的衔接顺序，生成抽象结构树，其中，所述抽象结构树中至少包括关键节点和预设的根节点，每个关键字符段组关联的字符段集合对应一个关键节点，每个关键字符段组中的首字符段和尾字符段，分别与关联的字符段集合中的起始字符段和结束字符段相匹配；

遍历所述抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息。

可选的，所述将所述待渲染的输入信息包含的各个待处理字符，分别与所述预定义的至少一个关键字符段组进行匹配，包括：

获取所述预定义的至少一个关键字符段组，并确定所述至少一个关键字符段组中的每个关键字符段组包含的首字符段和尾字符段；

将所述待渲染的输入信息中的各个待处理字符，分别与所述每个关键字符段组包含的首字符段和尾字符段进行匹配。

可选的，采用以下方式确定匹配成功一次：

若当前连续获得的至少一个待处理字符，与一个关键字符段组包含的首字符段或尾字符段匹配成功，则确定所述至少一个待处理字符匹配成功。

可选的，若所述至少一个待处理字符包括多个字符，则所述多个字符为连续字符；

则所述每匹配成功一次，基于匹配成功的至少一个待处理字符，对所述输入信息进行划分，包括：

每匹配成功一次，在所述待渲染的输入信息中，在所述至少一个待处理字符的前后，分别添加截断标记，并基于添加的所述截断标记对所述待渲染的输入信息进行字符段划分。

可选的，所述基于所述各个字符段以及所述各个字符段的衔接顺序，生成抽象结构树，包括：

按照所述各个字符段在所述待渲染的输入信息中的衔接顺序，依次获取所述各个字符段，每确定一个字符段与一个关键字符段组包括的首字符段匹配成功，执行以下操作：

生成以所述一个字符段为起始字符段的字符段集合，并将继续获取的字符段归属至所述字符段集合中，直至确定继续获取的字符段与所述一个关键字符段组包含的尾字符段匹配成功为止，并将最后获取的字符段作为结束字符段；

若所述字符段集合未被嵌套在其他字符段集合中，则针对所述字符段集合建立相应的一个关键节点；其中，所述一个关键节点是所述根节点的子节点；

若所述字符段集合被嵌套在其他字符段集合中，则针对所述字符段集合建立相应的一个关键子节点；所述字符段集合对应的关键子节点为：所述其他字符段集合对应的关键节点的子节点，或者，所述其他字符段集合对应的关键子节点的子节点；

若所述字符段集合中嵌套有其他字符段集合，则对应所述字符段集合中除所述其他字符段集合之外的各个字符段，建立相应的一个常规子节点，以及对应所述其他字符段集合，建立相应的关键子节点，每个常规子节点和每个关键子节点为：所述其他字符段集合对应的关键节点的子节点，或者，所述其他字符段集合对应的关键子节点的子节点。

可选的，还包括：

若确定获取的一个字符段与所述至少一个关键字符段组均匹配不成功，且所述一个字符段未被归入任何字符段集合，则针对所述一个字符段，建立相应的一个常规节点，所述常规节点是所述根节点的子节点。

可选的，所述遍历所述抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息，包括：

按照所述抽象结构树中的各个关键节点的生成顺序，依次获取所述各个关键节点；其中，每获取一个关键节点，执行以下操作：确定当前获取的一个关键节点对应的关键字符段组，获取所述关键字符段组关联的预渲染信息，并基于所述预渲染信息，对所述关键节点对应的字符段集合中包含的各个字符段进行渲染；

按照所述生成顺序，将所述各个关键节点对应的渲染后的各个字符段进行衔接，生成所述渲染后的输入信息。

可选的，还包括：

若确定存在至少一个关键子节点，则按照抽象结构树中各个关键节点和关键子节点的生成顺序，依次获取关键节点和关键子节点；其中，每获取一个关键子节点，执行以下操作：确定当前获取的一个关键子节点对应的关键字符段组，获取所述关联字符段组关联的预渲染信息，并基于所述预渲染信息，对所述关键子节点对应的字符段集合中包括的各个字符段进行重新渲染。

可选的，所述预渲染信息用于指示以下操作中的至少一种：

对字符段中各字符的颜色进行调整；

对字符段中各字符的字号进行调整；

对字符段中各字符的字体进行调整。

可选的，还包括：

将所述渲染区域的背景设置为透明；

在所述目标区域内，将光标设置为指定颜色。

本申请实施例提供一种网页输入信息的渲染装置，包括：

获取单元，响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息；

处理单元，基于预定义的至少一个关键字符段组，对所述待渲染的输入信息进行渲染处理，获得渲染后的输入信息；其中，所述渲染处理包括：按照所述预定义的至少一个关键字符段组对所述待渲染的输入信息进行划分，获得多个字符段集合，并基于所述多个字符段集合建立包括关键节点的抽象结构树，以及遍历所述抽象结构树，基于所述关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成所述渲染后的输入信息，每个关键节点对应一个关键字符段组；

呈现单元，基于所述目标区域，呈现所述渲染后的输入信息。

可选的，所述待渲染的输入信息在所述目标区域中是隐藏的；

则基于所述目标区域，呈现所述渲染后的输入信息时，所述呈现单元用于：

基于所述目标区域生成渲染区域，所述渲染区域与所述目标区域完全重叠；

在所述渲染区域内，呈现所述渲染后的输入信息。

可选的，所述处理单元采用以下方式对所述待渲染的输入信息进行渲染处理：

将所述待渲染的输入信息包含的各个待处理字符，分别与所述预定义的至少一个关键字符段组进行匹配，其中，每匹配成功一次，基于匹配成功的至少一个待处理字符，对所述待渲染的输入信息进行划分；

获取基于划分所述待渲染的输入信息得到的各个字符段，基于所述各个字符段以及所述各个字符段的衔接顺序，生成抽象结构树，其中，所述抽象结构树中至少包括关键节点和预设的根节点，每个关键字符段组关联的字符段集合对应一个关键节点，每个关键字符段组中的首字符段和尾字符段，分别与关联的字符段集合中的起始字符段和结束字符段相匹配；

遍历所述抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息。

可选的，所述将所述待渲染的输入信息包含的各个待处理字符，分别与所述预定义的至少一个关键字符段组进行匹配时，所述处理单元用于：

获取所述预定义的至少一个关键字符段组，并确定所述至少一个关键字符段组中的每个关键字符段组包含的首字符段和尾字符段；

将所述待渲染的输入信息中的各个待处理字符，分别与所述每个关键字符段组包含的首字符段和尾字符段进行匹配。

可选的，所述处理单元采用以下方式确定匹配成功一次：

若当前连续获得的至少一个待处理字符，与一个关键字符段组包含的首字符段或尾字符段匹配成功，则确定所述至少一个待处理字符匹配成功。

可选的，若所述至少一个待处理字符包括多个字符，则所述多个字符为连续字符；

则所述每匹配成功一次，基于匹配成功的至少一个待处理字符，对所述输入信息进行划分时，所述处理单元用于：

每匹配成功一次，在所述待渲染的输入信息中，在所述至少一个待处理字符的前后，分别添加截断标记，并基于添加的所述截断标记对所述待渲染的输入信息进行字符段划分。

可选的，所述基于所述各个字符段以及所述各个字符段的衔接顺序，生成抽象结构树时，所述处理单元用于：

按照所述各个字符段在所述待渲染的输入信息中的衔接顺序，依次获取所述各个字符段，每确定一个字符段与一个关键字符段组包括的首字符段匹配成功，执行以下操作：

生成以所述一个字符段为起始字符段的字符段集合，并将继续获取的字符段归属至所述字符段集合中，直至确定继续获取的字符段与所述一个关键字符段组包含的尾字符段匹配成功为止，并将最后获取的字符段作为结束字符段；

若所述字符段集合未被嵌套在其他字符段集合中，则针对所述字符段集合建立相应的一个关键节点；其中，所述一个关键节点是所述根节点的子节点；

若所述字符段集合被嵌套在其他字符段集合中，则针对所述字符段集合建立相应的一个关键子节点；所述字符段集合对应的关键子节点为：所述其他字符段集合对应的关键节点的子节点，或者，所述其他字符段集合对应的关键子节点的子节点；

若所述字符段集合中嵌套有其他字符段集合，则对应所述字符段集合中除所述其他字符段集合之外的各个字符段，建立相应的一个常规子节点，以及对应所述其他字符段集合，建立相应的关键子节点，每个常规子节点和每个关键子节点为：所述其他字符段集合对应的关键节点的子节点，或者，所述其他字符段集合对应的关键子节点的子节点。

可选的，所述处理单元还用于：

若确定获取的一个字符段与所述至少一个关键字符段组均匹配不成功，且所述一个字符段未被归入任何字符段集合，则针对所述一个字符段，建立相应的一个常规节点，所述常规节点是所述根节点的子节点。

可选的，所述遍历所述抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息时，所述处理单元用于：

按照所述抽象结构树中的各个关键节点的生成顺序，依次获取所述各个关键节点；其中，每获取一个关键节点，执行以下操作：确定当前获取的一个关键节点对应的关键字符段组，获取所述关键字符段组关联的预渲染信息，并基于所述预渲染信息，对所述关键节点对应的字符段集合中包含的各个字符段进行渲染；

按照所述生成顺序，将所述各个关键节点对应的渲染后的各个字符段进行衔接，生成所述渲染后的输入信息。

可选的，所述处理单元还用于：

若确定存在至少一个关键子节点，则按照抽象结构树中各个关键节点和关键子节点的生成顺序，依次获取关键节点和关键子节点；其中，每获取一个关键子节点，执行以下操作：确定当前获取的一个关键子节点对应的关键字符段组，获取所述关联字符段组关联的预渲染信息，并基于所述预渲染信息，对所述关键子节点对应的字符段集合中包括的各个字符段进行重新渲染。

可选的，所述预渲染信息用于指示以下操作中的至少一种：

对字符段中各字符的颜色进行调整；

对字符段中各字符的字号进行调整；

对字符段中各字符的字体进行调整。

可选的，所述呈现单元还用于：

将所述渲染区域的背景设置为透明；

在所述目标区域内，将光标设置为指定颜色。

本申请实施例提供一种电子设备，其包括处理器和存储器，其中，所述存储器存储有程序代码，当所述程序代码被所述处理器执行时，使得所述处理器执行上述任一方法的步骤。

本申请实施例提供一种计算机可读存储介质，其包括程序代码，当所述程序代码在电子设备上运行时，所述程序代码用于使所述电子设备执行上述任一所述方法的步骤。

本申请有益效果如下：

本申请实施例提供了一种网页输入信息的渲染方法、装置、电子设备及存储介质。在本申请实施例中，响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息，再基于预定义的至少一个关键字符段组，对所述待渲染的输入信息进行渲染处理，获得渲染后的输入信息；其中，所述渲染处理至少包括：按照所述预定义的至少一个关键字符段组对所述待渲染的输入信息进行划分，获得多个字符段集合，并基于所述多个字符段集合建立包括关键节点的抽象结构树，以及遍历所述抽象结构树，基于所述关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成所述渲染后的输入信息，每个关键节点对应一个关键字符段组，然后基于所述目标区域，呈现所述渲染后的输入信息。这样，借助于抽象结构树的处理方式，按照预定义的关键字符段组，对待渲染的输入信息进行划分，相当于能够自定义的确定待渲染的输入信息中需要渲染的各部分内容，进而生成待渲染的输入信息对应的抽象结构树，并通过遍历抽象结构树实现对输入信息的渲染，简化了对于输入信息的渲染处理逻辑，无需占用过多的处理资源，提高了输入信息的渲染效率，且实现了对网页输入信息进行针对性处理。

本申请的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本申请而了解。本申请的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1a为本申请实施例中应用场景示意图；

图1b为本申请实施例中网页页面示意图；

图2为本申请实施例中网页输入信息的渲染流程示意图；

图3为本申请实施例中目标区域与渲染区域的层叠示意图；

图4a为申请实施例中生成渲染后的输入信息的流程示意图；

图4b为本申请实施例中对待渲染的输入信息进行匹配拆分的流程示意图；

图5a为本申请实施例中划分后的待渲染的输入信息示意图；

图5b为本申请实施例中划分后的待渲染的输入信息示意图；

图6a为本申请实施例中抽象结构树的生成示意图；

图6b为本申请实施例中字符段按衔接顺序排列示意图；

图6c为本申请实施例中仅包含常规节点的抽象结构树示意图；

图6d为本申请实施例中包含关键节点的抽象结构树的生成过程示意图；

图6e为本申请实施例包含关键节点的抽象结构树示意图；

图6f为本申请实施例中包含关键子节点的抽象结构树示意图；

图6g为本申请实施例中包含常规子节点和关键子节点的抽象结构树示意图；

图6h为本申请实施例中抽象结构树中包括关键节点和常规节点的示意图；

图7为本申请实施例中生成渲染后的输入信息的流程示意图；

图8a为本申请实施例中针对输入对象在网页中触发的输入操作示意图；

图8b为本申请实施例中待渲染的输入信息的划分示意图；

图8c为本申请实施例中生成的抽象结构树示意图；

图8d为本申请实施例中针对输入对象呈现的渲染后的输入信息示意图；

图9为本申请实施例中的一种网页输入信息的渲染装置的结构示意图；

图10为应用本申请实施例的一种电子设备的一个硬件组成结构示意图；

图11为本申请实施例中的一个计算装置的结构示意图。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请技术方案的一部分实施例，而不是全部的实施例。基于本申请文件中记载的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请技术方案保护的范围。

本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够在除了这里图示或描述的那些以外的顺序实施。

以下对本申请实施例中的部分用语进行解释说明，以便于本领域技术人员理解。

抽象语法树(Abstract Syntax Tree，AST)：常用于代码语法结构的抽象表示，本申请实施例中，通过预定义的关键字符段组来限定的输入信息中的字符结构，进而基于抽象语法树，表示出输入信息中存在的字符结构。

语法：特定结构的撰写方式，通过关键字、顺序，以及位置，决定内容所代表的内在逻辑和关联性。

渲染：本申请实施例中，是指对输入信息中的字符内容进行差异化显示，渲染的显示方式包括但不限于着色、加粗，个性化显示字体等，进而对于输入信息中不同结构的内容进行不同渲染。本申请实施例中，通过预定义的关键字符段组，以关键字符段组包含的首字符段和尾字符段作为确定渲染范围的依据，相当于基于关键字符段组，将输入信息划分成进行差异化渲染的不同结构的内容。

关键字符段组：是根据实际处理需要自定义获得的，通常包含首字符段和尾字符段，用于确定输入信息中的对应一种渲染形式的待渲染内容。

字符段：由字符组合而成，一个字符段中包括至少一个字符，本申请实施例中，字符的类型包括但不限于：文字、字母、数字、运算符号、标点符号和其他符号，以及一些功能性符号。

渲染区域：本申请实施例中，指代重叠在网页中目标区域上的一个层级区域，渲染区域的形状对应网页中目标区域的形状设置，用于显示处理后的输入信息。

处理设备，是指安装有网页应用端的电子设备，该电子设备可以是个人计算机、手机、平板电脑、笔记本、电子书阅读器，可以是独立的物理服务器，也可以是提供云服务、云数据库、云计算、云存储、云函数、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)，以及大数据和人工智能平台等基础云计算服务的云端服务器。

本申请涉及云技术(Cloud technology)领域，其中，云技术是指在广域网或局域网内将硬件、软件、网络等系列资源统一起来，实现数据的计算、储存、处理和共享的一种托管技术。

云技术(Cloud technology)基于云计算商业模式应用的网络技术、信息技术、整合技术、管理平台技术、应用技术等的总称，可以组成资源池，按需所用，灵活便利。云计算技术将变成重要支撑。技术网络系统的后台服务需要大量的计算、存储资源，如视频网站、图片类网站和更多的门户网站。伴随着互联网行业的高度发展和应用，将来每个物品都有可能存在自己的识别标志，都需要传输到后台系统进行逻辑处理，不同程度级别的数据将会分开处理，各类行业数据皆需要强大的系统后盾支撑，只能通过云计算来实现。

其中，本申请可以具体应用于云处理过程中，响应于相关人员在网页中目标区域内触发的输入操作，获得待渲染的输入信息，并将处理后生成的渲染后的输入信息，显示给相关人员，使得相关人员能够看到差异化显示的输入信息，辅助相关人员基于输入信息进行进一步的处理操作。

下面对本申请实施例的设计思想进行简要介绍：

由于相关技术中，在实现信息的差异化显示时，通常使用各类型的编辑器，以实现对相应编辑区域内的输入信息进行渲染处理，使得能够借助于各类编辑器复杂的处理逻辑，在编辑区域内呈现渲染后的输入信息。这样，存在以下问题：其一、由于编辑器的处理逻辑复杂，需要占用极大的处理资源，故无法在网页应用中采用编辑器的处理逻辑对输入信息进行快速渲染；其二、网页中的输入区域与编辑器中的编辑区域分别对应的是不同的页面组件，对于编辑区域内输入信息的处理方式无法直接应用于网页中的输入区域；其三、各类编辑器存在固定的编辑规则，无法调用各类编辑器实现对自定义内容进行渲染。

有鉴于此，本申请提出一种网页输入信息的渲染方法、装置、电子设备及存储介质。借助于抽象结构树的处理方式，按照预定义的关键字符段组，对待渲染的输入信息进行划分，相当于能够自定义的确定待渲染的输入信息中需要渲染的各部分内容，进而生成待渲染的输入信息对应的抽象结构树，并通过遍历抽象结构树实现对输入信息的渲染，简化了对于输入信息的渲染处理逻辑，无需占用过多的处理资源，提高了输入信息的渲染效率，且实现了对网页输入信息进行针对性处理。

如图1a所示，其为本申请实施例中应用场景示意图。该应用场景示意图中包括两种类型的处理设备，分别是终端设备110和一个服务器130，可通过终端设备110打开网页页面120。终端设备110与服务器130之间可以通过通信网络进行通信。

在本申请实施例中，终端设备110为用户使用的电子设备，该电子设备可以是个人计算机、手机、平板电脑、笔记本、电子书阅读器等设备。各终端设备110可以通过通信网络与服务器130进行通信，在一种可选的实施方式中，通信网络可以是有线网络或无线网络，因此，终端设备110以及服务器130可通过有线或无线通信方式进行直接或间接地连接，本申请实施例在此不做具体限制。

网页页面120为网页应用中的一个页面，参阅图1b所示，其为本申请实施例中网页页面示意图，在该网页页面中，至少包括有能够进行信息输入的目标区域和能够切换页面的功能区域，其中，网页页面中能够进行信息输入的目标区域，通常是多行文本输入框textarea。

服务器130可以是独立的物理服务器130，也可以是云计算领域的边缘设备130，还可以是提供云服务、云数据库、云计算、云存储、云函数、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network，CDN)，以及大数据和人工智能平台等基础云计算服务的云端服务器130。

其中，本申请实施例中的对于网页输入信息的渲染，可以在终端设备110上进行，也可以在服务器130上进行。当由终端设备110进行网页输入信息的渲染时，终端设备110上安装有相应的网页应用，并显示网页页面120，进而响应于用户在网页页面120中目标区域的输入操作，获取目标区域内的输入信息，并对输入信息进行处理，最终生成渲染后的输入信息。当由服务器130进行网页输入信息的渲染时，服务器130可以在终端设备110获取输入信息后，接收终端设备110发送的输入信息，并针对输入信息进行处理后，将渲染后的输入信息反馈至终端设备110。

本申请实施例中，对于网页输入信息的渲染，可以应用于在网页上进行开发的场景中，相关人员可以在网页上的文本输入框中采用编程语言进行开发，进而响应于相关人员在网页中目标区域内触发的输入操作，获取输入代码，并根据已有的语法规则以及自定义的语法规则，预定义至少一个关键字符段组，并基于关键字符段组，确定输入代码中需要渲染的不同语法结构，最后将完成渲染后生成的输入代码，呈现给相关人员，以实现辅助开发，其中，由于本申请采用预定义的至少一个关键字符段组进行匹配，故不限制开发所使用的语言，其中，所使用的编程语言可以是目前已经成熟的诸如：超文本标记语言(HyperText Markup Language，HTML)、计算机编程语言python、Java、C语言、C++语言，也可以是自定义的语言，如，在进行表单或模板开发时，使用的自定义的语言。借助于本申请提出的输入信息的渲染方法，能够在不区别网页输入的内容的情况下，基于预定义的关键字符段组，实现对待渲染的输入信息的渲染，相当于基于同样的处理方式，能够在不同的开发场景中进行处理以实现渲染，辅助相关人员的开发操作，并节省纠错时间，大大提高开发效率，降低了开发成本和反复纠错讨论的沟通成本。

本申请一些可能的实施例中，对于网页输入信息的渲染，可以应用于在网页上的文本输入框中进行文本输入的场景中，如，当输入对象在网页上进行输入搜索时，处理设备获取输入对象输入的输入信息后，按照预定义的至少一个关键字符段组，确定输入信息中需要渲染的各部分内容，进而对各部分内容实现差异性的渲染，以突出输入对象希望查找的重点。

下面结合附图，对本申请实施例中对网页输入信息进行渲染的流程进行说明，本申请实施例中的网页输入信息的渲染流程可应用于图1a所示的终端设备110或者服务器130，下面将以处理设备直接对网页中待渲染的输入信息进行渲染处理为例，对网页中待渲染的输入信息的渲染流程进行详细说明：

本申请实施例中，处理设备可以实时响应于输入对象在网页中目标区域内的输入操作，执行针对待渲染的输入信息的渲染处理，以下的说明中将仅以在一次响应并处理的过程中，对获得的输入信息进行渲染为例，对输入信息的处理过程进行示意性说明。

参阅图2所示，其为本申请实施例中网页输入信息的渲染流程示意图，下面结合附图2，进行详细说明：

步骤201：处理设备响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息。

处理设备响应于输入对象在网页中目标区域内触发的输入操作，获取目标区域内待渲染的输入信息。

其中，待渲染的输入信息中包括输入的各个待处理字符，其中，待处理字符的类型不固定，可以是文字、字母、数字、运算符号、标点符号、其他符号，以及一些功能性符号中的至少一种或组合。

例如，处理设备可能获取如下引号内的输入信息：“分拆：${公司简称}<input>分拆为#[${公司A}<input>],#[${公司A}作价${}<input:currency>,]。”。

步骤202：处理设备基于预定义的至少一个关键字符段组，对待渲染的输入信息进行渲染处理，获得渲染后的输入信息。

其中，渲染处理至少包括：按照预定义的至少一个关键字符段组对待渲染的输入信息进行划分，获得多个字符段集合，并基于多个字符段集合建立包括关键节点的抽象结构树，以及遍历抽象结构树，基于关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成渲染后的输入信息，每个关键节点对应一个关键字符段组。

具体的，处理设备获取待渲染的输入信息后，依次比对待渲染的输入信息中，各个待处理字符与预定义的至少一个关键字符段组的匹配情况，当确定连续获取的至少一个待处理字符，与一个关键字符段组中的首字符段或尾字符段匹配成功时，基于匹配成功的至少一个待处理字符，对输入信息进行划分，直至输入信息中的全部待处理字符比对完成，处理设备对应划分后的输入信息得到各个字符段。

进而，处理设备基于得到的各个字符段，建立对应的抽象结构树，其中，抽象结构树中包括关键节点，每个关键节点对应一个字符段集合，一个字符段集合在拆分后的输入信息中，表征从与关键字符段组的首字符段匹配的字符段开始，到与该关键字符段组的尾字符段匹配的字符段为止的各个字符段，抽象结构树的处理逻辑简单，生成渲染后的输入信息的处理速度快，能够实现对待渲染的输入信息的快速处理。

处理设备获得抽象结构树后，通过遍历抽象结构树，建立抽象结构书中关键节点关联的字符段集合，与对应的预渲染信息之间的联系，实现基于预渲染信息对字符段集合中的各个字符段的渲染，进而将先后得到的渲染后的各个字符段进行衔接，得到渲染后的输入信息。

本申请一些可能的实施例中，由于当划分后的输入信息中，包括与一个关键字符段组包括的首字符段和尾字符段先后匹配成功的两个字符段时，才对应匹配成功的两个字符段以及两个字符段之间的字符段，建立一个关键节点或关键子节点，故在获得的待渲染的输入信息，与预定义的至少一个关键字符段组的匹配存在多种可能的情况下，建立的抽象结构树，包括但不限于以下几种结构。

1、抽象结构树中仅包括关键节点。

这种情况下，处理设备获得的待渲染的输入信息中，能够被划分为顺序连接的各个字符段集合。

2、抽象结构树中包括关键节点和关键子节点。

这种情况下，处理设备获得的待渲染的输入信息中，获得的一个字符段集合中，只嵌套有至少一个字符段集合。

3、抽象结构树中包括关键节点、关键子节点、常规子节点。

这种情况下，处理设备获得的待渲染的输入信息中，获得的一个字符段集合中，嵌套有至少一个字符段集合，以及嵌套有至少一个无法与预定义的关键字符段组匹配的字符段。

4、抽象结构树中仅包括常规节点。

这种情况下，处理设备获取的待渲染的输入信息中，可能不存在能够与预定义的至少一个关键字符段组匹配的字符；或者，可能是输入信息中连续获取的至少一个字符，仅能够与一个关键字符段包含的首字符段匹配成功，但不存在与该关键字符段的尾字符段匹配成功的字符。

需要说明的是，对于输入信息中连续获取的至少一个字符与一个关键字符段包含的首字符段匹配成功，但不存在与该关键字符段的尾字符段匹配成功的字符的情况，虽然待渲染的输入信息中存在与关键字符段组匹配成功的字符，处理设备能够对待渲染的输入信息进行划分，但是处理设备无法对应建立字符段集合，只能对应待渲染的输入信息的整体，设置一个常规节点。

由于本申请实施例中，目的在于对输入信息进行渲染，故对于可能存在的无法渲染的情况，本申请将不再详细说明。

具体的，处理设备对待渲染的输入信息进行处理，得到渲染后的输入信息的过程，将在后续的流程中进行详细说明。

步骤203：处理设备基于目标区域，呈现渲染后的输入信息。

具体实施中，处理设备对从目标区域内获取的待渲染的输入信息进行渲染处理，得到渲染后的处理信息后，再基于目标区域，呈现渲染后的输入信息；其中，呈现渲染后的输入信息的区域，与获取待渲染的输入信息的区域不同。

本申请实施例中，可选的，待渲染的输入信息在目标区域中是隐藏的，即处理设备在基于输入对象呈现的网页中，在目标区域内获得待渲染的输入信息时，并不显示待渲染的输入信息，而是在后台获取待渲染的输入信息并进行渲染处理，以及将输出的渲染后的输入信息，呈现在与目标区域完全重叠的渲染区域内，这样，在视觉上，用户看到的是在渲染区域实时呈现的渲染后的输入信息。

需要说明的是，本申请实施例中，基于目标区域生成渲染区域，渲染区域与目标区域完全重叠，并在渲染区域内，呈现渲染后的输入信息。在目标区域上叠加渲染区域时，需要将渲染区域对应目标区域配置，其中，渲染区域可以理解为叠加在目标区域上方的层级区域。

具体的，以目标区域为文本输入框为例，为了实现渲染区域与目标区域的完全重叠和一致性显示，需要对应渲染区域和目标区域进行如下的配置：将渲染区域大小、长宽、位置配置为和目标区域保持完全一致；将目标区域中输入信息的颜色设置为与目标区域的背景颜色相同；将渲染区域的事件穿透属性(point-event)设置为none，使得在目标区域与渲染区域重叠的情况下，渲染区域无法响应输入对象的操作；借助于相应的脚本(JavaScript，JS)，将渲染区域滚动条的位置与目标区域保持完全一致；借助于相应的JS脚本，当目标区域的长度和宽度发生变化时，将渲染区域的长度和宽度进行对应的调整；借助于相应的JS脚本实现将渲染区域的内容与目标区域的内容保持一致显示；确定目标区域和渲染区域中对于相同内容存在不同的表示形式时，则在目标区域内获取的待渲染的输入信息后，在将渲染后的输入信息显示在渲染区域之前，需要按照渲染区域中内容的形式，进行相应的调整，如，假设目标区域内对于换行操作表示为\n，则对应的需要将换行替换为在渲染区域中的表示形式，<br>，再如，目标区域中的空格\S，需要替换为渲染区域中对应的&nbsp。

需要说明的是，当预渲染信息用于指示对字符段中各字符的颜色进行调整时，可以设置渲染区域内文字的大小、字体、粗细、行高等字体相关属性和目标区域保持完全一致。

可选的，为了在渲染区域内更加真实的显示渲染后的输入信息，使得在向输入对象呈现渲染后的输入信息时，渲染区域与目标区域的层叠关系不会被察觉，处理设备可以将渲染区域的背景设置为透明，在目标区域内，将光标设置为指定颜色。

例如，可以将目标区域的光标进行特殊样式设置：caret-color:#000，即设置光标颜色为黑色。

参阅图3，其为本申请实施例中目标区域与渲染区域的层叠示意图，下面结合附图3，对本申请实施例中，输入对象在网页中的操作过程进行说明。处理设备基于输入对象呈现网页页面，但由于网页页面中的配置原因，输入对象在目标区域内输入的内容不会显示在目标区域内，处理设备实时响应于输入对象在网页中目标区域内的输入操作，获得待渲染的输入信息，进而基于预定义的至少一个关键字符段组，实现对待渲染的输入信息的渲染处理，获得渲染后的输入信息，再将渲染后的输入信息显示在渲染区域内，使得输入对象看到的是渲染区域的内容，也就是渲染后的输入信息。

这样，区别于现有的网页中的输入信息只能呈现一种颜色的问题，本申请借助于目标区域和渲染区域的重叠配置，能够对网页中的输入信息进行渲染处理后，并在渲染区域内完成显示，且不会对输入对象的正常输入造成干扰，无需输入对象进行额外的操作，只需按照常规的输入方式，在目标区域内进行输入，即可看到对输入信息进行渲染后的结果，极大的满足了输入对象在网页中的使用体验，为输入对象的操作和开发提供了辅助的作用。

参阅附图4a，其为申请实施例中生成渲染后的输入信息的流程示意图，下面参阅附图4a，对上述步骤202中涉及到的，基于预定义的至少一个关键字符段组，对待渲染的输入信息进行渲染处理，获得渲染后的输入信息的过程进行说明。

步骤401：处理设备将待渲染的输入信息包含的各个待处理字符，分别与预定义的至少一个关键字符段组进行匹配，其中，每匹配成功一次，基于匹配成功的至少一个待处理字符，对待渲染的输入信息进行划分。

处理设备在获得网页中目标区域内待渲染的输入信息后，将待渲染的输入信息中包括的各个待处理字符，分别与预定义的至少一个关键字符段组进行匹配拆分。

参阅图4b所示，其为本申请实施例中对待渲染的输入信息进行匹配拆分的流程示意图，下面结合附图4b，对待渲染的输入信息的匹配和拆分过程进行说明：

步骤4011：处理设备获取预定义的至少一个关键字符段组，并确定至少一个关键字符段组中的每个关键字符段组包含的首字符段和尾字符段。

处理设备获取预定义的至少一个关键字符段组，其中，关键字符段组是确定输入信息中被渲染字符的依据，且每个关键字符段组对应关联有预渲染信息，处理设备按照关键字符段组关联的预渲染信息，确定待渲染的输入信息中对应确定的字符段集合所对应的渲染方式。针对每一个关键字符段组来说，关键字符段组中包含的首字符段和尾字符段，能够限定输入信息中与该关键字符段组对应的被渲染内容的起始位置和终止位置。

例如，对于一个关键字符段组“《》”，对应的首字符段为“《”，尾字符段为“》”。

又例如：对于一个关键字符段组“*/”，对应的首字符段为“*”，尾字符段为“/”。

又例如：对于一个关键字符段组“${}”，对应的首字符段为“${”，尾字符段为“}”。

又例如，对于一个关键字符段“#[]”，对应的首字符段为“#[”，尾字符段为“]”。

又例如，对于一个关键字符段“？[]”，对应的首字符段为“？[”，尾字符段为“]”。

需要说明的是，本申请实施例中，在基于预定义的至少一个关键字符段组，执行当前一次对待渲染的输入信息的匹配拆分之前，可以响应于开发人员或输入对象对于关键字符段组的修改请求，自定义的新增、删减，或修改关键字符组。

步骤4012：处理设备将待渲染的输入信息中的各个待处理字符，分别与每个关键字符段组包含的首字符段和尾字符段进行匹配。

处理设备获取网页中待渲染的输入信息和预定义的至少一个关键字符段组后，将待渲染的输入信息中的各个待处理字符，分别与每个关键字符段组包括的首字符段和尾字符段进行匹配。

需要说明的是，处理设备将待渲染的输入信息中的各个待处理字符，与每个关键字符段组进行匹配时，可以按照获得待渲染的输入信息中各个待处理字符的先后顺序，进行待处理字符与关键字符段组的匹配。

例如，假设输入对象在网页中目标区域内输入的信息为：“分拆：${公司简称}<input>”，则在实际处理时，也会按照各个字符被输入的先后顺序进行处理。

本申请实施例中，若处理设备当前连续获得的至少一个待处理字符，与一个关键字符段组包含的首字符段或尾字符段匹配成功，则确定至少一个待处理字符匹配成功。

例如，假设预定义的一个关键字符段组为“《》”、“<>”，以及“*/”，获取的待渲染的输入信息为“宋词《雨霖铃》的作者是哪里人”，则可确定待处理字符“《”与关键字符组“《》”中的首字符组“《”完成匹配。

又例如，假设目前预定义的关键字符组为“《》”、以及“*/”、“${}<input>”、“#[]”和“？[]”，获取的为“分拆：${公司简称}<input>分拆为#[${公司A}<input>作价]，”。假设按照待渲染的输入信息中各个待处理字符的顺序进行匹配，则首先获取的是待渲染的输入信息中的首个字符“分”，分别将“分”与每个关键字符组中的首字符段和尾字符段进行匹配，发现均未匹配成功；

进而依次获取输入信息中的待处理字符“析”、“为”、“：”，重复上述匹配动作，发现同样未匹配成功，再继续获取待处理字符“$”，发现待处理字符“$”与关键字符组“${}<input>”中，首字符段的部分内容匹配成功，其中，关键字符组“${}<input>”中的首字符段为“${”；

则进一步获取待处理字符“{”，发现连续获得的“${”，与关键字符组“${}<input>”中，首字符段的剩余内容匹配成功，此时，可以确定连续获取的待处理字符“$”和“{”，与关键字符组匹配成功，即，可判定连续获取的待处理字符“$”和“{”，与关键字符组“${}<input>”首字符段匹配成功。

步骤4013：处理设备每确定连续获取的至少一个待处理字符匹配成功时，基于至少一个待处理字符，对待渲染的输入信息执行一次划分操作。

具体的，在执行步骤4013时，可以包含但不限于以下两种情况：

情况1：若匹配成功的至少一个待处理字符仅包含一个字符，则基于匹配成功的一个待处理字符，对待渲染的输入信息执行一次划分操作。

例如：假设待渲染的输入信息为“宋词《雨霖铃》的作者是哪里人”，预定义的至少一个关键字符段组中包括“《》”，则可知待渲染的输入信息中的第三个待处理字符“《”匹配成功，则在“《”的前后添加截断标记，完成对待渲染的输入信息的一次划分操作。

进而完成针对待渲染的输入信息的划分操作后，获得与待渲染的输入信息对应的各个字符段，字符段可以记为token。

例如，参阅图5a所示，其为本申请实施例中划分后的待渲染的输入信息示意图。对于输入信息“宋词《雨霖铃》的作者是哪里人”，在对各个待处理字符匹配和拆分的过程中，被拆分为如图5a所示意的内容，得到对应的5个字符段。

情况2：若匹配成功的至少一个待处理字符包括多个字符，该多个字符为连续字符，则根据获得的至少一个待处理字符，对待渲染的输入信息执行一次划分操作。

具体的，每匹配成功一次，在待渲染的输入信息中，在至少一个待处理字符的前后，分别添加截断标记，并基于添加的截断标记对待渲染的输入信息进行字符段划分。

例如：假设处理设备获得的待渲染的输入信息为：“分拆：${公司简称}<input>分拆为#[${公司A}<input>作价]。”，预定义的至少一个关键字符段组为：“${}<input>”、“#[]”和“？[]”，对于第4-5个字符“$”和“{”，能够匹配成功，进而分别在“${”的前后添加截断标记，并基于添加的截断标记对待渲染的输入信息进行字符段划分。

进而完成针对待渲染的输入信息的划分操作后，获得与待渲染的输入信息对应的各个字符段，字符段可以记为token。

又例如，参阅图5b所示，其为本申请实施例中划分后的待渲染的输入信息示意图，对于输入信息“分拆：${公司简称}<input>分拆为#[${公司A}<input>作价]。”，按照预定义的至少一个关键字符段组，对应划分为图5b所示意的内容，得到对应的12个字符段。

本申请实施例中，对于步骤4012和步骤4013的执行，不具有绝对的先后顺序，在具体实施时，可以先执行步骤4012所限定的操作，并在确定匹配成功后，立即执行步骤4013所限定的操作。

需要说明的是，本申请一些可能的实施例中，假设设置的关键字符段组较为复杂，一个关键字符段组中的首字符段或尾字符段，可能与其他关键字符段组的中的首字符段或尾字符段存在相同的内容，例如，同时存在关键字符段组“${}”和关键字符段组“${}<input>”，则关键字符段组的尾字符段“}”和包含在尾字符段“}<input>”中，故在匹配时在确定待处理字符“}”匹配成功时，可以再继续获取一个待处理字符，以协助判定匹配成功的尾字符段是否为“}”。

这样，通过匹配待渲染的输入信息中的字符，与预定义的至少一个关键字符段组的匹配情况，能够实现按照自定义的规则对输入信息进行拆分，并能够根据实际的处理需要对输入信息进行处理，保证后续渲染过程的有效进行。

步骤402：处理设备获取基于划分待渲染的输入信息得到的各个字符段，基于各个字符段以及各个字符段的衔接顺序，生成抽象结构树，其中，抽象结构树中至少包括关键节点和预设的根节点，每个关键字符段组关联的字符段集合对应一个关键节点，每个关键字符段组中的首字符段和尾字符段，分别与关联的字符段集合中的起始字符段和结束字符段相匹配。

具体实施中，处理设备获取基于划分待渲染的输入信息得到的各个字符段后，基于各个字符段以及各个字符段的衔接顺序，生成抽象结构树，其中，各个字符段的衔接顺序是指各个字符段在待渲染的输入信息中的排列顺序。

需要说明的是，本申请实施例中，在基于各个字符段以及各个字符段的衔接顺序，处理设备依次获取各个字符段，生成抽象结构树时，根据获取的各个字符段与预定义的至少一个关键字符段组的匹配情况，可以生成不同层级结构的抽象结构树。其中，生成的抽象结构树可能由关键节点组成，或者，由关键节点和嵌套的子节点组成。

参阅附图6a，其为本申请实施例中抽象结构树的生成示意图，下面结合附图6a，对执行步骤402时执行的操作进行说明。

步骤601：按照各个字符段在待渲染的输入信息中的衔接顺序，依次获取各个字符段。

具体实施时，处理设备按照各个字符段的衔接顺序，依次获取各个字符段。

例如，参阅图6b所示，其为本申请实施例中字符段按衔接顺序排列示意图，假设预定义的至少一个关键字符段组包括“${}<input>”和“#[]”。图6a所示意的内容是将待渲染的输入信息：“分拆为：${公司简称}<input>#[公司A]”，拆分为7个对应的字符段后的字符段排列示意图，包括的各个字符段分别是：字符段1“分析：”、字符段2“${”、字符段3“公司简称”、字符段4“}<input>”、字符段5“#[”、字符段6“公司A”、字符段7“]”，则获取字符段时按照字符段1-7的顺序，依次获取。

步骤602：判断获取的一个字符段与一个关键字符段组包括的首字符段是否匹配成功，若是，执行步骤603所限定的操作，否则，执行步骤604所限定的操作。

具体实施中，处理设备每获取一个字段，判断获取的一个字符段与一个关键字符段组包括的首字符段是否匹配成功，若匹配成功，则执行步骤603所限定的操作，否则，执行步骤604所限定的操作。

例如，继续参阅图6b所示，处理设备按照字符段1-7的顺序，依次获取字符段，并将字符段与预定义的至少一个关键字符段组中首字符段和尾字符段进行匹配。对于依次获取字符段1-7以进行匹配的过程来说，当获取字符段2时，可确定字符段2与关键字符段组“${}<input>”包含的首字符段“${”匹配成功。

步骤603：判断继续获取的字符段中是否包括与首字符段匹配成功的关键字符段组的尾字符段，匹配成功的字符段，若不包括，执行步骤604，否则，执行步骤605。

处理设备确定继续获取的字符段中，存在与先前首字符段匹配成功的关键字符段组中的尾字符段，匹配成功的字符段时，则确定存在可建立字符段集合的各个字符段，并执行步骤604所限定的操作，否则，执行步骤605所限定的操作。

步骤604：对应未归属至完整的字符段集合中的字符段，建立一个抽象结构树中的一个常规节点。

具体的，处理设备若确定获取的一个字符段与至少一个关键字符段组均匹配不成功，且一个字符段未被归入任何字符段集合，则针对一个字符段，建立相应的一个常规节点，该常规节点是预设的根节点的子节点。

或者，处理设备若确定获取的一个字符段与一个关键字符段组的首字符段匹配成功，但直至获取到最后一个字符段，也没能与该关键字符段组的尾字符段匹配成功，此时，处理设备将未包含在完整字符段集合中的字符段与常规节点相关联，对应未包含在完整字符段中的各个字符段，建立抽象结构树中的一个常规节点，该常规节点是抽象结构树中预设的根节点的子节点。

例如，参阅图6c所示，其为本申请实施例中仅包含常规节点的抽象结构树示意图。假设预定义的至少一个关键字符段组包括“${}<input>”和“#[]”，字符段1与至少一个关键字符段组均匹配不成功，且字符段1未被归入任何字符段集合，字符段2与关键字符段组“#[]”中的首字符段“#[”匹配成功，字符段3是当前获取的最后一个字符段，且字符段3未能与关键字符段“#[]”中的尾字符段“]”匹配成功，则对应字符段1-3建立抽象如图6c所示意的抽象结构树。

步骤605：生成以匹配成功的一个字符段为起始字符段的字符段集合，并将继续获取的字符段归属至字符段集合中，直至确定继续获取的字符段与一个关键字符段组包含的尾字符段匹配成功为止，并将最后获取的字符段作为结束字符段。

处理设备确定获取的一个字符段与一个关键字符段组包括的首字符段匹配成功时，且后续存在与该关键字符段组中的尾字符段匹配成功的其他字符段时，生成以该匹配成功的字符段为起始字符段的字符段集合，并继续按照各个字符段的排列顺序获取字符段，直至获取到与该关键字符段组中的尾字符段匹配成功的字符段，将与该尾字符段匹配成功的字符段作为结束字符段，并将起始字符段、结束字符段，以及起始字符段与结束字符段之间的各个字符段，归属为一个字符段集合。

例如，继续参阅图6b所示，确定获取的字符段2与关键字符段组“${}<input>”包含的首字符段“${”匹配成功后，生成以字符段2为起始字符段的字符段集合I，并将继续获取的字符段3归属至字符段集合I中，以及在获取到字符段4时，确定字符段4与关键字符段组“${}<input>”包含的尾字符段“}<input>”匹配成功，则将字符段4作为结束字符段，使得生成的字符段集合I中，包括字符段2-4。同理，基于字符段5-7生成另一个字符段集合。

步骤606：针对字符段集合的嵌套情况，建立包含关键节点的抽象结构树。

处理设备基于建立的字符段集合，生成抽象结构树时，由于不同字符段集合之间可能存在不同的嵌套关系，因此，生成的抽象节点树的形式也就各不相同，下面将结合附图6d，对生成包含字符段集合对应的关键节点的抽象结构树的过程进行说明。

为方便描述，下面的说明中，假设经过上述字符段集合生成操作，生成的任意一个字符段集合为：字符段集合Z，并以生成字符段集合Z对应的抽象结构树节点的过程进行说明：

在执行步骤606时，具体可通过执行图6d所示意的操作来实现操作，图6d为本申请实施例中包含关键节点的抽象结构树的生成过程示意图。

步骤6061：判断建立的字符段集合是否未被嵌套在其他字符段集合中，若是，执行步骤6062的操作，否则，执行步骤6063的操作。

具体实施时，处理设备基于建立的字符段集合Z，确定字符段集合Z是否未被包含在其他字符段集合中，若是，则说明字符段集合Z未被嵌套在其他字符段集合中，进而后续执行步骤6062所限定的操作，否则，说明字符段集合Z被嵌套在其他字符段集合中，进而后续执行步骤6063所限定的操作。

步骤6062：针对字符段集合建立相应的一个关键节点。

处理设备若确定字符段集合Z未被嵌套在其他字符段集合中，则针对字符段集合Z建立相应的一个关键节点；其中，建立的一个关键节点是根节点的子节点。

具体的，处理设备在生成抽象结构树时，在依次获取各个字符段之前，首先建立一个不关联有具体内容的根节点，进而根据依次获取的各个字符段，建立一个字符段集合Z，且确定建立的字符段集合Z未被嵌套在其他字符段集合中时，则针对字符段集合Z建立相应的一个关键节点Z，关键节点Z处对应一个字符段集合，且关联有一个关键字符段组。

例如，参阅图6e所示，其为本申请实施例包含关键节点的抽象结构树示意图。将字符段1-6，与预定义的关键字符对组“${}<input>”和“#[]”进行匹配后，可以建立字符段1-3对应的一个字符段集合Z，以及建立字符段4-6对应的一个字符段集合N，进而基于字符段集合Z建立对应的关键节点1，以及基于字符段集合N建立对应的关键节点2，其中，关键节点1与关键节点2是预设的根节点的子节点。

步骤6063：针对字符段集合建立相应的一个关键子节点。

处理设备若确定字符段集合Z被嵌套在其他字符段集合中，则针对字符段集合Z建立相应的一个关键子节点；字符段集合Z对应的关键子节点为：其他字符段集合对应的关键节点的子节点，或者，其他字符段集合对应的关键子节点的子节点。

具体的，处理设备通过将依次获取的各个字符段，与预定义关键字符段的首字符段和尾字符段进行匹配，建立字符段集合Z后，若确定建立的字符段集合Z被嵌套在其他字符段集合Y中，则针对字符段集合Z建立一个关键子节点z，其中，在字符段集合Y可能对应一个关键节点或对应一个关键子节点的情况下，关键子节点z可能是一个关键节点的子节点，或者，也可能是一个关键子节点的子节点。

需要说明的是，确定字符段集合Z被嵌套在其他字符段集合Y中的依据是，确定在获取到字符段节点Z中初始字符段之前，获取到与一个关键字符段组X包含的首字符段匹配的一个字符段，且在字符段集合Z之后获取与关键字符段组X包含的尾字符段匹配的一个字符段，关键字符段组X是预定义的至少一个关键字符段组中的任意一个。

例如，参阅图6f所示，其为本申请实施例中包含关键子节点的抽象结构树示意图。将字符段1-5，与预定义的关键字符对组“${}<input>”和“#[]”进行匹配后，在以字符段1作为起始字符段，以字符段5为结束字符段的字符段集合Y中，包含有以字符段2为起始字符段，以字符段4为结束字符段的字符段集合Z，故，字符段集合Z嵌套在字符段集合Y中，对应字符段集合Y生成一个关键节点，以及对应字符段集合Z生成一个关键子节点。

需要说明的是，在步骤6063的场景下，可能存在有多层嵌套的情况，如，字符段集合Z嵌套在字符段集合Y中，字符段集合Y嵌套在字符段集合X中…。对于多层嵌套来说，生成节点和子节点的逻辑与上述相同，在此将不再展开说明。

本申请实施例中，可以根据实际的处理需要，设置字符段集合与抽象结构树的生成顺序，如，在一些可能的实施例中，可以先基于被划分为各个字符段的待渲染的输入信息，生成对应的各个字符段集合，再字符段排列的先后顺序，依次基于字符段对应的字符段集合，建立抽象结构树，又如，在另一些可能的实施例中，可以随着对于字符段的获取操作，同步生成字符段集合，并同步建立抽象结构树中对应的节点。

步骤6064：判断建立的字符段集合中是否嵌套有其他字符段集合，若是，执行步骤6065，否则，执行步骤6066。

具体实施时，处理设备基于建立的字符段集合Z，确定字符段集合Z中是否嵌套有其他字符段集合，若是，则执行步骤6065的操作，否则，执行步骤6066的操作。

步骤6065：对应字符段集合中除其他字符段集合之外的各个字符段，建立相应的一个常规子节点，以及对应其他字符段集合，建立相应的关键子节点。

处理设备若确定字符段集合Z中嵌套有其他字符段集合，则对应字符段集合Z中除其他字符段集合之外的各个字符段，建立相应的一个常规子节点，以及对应其他字符段集合，建立相应的关键子节点，每个常规子节点和每个关键子节点为：其他字符段集合对应的关键节点的子节点，或者，其他字符段集合对应的关键子节点的子节点。

具体的，处理设备通过将依次获取的各个字符段，与预定义关键字符段的首字符段和尾字符段进行匹配，建立字符段集合Z后，若确定建立的字符段集合Z中嵌套有其他字符段集合，且字符段集合中包括除其他字符段集合外的各个字符段，则对应各个字符段建立相应的一个常规子节点，并对应每个其他字符段集合建立相应的关键子节点，其中，在字符段集合Z对应的节点可能是关键节点或关键子节点的情况下，常规子节点和关键子节点可能是关键节点的子节点，或者，常规子节点和关键子节点可能是关键子节点的子节点。

例如，参阅图6g所示，其为本申请实施例中包含常规子节点和关键子节点的抽象结构树示意图。将字符段1-7，与预定义的关键字符对组“${}<input>”和“#[]”进行匹配后，在以字符段1为起始字符段，以字符段7为结束字符段的字符段集合Z中，嵌套有以字符段3为起始字符段，以字符段5为结束字符段的字符段集合S，且字符段集合Z中，除了字符段集合S，还包括有字符段2和字符段6，则对应字符段集合Z生成一个关键节点1后，针对字符段集合S生成该关键节点1的关键子节点1，以及针对字符段2和字符段6，生成该关键节点1的常规子节点1。

又例如，参阅图6h所示，其为本申请实施例中抽象结构树中包括关键节点和常规节点的示意图。假设预定义的至少一个关键字符段组包括“${}<input>”和“#[]”，字符段1与至少一个关键字符段组均匹配不成功，且字符段1未被归入任何字符段集合，字符段2-7对应一个字符段集合Z，字符段3-5对应一个嵌套的字符段集合H，字符段6为一个嵌套的字符段，因此，能够建立图6h中所示意的抽象结构树。

需要说明的是，对于步骤6065的执行时，可能还存在有建立的字符段集合Z中仅包括其他关键字符段集合的情况，此时则仅存在字符段集合Z的关键子节点，而不存在常规子节点，相关的节点生成逻辑与上述相同。

步骤6066：继续按照字符段的排列顺序，获取其他字符段。

处理设备在确定建立的字符段集合Z中未嵌套有其他字符段集合时，则说明无需针对字符段集合Z进行子节点的生成操作，进而可以直接确定当前获取的字符段集合处理完成，可以继续按照字符段的排列顺序，获取其他字符段，并继续进行抽象结构树的生成操作。

需要说明的是，本申请实施例中，不具体限定步骤6061-6063，以及步骤6064-6066的操作执行的先后顺序，一些可能的实施例中，还可以先执行步骤6064-6066，再执行步骤6061-6063。

这样，考虑到生成抽象结构树时可能存在的不同嵌套情况，能够针对性的建立对应的节点和子节点，使得能够以抽象结构树中节点的形式，表征待渲染的输入信息，为后续的渲染操作提供依据。

步骤403：处理设备遍历抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息。

执行步骤403时，处理设备可以通过执行以下操作，获得渲染后的输入信息。参阅图7所示，其为本申请实施例中生成渲染后的输入信息的流程示意图。下面结合附图7，对遍历抽象结构树，生成渲染后的输入信息的过程进行说明：

步骤701：处理设备按照抽象结构树中的各个关键节点的生成顺序，依次获取各个关键节点；其中，每获取一个关键节点，执行以下操作：确定当前获取的一个关键节点对应的关键字符段组，获取关键字符段组关联的预渲染信息，并基于预渲染信息，对关键节点对应的字符段集合中包含的各个字符段进行渲染。

处理设备按照抽象结构树中的各个关键节点的生成顺序，依次获取各个关键节点，并根据抽象结构树中的节点结构，以及关键节点关联的预渲染信息，实现对相应的字符段集合的渲染，其中，预渲染信息用于指示以下操作中的至少一种：对字符段中各字符的颜色进行调整；对字符段中各字符的字号进行调整；对字符段中各字符的字体进行调整。

具体的，当抽象结构树中仅包括关键节点时，处理设备每获取一个关键节点，执行以下操作：确定当前获取的一个关键节点对应的关键字符段组，获取关键字符段组关联的预渲染信息，并基于预渲染信息，对关键节点对应的字符段集合中包含的各个字符段进行渲染。

例如，结合图6e所示意的抽象结构树进行说明，对于图6e所示意的抽象结构树，生成关键节点的顺序分别为：关键节点1-关键节点2，则处理设备同理在获取关键节点1时，获取关键节点1对应的关键字符段组“${}<input>”，并获取关键字符段组“${}<input>”关联的预渲染信息，假设“${}<input>”关联的预渲染信息为：渲染为红色，并基于预渲染信息对关键节点1对应的字符段集合进行渲染，即，字符段1-3在显示时呈现为红色。

特殊的，处理设备若确定存在至少一个关键子节点，则按照抽象结构树中各个关键节点和关键子节点的生成顺序，依次获取关键节点和关键子节点；其中，每获取一个关键子节点，执行以下操作：确定当前获取的一个关键子节点对应的关键字符段组，获取关联字符段组关联的预渲染信息，并基于预渲染信息，对关键子节点对应的字符段集合中包括的各个字符段进行重新渲染处理。

例如，参阅图6f所示，处理设备获取关键节点1后，获取关键子节点1，也就是说，在获取关键子节点之前，处理设备已经基于关键节点1关联的预渲染信息1，实现关键节点1对应的字符段1-5的渲染，故在获取关键子节点1时，处理设备获取关键子节点1关联的预渲染信息，也就是关键字符段组“${}<input>”关联的预渲染信息2，并基于预渲染信息2对采用预渲染信息1进行渲染的字符段2-4进行重新渲染。

步骤702：处理设备按照抽象结构树中各个关键节点的生成顺序，将各个关键节点对应的渲染后的各个字符段进行衔接，生成渲染后的输入信息。

处理设备按照各个关键节点的生成顺序，将各个关键节点对应的渲染后的各个字符段进行衔接，生成渲染后的输入信息。

具体实施时，处理设备可以先创建一个用于保存HTML字符串的临时变量，按照抽象结构树中关键节点的生成顺序访问关键节点，每访问到一个关键节点，确定该关键节点对应的字符段集合，创建带有预渲染信息和字符段集合的HTML字符串，该预渲染信息会让该段HTML字符串在渲染区域显示为按照预渲染信息渲染后的输入信息，最终将各个关键节点对应的HTML字符串进行衔接，生成完整的HTML字符串，即是渲染后的输入信息，渲染后的输入信息能够在渲染区域完成渲染，从而能够动态实时的显示对输入信息进行渲染后的渲染效果。

特殊的，当抽象结构树中包括至少一个关键子节点时，处理设备采用上述生成HTML字符串的方式，当确定获取到关键子节点时，确定关键子节点对应的字符段集合1，以及基于关键子节点关联的预标注信息1，重新创建带有预标注信息1和字符段集合1的HTML字符串。

进而，处理设备可以按照相关技术下，遍历抽象结构树生成代码的逻辑，生成对输入信息进行渲染后的HTML字符串。

一些可能的实施例中，处理设备可以将重新创建的字符串，替换针对关键节点生成的HTML字符串中对字符段集合1进行标注的HTML字符串，使得带有预渲染信息的html字符串的内部还有带有其他预渲染信息的HTML字符串；另一些可能的实施例中，处理设备可以将重新创建的用于重新标注字符段集合1的HTML字符串直接添加至临时变量的末尾。在对应抽象结构树完成代码生成后，得到标注后的输入信息，其中，标注后的输入信息是HTML字符串的形式。

进一步的，处理设备基于对抽象结构树的遍历，生成渲染后的输入信息：HTML字符串后，可以将HTML字符串替换渲染区域内的对应显示内容的字符串，使得在完整加载后，在渲染区域能够呈现渲染后的输入信息，相当于在渲染区域显示了带有不同颜色的输入信息的副本。

这样，借助于抽象结构树，能够对抽象结构树中各个节点对应的字符段集合进行针对性渲染，相当于基于预定义的关键字符段组，将输入信息拆分为各个关键节点对应的字符段集合后，能够基于关键字符段组对应的预渲染信息，对不同字符段集合进行差异化渲染，进而实现了差异化呈现。

基于同一发明构思，下面结合附图8a-图8d，对本申请实施例中针对输入对象呈现网页，以及响应于输入对象触发的输入操作，针对输入对象呈现渲染后的输入信息的过程进行说明。

参阅图8a所示，其为本申请实施例中针对输入对象在网页中触发的输入操作示意图。基于输入对象呈现的网页中，可操作的目标区域的上方重叠放置有渲染区域，且目标区域内待渲染的输入信息被设置为隐藏显示，即，呈现给输入对象的网页中，无法看到在目标区域内的输入信息。

如图8a所示意的，处理设备响应于输入对象在目标区域中的输入操作，获取在目标区域内输入的信息“拆分为：？[公司名称*公司名称${公司A}<input>123/456]”。

参阅图8b所示，其为本申请实施例中待渲染的输入信息的划分示意图，假设预定义的关键字符段组分别为“？[]”、“*/”、“${}input”，且对应“？[]”设置的预渲染信息为：标红；对应“*/”设置的预渲染信息为：标黄、对应“${}input”设置的预渲染信息为：标蓝。则处理设备对于在图8a中获得的待渲染的输入信息，可划分为图8b所示意的内容。

参阅图8c所示，其为本申请实施例中生成的抽象结构树示意图，处理设备将待渲染的输入信息进行切分后，按照图6a和图6d的流程中所示意的处理方式，对应待渲染的输入信息生成抽象结构树。

图8c中，处理设备按照各个字符段在输入信息的排列顺序，遍历各个字符段，并在遍历的过程中，当确定获取的字符段与各个关键字符段组均匹配不成功时，建立一个常规节点，作为根节点的子节点，对于常规节点，对应字符段包括：“分拆为：”；进而继续获取字符段，确定连续获取的字符段能够与关键字符段中的首字符段和尾字符段匹配成功时，创建一个关键节点，作为根节点的子节点，对于关键节点1，关联的字符段集合中包括：“？[”、“公司名称”、“*”、“公司名称”、“${”“公司A”、“}<input>”、“123”、“/”、“]”；同理在继续获取字符段时，并基于字符段所在的字符段集合的嵌套情况，建立常规子节点和关键子节点，对于常规子节点1.1，对应字符段包括：“公司名称”和“456”；对于关键子节点1.1，对应的字符段集合中包括：“*”、“公司名称”、“${”“公司A”、“}<input>”、“123”、“/”；对于常规子节点1.1.1，对应的字符段包括：“公司名称”和“123”；对于关键子节点1.1.1，对应的字符段包括“${”“公司A”、“}<input>”。

参阅图8d所示，其为本申请实施例中针对输入对象呈现的渲染后的输入信息示意图。图8d为了表示出呈现的效果，以文字标注的形式象征性地示意了渲染后的输入信息的呈现效果。

基于相同的发明构思，本申请实施例还提供一种网页输入信息的渲染装置。参阅图9所示，其为本申请实施例中所列举的一种网页输入信息的渲染装置900的结构示意图，可以包括：

获取单元901，响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息；

处理单元902，基于预定义的至少一个关键字符段组，对待渲染的输入信息进行渲染处理，获得渲染后的输入信息；其中，渲染处理包括：按照预定义的至少一个关键字符段组对待渲染的输入信息进行划分，获得多个字符段集合，并基于多个字符段集合建立包括关键节点的抽象结构树，以及遍历抽象结构树，基于关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成渲染后的输入信息，每个关键节点对应一个关键字符段组；

呈现单元903，基于目标区域，呈现渲染后的输入信息。

可选的，待渲染的输入信息在目标区域中是隐藏的；

则基于目标区域，呈现渲染后的输入信息时，呈现单元903用于：

基于目标区域生成渲染区域，渲染区域与目标区域完全重叠；

在渲染区域内，呈现渲染后的输入信息。

可选的，处理单元902采用以下方式对待渲染的输入信息进行渲染处理：

将待渲染的输入信息包含的各个待处理字符，分别与预定义的至少一个关键字符段组进行匹配，其中，每匹配成功一次，基于匹配成功的至少一个待处理字符，对待渲染的输入信息进行划分；

获取基于划分待渲染的输入信息得到的各个字符段，基于各个字符段以及各个字符段的衔接顺序，生成抽象结构树，其中，抽象结构树中至少包括关键节点和预设的根节点，每个关键字符段组关联的字符段集合对应一个关键节点，每个关键字符段组中的首字符段和尾字符段，分别与关联的字符段集合中的起始字符段和结束字符段相匹配；

遍历抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息。

可选的，将待渲染的输入信息包含的各个待处理字符，分别与预定义的至少一个关键字符段组进行匹配时，处理单元902用于：

获取预定义的至少一个关键字符段组，并确定至少一个关键字符段组中的每个关键字符段组包含的首字符段和尾字符段；

将待渲染的输入信息中的各个待处理字符，分别与每个关键字符段组包含的首字符段和尾字符段进行匹配。

可选的，处理单元902采用以下方式确定匹配成功一次：

若当前连续获得的至少一个待处理字符，与一个关键字符段组包含的首字符段或尾字符段匹配成功，则确定至少一个待处理字符匹配成功。

可选的，若至少一个待处理字符包括多个字符，则多个字符为连续字符；

则每匹配成功一次，基于匹配成功的至少一个待处理字符，对输入信息进行划分时，处理单元902用于：

每匹配成功一次，在待渲染的输入信息中，在至少一个待处理字符的前后，分别添加截断标记，并基于添加的截断标记对待渲染的输入信息进行字符段划分。

可选的，基于各个字符段以及各个字符段的衔接顺序，生成抽象结构树时，处理单元902用于：

按照各个字符段在待渲染的输入信息中的衔接顺序，依次获取各个字符段，每确定一个字符段与一个关键字符段组包括的首字符段匹配成功，执行以下操作：

生成以一个字符段为起始字符段的字符段集合，并将继续获取的字符段归属至字符段集合中，直至确定继续获取的字符段与一个关键字符段组包含的尾字符段匹配成功为止，并将最后获取的字符段作为结束字符段；

若字符段集合未被嵌套在其他字符段集合中，则针对字符段集合建立相应的一个关键节点；其中，一个关键节点是根节点的子节点；

若字符段集合被嵌套在其他字符段集合中，则针对字符段集合建立相应的一个关键子节点；字符段集合对应的关键子节点为：其他字符段集合对应的关键节点的子节点，或者，其他字符段集合对应的关键子节点的子节点；

若字符段集合中嵌套有其他字符段集合，则对应字符段集合中除其他字符段集合之外的各个字符段，建立相应的一个常规子节点，以及对应其他字符段集合，建立相应的关键子节点，每个常规子节点和每个关键子节点为：其他字符段集合对应的关键节点的子节点，或者，其他字符段集合对应的关键子节点的子节点。

可选的，处理单元902还用于：

若确定获取的一个字符段与至少一个关键字符段组均匹配不成功，且一个字符段未被归入任何字符段集合，则针对一个字符段，建立相应的一个常规节点，常规节点是根节点的子节点。

可选的，遍历抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息时，处理单元902用于：

按照抽象结构树中的各个关键节点的生成顺序，依次获取各个关键节点；其中，每获取一个关键节点，执行以下操作：确定当前获取的一个关键节点对应的关键字符段组，获取关键字符段组关联的预渲染信息，并基于预渲染信息，对关键节点对应的字符段集合中包含的各个字符段进行渲染；

按照生成顺序，将各个关键节点对应的渲染后的各个字符段进行衔接，生成渲染后的输入信息。

可选的，处理单元902还用于：

若确定存在至少一个关键子节点，则按照抽象结构树中各个关键节点和关键子节点的生成顺序，依次获取关键节点和关键子节点；其中，每获取一个关键子节点，执行以下操作：确定当前获取的一个关键子节点对应的关键字符段组，获取关联字符段组关联的预渲染信息，并基于预渲染信息，对关键子节点对应的字符段集合中包括的各个字符段进行重新渲染。

可选的，预渲染信息用于指示以下操作中的至少一种：

对字符段中各字符的颜色进行调整；

对字符段中各字符的字号进行调整；

对字符段中各字符的字体进行调整。

可选的，呈现单元903还用于：

将渲染区域的背景设置为透明；

在目标区域内，将光标设置为指定颜色。

在介绍了本申请示例性实施方式的网页输入信息的渲染方法和装置之后，接下来，介绍根据本申请的另一示例性实施方式的电子设备。

所属技术领域的技术人员能够理解，本申请的各个方面可以实现为系统、方法或程序产品。因此，本申请的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“系统”。

与上述方法实施例基于同一发明构思，本申请实施例中还提供了一种电子设备，参阅图10所示，其为应用本申请实施例的一种电子设备的一个硬件组成结构示意图，电子设备1000可以至少包括处理器1001、以及存储器1002。其中，存储器1002存储有程序代码，当程序代码被处理器1001执行时，使得处理器1001执行上述任意一种网页输入信息的渲染方法的步骤。

在一些可能的实施方式中，根据本申请的计算装置可以至少包括至少一个处理器、以及至少一个存储器。其中，存储器存储有程序代码，当程序代码被处理器执行时，使得处理器执行本说明书上述描述的根据本申请各种示例性实施方式的关键点检测的步骤。例如，处理器可以执行如图2中所示的步骤。

下面参照图11来描述根据本申请的这种实施方式的计算装置1100。如图11所示，计算装置1100以通用计算装置的形式表现。计算装置1100的组件可以包括但不限于：上述至少一个处理单元1101、上述至少一个存储单元1102、连接不同系统组件(包括存储单元1102和处理单元1101)的总线1103。

总线1103表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器、外围总线、处理器或者使用多种总线结构中的任意总线结构的局域总线。

存储单元1102可以包括易失性存储器形式的可读介质，例如随机存取存储器(RAM)11021和/或高速缓存存储单元11022，还可以进一步包括只读存储器(ROM)11023。

存储单元1102还可以包括具有一组(至少一个)程序模块11024的程序/实用工具11025，这样的程序模块11024包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

计算装置1100也可以与一个或多个外部设备1104(例如键盘、指向设备等)通信，还可与一个或者多个使得用户能与计算装置1100交互的设备通信，和/或与使得该计算装置1100能与一个或多个其它计算装置进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口1105进行。并且，计算装置1100还可以通过网络适配器1106与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1106通过总线1103与用于计算装置1100的其它模块通信。应当理解，尽管图中未示出，可以结合计算装置1100使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理器、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

与上述方法实施例基于同一发明构思，本申请提供的网页输入信息的渲染方法的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当程序产品在电子设备上运行时，程序代码用于使电子设备执行本说明书上述描述的根据本申请各种示例性实施方式的网页输入信息的渲染方法中的步骤，例如，电子设备可以执行如图2中所示的步骤。

程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以是但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (13)

1.一种网页输入信息的渲染方法，其特征在于，包括：

响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息；

基于预定义的至少一个关键字符段组，对所述待渲染的输入信息进行渲染处理，获得渲染后的输入信息；其中，所述渲染处理包括：按照所述预定义的至少一个关键字符段组对所述待渲染的输入信息进行划分，获得多个字符段集合，并基于所述多个字符段集合建立包括关键节点的抽象结构树，以及遍历所述抽象结构树，基于所述关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成所述渲染后的输入信息，每个关键节点对应一个关键字符段组；

基于所述目标区域，呈现所述渲染后的输入信息。

2.如权利要求1所述的方法，其特征在于，所述待渲染的输入信息在所述目标区域中是隐藏的；

则基于所述目标区域，呈现所述渲染后的输入信息，包括：

基于所述目标区域生成渲染区域，所述渲染区域与所述目标区域完全重叠；

在所述渲染区域内，呈现所述渲染后的输入信息。

3.如权利要求1所述的方法，其特征在于，采用以下方式对所述待渲染的输入信息进行渲染处理：

将所述待渲染的输入信息包含的各个待处理字符，分别与所述预定义的至少一个关键字符段组进行匹配，其中，每匹配成功一次，基于匹配成功的至少一个待处理字符，对所述待渲染的输入信息进行划分；

获取基于划分所述待渲染的输入信息得到的各个字符段，基于所述各个字符段以及所述各个字符段的衔接顺序，生成抽象结构树，其中，所述抽象结构树中至少包括关键节点和预设的根节点，每个关键字符段组关联的字符段集合对应一个关键节点，每个关键字符段组中的首字符段和尾字符段，分别与关联的字符段集合中的起始字符段和结束字符段相匹配；

遍历所述抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息。

4.如权利要求3所述的方法，其特征在于，所述将所述待渲染的输入信息包含的各个待处理字符，分别与所述预定义的至少一个关键字符段组进行匹配，包括：

获取所述预定义的至少一个关键字符段组，并确定所述至少一个关键字符段组中的每个关键字符段组包含的首字符段和尾字符段；

将所述待渲染的输入信息中的各个待处理字符，分别与所述每个关键字符段组包含的首字符段和尾字符段进行匹配。

5.如权利要求4所述的方法，其特征在于，采用以下方式确定匹配成功一次：

若当前连续获得的至少一个待处理字符，与一个关键字符段组包含的首字符段或尾字符段匹配成功，则确定所述至少一个待处理字符匹配成功。

6.如权利要求3-5任一项所述的方法，其特征在于，若所述至少一个待处理字符包括多个字符，则所述多个字符为连续字符；

则所述每匹配成功一次，基于匹配成功的至少一个待处理字符，对所述输入信息进行划分，包括：

每匹配成功一次，在所述待渲染的输入信息中，在所述至少一个待处理字符的前后，分别添加截断标记，并基于添加的所述截断标记对所述待渲染的输入信息进行字符段划分。

7.如权利要求3-5任一项所述的方法，其特征在于，所述基于所述各个字符段以及所述各个字符段的衔接顺序，生成抽象结构树，包括：

按照所述各个字符段在所述待渲染的输入信息中的衔接顺序，依次获取所述各个字符段，每确定一个字符段与一个关键字符段组包括的首字符段匹配成功，执行以下操作：

生成以所述一个字符段为起始字符段的字符段集合，并将继续获取的字符段归属至所述字符段集合中，直至确定继续获取的字符段与所述一个关键字符段组包含的尾字符段匹配成功为止，并将最后获取的字符段作为结束字符段；

若所述字符段集合未被嵌套在其他字符段集合中，则针对所述字符段集合建立相应的一个关键节点；其中，所述一个关键节点是所述根节点的子节点；

若所述字符段集合被嵌套在其他字符段集合中，则针对所述字符段集合建立相应的一个关键子节点；所述字符段集合对应的关键子节点为：所述其他字符段集合对应的关键节点的子节点，或者，所述其他字符段集合对应的关键子节点的子节点；

若所述字符段集合中嵌套有其他字符段集合，则对应所述字符段集合中除所述其他字符段集合之外的各个字符段，建立相应的一个常规子节点，以及对应所述其他字符段集合，建立相应的关键子节点，每个常规子节点和每个关键子节点为：所述其他字符段集合对应的关键节点的子节点，或者，所述其他字符段集合对应的关键子节点的子节点。

8.如权利要求7所述的方法，其特征在于，还包括：

若确定获取的一个字符段与所述至少一个关键字符段组均匹配不成功，且所述一个字符段未被归入任何字符段集合，则针对所述一个字符段，建立相应的一个常规节点，所述常规节点是所述根节点的子节点。

9.如权利要求7所述的方法，其特征在于，所述遍历所述抽象结构树，分别根据每个关键节点对应的关键字符段组关联的预渲染信息，对相应的字符段集合进行渲染，生成渲染后的输入信息，包括：

按照所述抽象结构树中的各个关键节点的生成顺序，依次获取所述各个关键节点；其中，每获取一个关键节点，执行以下操作：确定当前获取的一个关键节点对应的关键字符段组，获取所述关键字符段组关联的预渲染信息，并基于所述预渲染信息，对所述关键节点对应的字符段集合中包含的各个字符段进行渲染；

按照所述生成顺序，将所述各个关键节点对应的渲染后的各个字符段进行衔接，生成所述渲染后的输入信息。

10.如权利要求9所述的方法，其特征在于，还包括：

若确定存在至少一个关键子节点，则按照抽象结构树中各个关键节点和关键子节点的生成顺序，依次获取关键节点和关键子节点；其中，每获取一个关键子节点，执行以下操作：确定当前获取的一个关键子节点对应的关键字符段组，获取所述关联字符段组关联的预渲染信息，并基于所述预渲染信息，对所述关键子节点对应的字符段集合中包括的各个字符段进行重新渲染。

11.一种网页输入信息的渲染装置，其特征在于，包括：

获取单元，响应于输入对象在网页中目标区域内触发的输入操作，获得待渲染的输入信息；

处理单元，基于预定义的至少一个关键字符段组，对所述待渲染的输入信息进行渲染处理，获得渲染后的输入信息；其中，所述渲染处理包括：按照所述预定义的至少一个关键字符段组对所述待渲染的输入信息进行划分，获得多个字符段集合，并基于所述多个字符段集合建立包括关键节点的抽象结构树，以及遍历所述抽象结构树，基于所述关键节点关联的预渲染信息，分别对相应的字符段集合进行渲染，生成所述渲染后的输入信息，每个关键节点对应一个关键字符段组；

呈现单元，基于所述目标区域，呈现所述渲染后的输入信息。

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

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

Images