CN113297827B - 一种呈现内容信息的方法与设备 - Google Patents

Abstract

本申请的目的是提供一种呈现内容信息的方法，该方法包括：响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。本申请能够使得目标内容信息的呈现样式区别于该文本输入框中用户所输入的输入文本内容的呈现样式，用来快速向用户提示目标内容信息，在视觉上传达一种突出强调的效果。

Description

一种呈现内容信息的方法与设备

技术领域

本申请涉及通信领域，尤其涉及一种用于呈现内容信息的技术。

背景技术

在现有技术中，文本输入框可分为纯文本输入框和富文本输入框，纯文本输入框中只能输入文字，而富文本输入框则可提供编辑功能，可输入文字和图片等。在Web领域，业界传统的文本输入框通常由textarea标签构成，也有使用一些开源的解决方案，然而，这些文本输入框都是所见即所得的，也即用户在输入或编辑文本时所看到的文本与最终输出的文本具有相同的样式。

发明内容

本申请的一个目的是提供一种呈现内容信息的方法与设备。

根据本申请的一个方面，提供了一种呈现内容信息的方法，该方法包括：

响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；

响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；

将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

根据本申请的一个方面，提供了一种呈现内容信息的用户设备，该设备包括：

一一模块，用于响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；

一二模块，用于响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；

一三将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

根据本申请的一个方面，提供了一种呈现内容信息的设备，其中，该设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行如下操作：

响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；

响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；

将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

根据本申请的一个方面，提供了一种存储指令的计算机可读介质，所述指令在被执行时使得系统进行如下操作：

响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；

响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；

将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

根据本申请的另一个方面，提供了一种计算机程序产品，包括计算机程序，当所述计算机程序被处理器执行时，执行如下方法：

响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；

响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；

将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

与现有技术相比，本申请的文本输入框由可编辑的div标签节点构成，响应于用户在目标网页的文本输入框中输入的内容标识信息，能够获取一个或多个内容信息，并基于用户所选择的目标内容信息来创建目标内容信息对应的目标标签节点，目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式，并通过将目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息，能够使得目标内容信息的呈现样式区别于该文本输入框中用户所输入的输入文本内容的呈现样式，用来快速向用户提示目标内容信息，从而在视觉上传达一种突出强调的效果。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出根据本申请一个实施例的一种呈现内容信息的方法流程图；

图2示出根据本申请一个实施例的一种呈现内容信息的用户设备结构图；

图3示出根据本申请一个实施例的一种呈现内容信息的呈现示意图；

图4示出根据本申请一个实施例的一种呈现内容信息的呈现示意图；

图5示出可被用于实施本申请中所述的各个实施例的示例性系统。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本申请作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(例如，中央处理器(Central Processing Unit，CPU))、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RandomAccess Memory，RAM)和/或非易失性内存等形式，如只读存储器(Read Only Memory，ROM)或闪存(Flash Memory)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(Phase-Change Memory，PCM)、可编程随机存取存储器(Programmable Random Access Memory，PRAM)、静态随机存取存储器(Static Random-Access Memory，SRAM)、动态随机存取存储器(Dynamic Random AccessMemory，DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(Electrically-Erasable Programmable Read-Only Memory，EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、数字多功能光盘(Digital Versatile Disc,DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

本申请所指设备包括但不限于用户设备、网络设备、或用户设备与网络设备通过网络相集成所构成的设备。所述用户设备包括但不限于任何一种可与用户进行人机交互(例如通过触摸板进行人机交互)的移动电子产品，例如智能手机、平板电脑等，所述移动电子产品可以采用任意操作系统，如Android操作系统、iOS操作系统等。其中，所述网络设备包括一种能够按照事先设定或存储的指令，自动进行数值计算和信息处理的电子设备，其硬件包括但不限于微处理器、专用集成电路(Application Specific IntegratedCircuit，ASIC)、可编程逻辑器件(Programmable Logic Device，PLD)、现场可编程门阵列(Field Programmable Gate Array，FPGA)、数字信号处理器(Digital Signal Processor，DSP)、嵌入式设备等。所述网络设备包括但不限于计算机、网络主机、单个网络服务器、多个网络服务器集或多个服务器构成的云；在此，云由基于云计算(Cloud Computing)的大量计算机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个虚拟超级计算机。所述网络包括但不限于互联网、广域网、城域网、局域网、VPN网络、无线自组织网络(Ad Hoc网络)等。优选地，所述设备还可以是运行于所述用户设备、网络设备、或用户设备与网络设备、网络设备、触摸终端或网络设备与触摸终端通过网络相集成所构成的设备上的程序。

当然，本领域技术人员应能理解上述设备仅为举例，其他现有的或今后可能出现的设备如可适用于本申请，也应包含在本申请保护范围以内，并在此以引用方式包含于此。

在本申请的描述中，“多个”的含义是两个或者更多，除非另有明确具体的限定。

图1示出根据本申请一个实施例的一种呈现内容信息的方法流程图，该方法包括步骤S11、步骤S12和步骤S13。在步骤S11中，用户设备响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；在步骤S12中，用户设备响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；在步骤S13中，用户设备将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

在步骤S11中，用户设备响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成。在一些实施例中，现有技术中的文本输入框通常由textarea标签节点构成，textarea标签节点定义了一个多行的文本输入控件，例如，<textarea rows＝"3"cols＝"20"></textarea>，定义了一个3行20列的文本输入框，textarea标签节点通常不能内嵌其他标签节点，可定制性较弱，从而导致textarea标签节点中所有的输入文本内容只能对应一个统一的文本样式，而不能实现不同的输入本文内容对应不同的文本样式。在一些实施例中，本方案中通过可编辑的div标签节点来模拟文本输入框，div标签节点通常用于定义网页中的分区或节，可以把网页分割为独立的、不同的部分。在一些实施例中，可编辑的div标签节点是指div标签节点的contenteditable属性为“true”，例如，<div contenteditable＝"true"></div>。在一些实施例中，可编辑的div标签节点中可以内嵌其他标签节点，通过给该内嵌的其他标签节点设置与该div标签节点不同的文本样式属性，以实现该div标签节点中不同的输入本文内容对应不同的文本样式，例如，该div标签节点中的部分输入文本内容显示为高亮状态，而输入文本内容显示为正常非高亮状态。在一些实施例中，内容标识信息可以是话题标识信息，例如“#”，内容信息可以是话题信息。在一些实施例中，当用户在由可编辑的div标签节点所构成的文本输入框中输入话题标识信息(例如，“#”)后，会自动触发获取话题信息的动作，将获取的一个或多个话题信息通过下拉列表的形式展示出来以供用户进行选择，例如，将一个或多个最近热门话题呈现给用户，该一个或多个话题信息可以是用户设备提供的，也可是目标网页对应的服务器提供的，例如，用户设备通过AJAX(AsynchronousJavascript And XML，异步JavaScript和XML)触发一个HTTP请求，从目标网页对应的服务器请求获取一个或多个话题信息。

在步骤S12中，用户设备响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式。在一些实施例中，响应于用户在当前呈现的一个或多个内容信息中选择的目标内容信息，创建目标标签节点，其中，目标标签节点对应的标签内容为目标内容信息。在一些实施例中，目标标签节点包括但不限于任何用于展示目标内容信息的标签节点，例如，div标签、h1标签、h2标签、h3标签、h4标签、h5标签、h6标签、p标签、span标签等，例如，<h1>目标内容信息</h1>。在一些实施例中，给目标标签节点设置的CSS文本样式区别于文本输入框的div标签节点对应的CSS文本样式，其中，CSS文本样式包括但不限于文本字体类型、文本字体大小、文本字体颜色、文本是否加粗、文本是否倾斜、文本是否高亮等。

在步骤S13中，用户设备将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。在一些实施例中，通过“JavaScript DOM操作技术”获取目标网页中的文本输入框的div标签节点，并将创建的目标标签节点内嵌入该div标签节点，以在该文本输入框中呈现目标内容信息，并使得目标内容信息的呈现样式区别于该文本输入框中用户所输入的输入文本内容的呈现样式，用来快速向用户提示目标内容信息，从而在视觉上传达一种突出强调的效果，例如，目标内容信息高亮呈现，用户所输入的输入文本内容非高亮正常呈现，以在视觉上传达一种突出强调的效果。在一些实施例中，通过目标网页的Document对象来获取目标网页中的文本输入框的div标签节点，并将目标标签节点内嵌入该div标签节点，例如，通过“var element＝document.getElementById("div")”来获取id为“div”的文本输入框的div标签节点element，并通过“element.appendChild(para)”将目标标签节点para内嵌入该div标签节点element。

在一些实施例中，所述获取一个或多个内容信息，包括：通过Axios库向网络设备发送第一内容信息获取请求；接收所述网络设备基于所述第一内容信息获取请求返回的一个或多个内容信息。在一些实施例中，现有技术中通常通过AJAX方式来发送HTTP请求，而在本方案中，采用Axios库来发送HTTP请求，Axios是一个基于Promise用于浏览器和nodejs的HTTP库，Axios库相比于AJAX方式具有如下优点：从浏览器中创建XMLHttpRequest，从node.js发出http请求，支持Promise API，拦截请求和响应，转换请求和响应数据，取消请求，自动转换JSON数据，客户端支持防止XSFR攻击。在一些实施例中，第一内容信息获取请求可以是GET请求，或者，还可以是POST请求。

在一些实施例中，所述获取一个或多个内容信息，包括：用户设备获得所述用户在所述内容标识信息之后继续输入的文本输入信息，通过Axios库向网络设备发送第二内容信息获取请求，其中，所述第二内容信息获取请求包括所述文本输入信息；接收所述网络设备基于所述第二内容信息请求返回的、与所述文本输入信息相匹配的一个或多个内容信息。在一些实施例中，用户在由可编辑的div标签节点所构成的文本输入框中输入话题标识信息(例如，“#”)后，可以继续输入文本输入信息，然后通过Axios库向目标网页对应的服务器发送第二内容信息获取请求，其中，第二内容信息获取请求中包括用户在话题标识信息之后当前所输入的文本输入信息，然后服务器通过搜索得到与该文本输入信息相匹配的一个或多个内容信息，并作为第二内容信息获取请求的响应结果返回给用户设备进行呈现。例如，用户在话题标识信息之后当前所输入的文本输入信息为“微博”，服务器搜索得到与该文本输入信息相匹配的一个或多个内容信息，例如，“微博超话”、“微博剧集榜”、“微博头像挂机”、“微博卡片背景”、“带着微博去旅行”等。作为一个示例，如图3所示，在文本输入框中用户先输入“话题”，然后用户再输入话题标识信息“#”，然后用户继续输入“ap”，服务器搜索得到与“ap”相匹配的一个或多个话题信息，例如，“Apple”、“APH”、“Apollo”等，服务器将该一个或多个话题信息发送给用户设备在下拉列表中进行呈现，用户点击选中“Apple”作为目标话题信息，如图4所示，在文本输入框中高亮显示该目标话题信息，文本输入框中用户所输入的输入文本内容“话题”非高亮正常呈现。

在一些实施例中，其中，所述创建所述目标内容信息对应的目标标签节点，包括：确定所述目标内容信息对应的标签类型；根据所述标签类型及所述目标内容信息，创建所述目标内容信息对应的目标标签节点。在一些实施例中，目标内容信息对应的标签类型可以是用户设备默认设置的，或者，也可以是目标网页对应的服务器默认设置后提供给用户设备的，或者，还可以根据目标内容信息来动态确定标签类型，例如，根据目标内容信息的长度来确定标签类型，或者，根据目标内容信息是否换行来确定标签类型，例如，当目标内容信息的长度较长时，其对应的标签类型可以是h6标签，当目标内容信息的长度较短时，其对应的标签类型可以是h1标签。在一些实施例中，创建目标内容信息对应的标签类型的目标标签节点，其中，目标标签节点对应的标签内容为目标内容信息。

在一些实施例中，所述根据所述标签类型及所述目标内容信息，创建所述目标内容信息对应的目标标签节点，包括：根据所述标签类型，创建所述目标内容信息对应的元素标签节点；根据所述目标内容信息，创建所述目标内容信息对应的文本标签节点；将所述文本标签节点嵌入所述元素标签节点，创建所述目标内容信息对应的目标标签节点。在一些实施例中，通过目标网页的Document对象来创建该标签类型对应的元素标签节点，每个载入浏览器的HTML文档都会成为Document对象，Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问，Document对象是Window对象的一部分，可通过window.document属性对其进行访问。在一些实施例中，可以通过Document对象的createElement方法来创建元素标签节点，例如，若标签类型为“p”，通过“var para＝document.createElement("p")”来创建标签类型为“p”的元素标签节点para。在一些实施例中，可以通过Document对象的createTextNode方法来创建目标内容信息对应的文本标签节点，例如，通过“var node＝document.createTextNode(目标内容信息)”来创建文本标签节点node。在一些实施例中，将文本标签节点内嵌入元素标签节点，创建目标内容信息对应的目标标签节点，例如，通过“para.appendChild(node)”来将文本标签节点node内嵌入元素标签节点para。

在一些实施例中，所述方法还包括：用户设备创建所述目标内容信息对应的属性标签节点，其中，所述属性标签节点中的style属性为所述第一文本样式；其中，所述将所述文本标签节点嵌入所述元素标签节点，创建所述目标内容信息对应的目标标签节点，包括：将所述文本标签节点嵌入所述元素标签节点，将所述属性标签节点赋予所述元素标签节点，创建所述目标内容信息对应的目标标签节点。在一些实施例中，可以通过Document对象的createAttribute方法来创建第一文本样式对应的属性标签节点，其中，该属性标签节点中包括style属性名，该style属性名对应的属性值为第一文本样式，例如，若第一文本样式为{color:#000000，border:1px}，通过“var attr＝document.createAttribute(“style”)”来创建“style”属性标签节点attr，并将“style”属性标签节点attr的取值设置为第一文本样式，例如，attr.value＝{color:#000000，border:1px}，然后通过setArrtibute方法将创建的属性标签节点赋予元素标签节点，例如，元素标签节点为element，通过element.setArrtibute(attr)来将属性标签节点赋予元素标签节点element。

在一些实施例中，所述方法还包括：用户设备通过所述目标网页对应的CSS样式表，给所述目标标签节点添加所述第一文本样式。在一些实施例中，CSS样式表包括内部CSS样式表与外部CSS样式表。在一些实施例中，内部CSS样式表是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，例如，目标标签节点为<p>目标内容信息</p>，第一文本样式为{color:#000000，border:1px}，则可以通过在head头部标签中的style标签来给目标标签节点p添加第一文本样式，例如，<head><style type＝"text/css">p{color:#000000，border:1px}</style></head>。在一些实施例中，外部CSS样式表是将样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，例如，在style,css中定义p{color:#000000，border:1px}，然后在目标网页的HTML文档的head头部标签的link标签中将style,css文件链接到HTML文档中，例如，<head><linkhref＝"style.css"rel＝"stylesheet"type＝"text/css"/></head>，以此将style,css中定义的第一文本样式添加给目标标签节点p。

在一些实施例中，所述步骤S13包括：用户设备从所述目标网页中获取所述div标签节点；确定所述div标签节点对应的当前光标位置；将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息。在一些实施例中，并不一定是将目标标签节点内嵌在div标签节点的最后，即不一定是在文本输入框中的末尾位置呈现目标内容信息，文本输入框中的当前光标，可能位于文本输入框中的任何一个位置，需要在文本输入框对应的当前光标位置处呈现目标内容信息，因此先确定文本输入框的div标签节点对应的当前光标位置，然后将目标标签节点内嵌在该当前光标位置处，以此实现在文本输入框中的准确位置呈现目标内容信息。

在一些实施例中，所述确定所述div标签节点对应的当前光标位置，包括：获取所述div标签节点对应的Range对象；根据所述Range对象，确定所述div标签节点对应的当前光标位置。在一些实施例中，在HTML文档中，一个Range对象代表网页上用户当前选取的一段连续区域。在一些实施例中，每个Range对象中包括startOffset属性和endOffset属性，startOffset属性用于表示Range对象所代表的连续区域的起点位置的偏移量，endOffset属性用于表示Range对象所代表的连续区域的终点位置的偏移量，即Range对象中包括区域起点位置及区域终点位置，若Range对象中的区域起点位置与区域终点位置相同，则可以确定用户当前选取的连续区域为一个光标。在一些实施例中，每个Range对象中还包括collapsed属性，collapsed属性用于表示Range对象所代表的连续区域的起点和终点是否位于相同的位置，如果相同collapsed属性为true，也可以确定用户当前选取的连续区域为一个光标。在一些实施例中，通过获取文本输入框的div标签节点对应的Range对象，通过该Range对象可以确定文本输入框中的当前光标位置，然后在当前光标位置处呈现目标内容信息。

在一些实施例中，所述获取所述div标签节点对应的Range对象，包括：根据所述目标网页对应的文档对象，获取所述目标网页对应的Selection对象；通过所述Selection对象，获取所述div标签节点对应的Range对象。在一些实施例中，在HTML文档中，每一个浏览器窗口都有一个Selection对象，代表用户在网页中所选取的区域，可以通过如下代码得到一个Selection对象：var selection＝window.getSelection()；或者，var selection＝document.getSelection()。在一些实施例中，每一个Selection对象都有一个或多个Range对象，每一个Range对象代表用户当前选取的一段连续区域，在Firefox浏览器中，用户可以通过按住ctrl键来选取网页上的多个区域，因此一个Selection对象可能有多个Range对象，在chrome或safari浏览器中，用户每次只能选取一段区域，所以一个Selection对象中只能有一个Range对象。在一些实施例中，在本方案中，由于目标网页中通常只有一个文本输入框，因此，在不同的浏览器中均可以通过selection.getRangeAt(0)来获取文本输入框的div标签节点对应的Range对象。

在一些实施例中，所述将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息，包括：通过调用所述Range对象的insertNode方法，将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息。在一些实施例中，通过“var para＝document.createElement("p")，var node＝document.createTextNode，para.appendChild(node)”来创建目标标签节点para，然后通过“range.insertNode(para)”，将目标标签节点内嵌入文本输入框的div标签节点中的当前光标位置处。在一些实施例中，还可以先创建一个DocumentFragment(文档片段)对象，DocumentFragment是一个保存一个或多个标签节点的容器对象，例如，通过“var frag＝document.createDocumentFragment()”来创建一个DocumentFragment对象frag，然后通过DocumentFragment对象的appendChild方法，将目标标签节点保存到DocumentFragment对象frag中，并通过“range.insertNode(frag)”，将目标标签节点内嵌入文本输入框的div标签节点中的当前光标位置处。

在一些实施例中，所述方法还包括：用户设备通过调用所述Range对象的setStartAfter方法，将所述当前光标位置移动到所述目标内容信息之后。在一些实施例中，在将目标标签节点嵌入文本输入框的div标签节点中的当前光标位置处的时候，还会记录并保存所嵌入的目标内容信息中的末尾内容节点，例如，末尾内容节点为lastNode，然后通过“range.setStartAfter(lastNode)”来将该文本输入框的当前光标位置移动到所嵌入的目标内容信息之后。在一些实施例中，还会通过“range.collapse(true)”来折叠文本输入框的div标签节点对应的Range对象的所代表的连续区域范围，将Range对象的区域终点折叠至区域起点，即将Range对象所代表的连续区域范围折叠至区域起点，从而确保在文本输入框中目标内容信息的之后位置正确地显示文本输入框的当前光标。

图2示出根据本申请一个实施例的一种呈现内容信息的用户设备结构图，该设备包括一一模块11、一二模块12和一三模块13。一一模块11，用于响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；一二模块12，用于响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；一三模块13，用于将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。

一一模块11，用于响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成。在一些实施例中，现有技术中的文本输入框通常由textarea标签节点构成，textarea标签节点定义了一个多行的文本输入控件，例如，<textarea rows＝"3"cols＝"20"></textarea>，定义了一个3行20列的文本输入框，textarea标签节点通常不能内嵌其他标签节点，可定制性较弱，从而导致textarea标签节点中所有的输入文本内容只能对应一个统一的文本样式，而不能实现不同的输入本文内容对应不同的文本样式。在一些实施例中，本方案中通过可编辑的div标签节点来模拟文本输入框，div标签节点通常用于定义网页中的分区或节，可以把网页分割为独立的、不同的部分。在一些实施例中，可编辑的div标签节点是指div标签节点的contenteditable属性为“true”，例如，<div contenteditable＝"true"></div>。在一些实施例中，可编辑的div标签节点中可以内嵌其他标签节点，通过给该内嵌的其他标签节点设置与该div标签节点不同的文本样式属性，以实现该div标签节点中不同的输入本文内容对应不同的文本样式，例如，该div标签节点中的部分输入文本内容显示为高亮状态，而输入文本内容显示为正常非高亮状态。在一些实施例中，内容标识信息可以是话题标识信息，例如“#”，内容信息可以是话题信息。在一些实施例中，当用户在由可编辑的div标签节点所构成的文本输入框中输入话题标识信息(例如，“#”)后，会自动触发获取话题信息的动作，将获取的一个或多个话题信息通过下拉列表的形式展示出来以供用户进行选择，例如，将一个或多个最近热门话题呈现给用户，该一个或多个话题信息可以是用户设备提供的，也可是目标网页对应的服务器提供的，例如，用户设备通过AJAX(AsynchronousJavascript And XML，异步JavaScript和XML)触发一个HTTP请求，从目标网页对应的服务器请求获取一个或多个话题信息。

一二模块12，用于响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式。在一些实施例中，响应于用户在当前呈现的一个或多个内容信息中选择的目标内容信息，创建目标标签节点，其中，目标标签节点对应的标签内容为目标内容信息。在一些实施例中，目标标签节点包括但不限于任何用于展示目标内容信息的标签节点，例如，div标签、h1标签、h2标签、h3标签、h4标签、h5标签、h6标签、p标签、span标签等，例如，<h1>目标内容信息</h1>。在一些实施例中，给目标标签节点设置的CSS文本样式区别于文本输入框的div标签节点对应的CSS文本样式，其中，CSS文本样式包括但不限于文本字体类型、文本字体大小、文本字体颜色、文本是否加粗、文本是否倾斜、文本是否高亮等。

一三模块13，用于将所述目标标签节点嵌入所述div标签节点，以在所述文本输入框中呈现所述目标内容信息。在一些实施例中，通过“JavaScript DOM操作技术”获取目标网页中的文本输入框的div标签节点，并将创建的目标标签节点内嵌入该div标签节点，以在该文本输入框中呈现目标内容信息，并使得目标内容信息的呈现样式区别于该文本输入框中用户所输入的输入文本内容的呈现样式，用来快速向用户提示目标内容信息，从而在视觉上传达一种突出强调的效果，例如，目标内容信息高亮呈现，用户所输入的输入文本内容非高亮正常呈现，以在视觉上传达一种突出强调的效果。在一些实施例中，通过目标网页的Document对象来获取目标网页中的文本输入框的div标签节点，并将目标标签节点内嵌入该div标签节点，例如，通过“var element＝document.getElementById("div")”来获取id为“div”的文本输入框的div标签节点element，并通过“element.appendChild(para)”将目标标签节点para内嵌入该div标签节点element。

在一些实施例中，所述获取一个或多个内容信息，包括：通过Axios库向网络设备发送第一内容信息获取请求；接收所述网络设备基于所述第一内容信息获取请求返回的一个或多个内容信息。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述获取一个或多个内容信息，包括：获得所述用户在所述内容标识信息之后继续输入的文本输入信息，通过Axios库向网络设备发送第二内容信息获取请求，其中，所述第二内容信息获取请求包括所述文本输入信息；接收所述网络设备基于所述第二内容信息请求返回的、与所述文本输入信息相匹配的一个或多个内容信息。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，其中，所述创建所述目标内容信息对应的目标标签节点，包括：确定所述目标内容信息对应的标签类型；根据所述标签类型及所述目标内容信息，创建所述目标内容信息对应的目标标签节点。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述根据所述标签类型及所述目标内容信息，创建所述目标内容信息对应的目标标签节点，包括：根据所述标签类型，创建所述目标内容信息对应的元素标签节点；根据所述目标内容信息，创建所述目标内容信息对应的文本标签节点；将所述文本标签节点嵌入所述元素标签节点，创建所述目标内容信息对应的目标标签节点。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述设备还用于：创建所述目标内容信息对应的属性标签节点，其中，所述属性标签节点中的style属性为所述第一文本样式；其中，所述将所述文本标签节点嵌入所述元素标签节点，创建所述目标内容信息对应的目标标签节点，包括：将所述文本标签节点嵌入所述元素标签节点，将所述属性标签节点赋予所述元素标签节点，创建所述目标内容信息对应的目标标签节点。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述设备还用于：通过所述目标网页对应的CSS样式表，给所述目标标签节点添加所述第一文本样式。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述一三模块13用于：从所述目标网页中获取所述div标签节点；确定所述div标签节点对应的当前光标位置；将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述确定所述div标签节点对应的当前光标位置，包括：获取所述div标签节点对应的Range对象；根据所述Range对象，确定所述div标签节点对应的当前光标位置。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述获取所述div标签节点对应的Range对象，包括：根据所述目标网页对应的文档对象，获取所述目标网页对应的Selection对象；通过所述Selection对象，获取所述div标签节点对应的Range对象。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息，包括：通过调用所述Range对象的insertNode方法，将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

在一些实施例中，所述设备还用于：通过调用所述Range对象的setStartAfter方法，将所述当前光标位置移动到所述目标内容信息之后。在此，相关操作与图1所示实施例相同或相近，故不再赘述，在此以引用方式包含于此。

图5示出了可被用于实施本申请中所述的各个实施例的示例性系统。

如图5所示在一些实施例中，系统300能够作为各所述实施例中的任意一个设备。在一些实施例中，系统300可包括具有指令的一个或多个计算机可读介质(例如，系统存储器或NVM/存储设备320)以及与该一个或多个计算机可读介质耦合并被配置为执行指令以实现模块从而执行本申请中所述的动作的一个或多个处理器(例如，(一个或多个)处理器305)。

对于一个实施例，系统控制模块310可包括任意适当的接口控制器，以向(一个或多个)处理器305中的至少一个和/或与系统控制模块310通信的任意适当的设备或组件提供任意适当的接口。

系统控制模块310可包括存储器控制器模块330，以向系统存储器315提供接口。存储器控制器模块330可以是硬件模块、软件模块和/或固件模块。

系统存储器315可被用于例如为系统300加载和存储数据和/或指令。对于一个实施例，系统存储器315可包括任意适当的易失性存储器，例如，适当的DRAM。在一些实施例中，系统存储器315可包括双倍数据速率类型四同步动态随机存取存储器(DDR4SDRAM)。

对于一个实施例，系统控制模块310可包括一个或多个输入/输出(I/O)控制器，以向NVM/存储设备320及(一个或多个)通信接口325提供接口。

例如，NVM/存储设备320可被用于存储数据和/或指令。NVM/存储设备320可包括任意适当的非易失性存储器(例如，闪存)和/或可包括任意适当的(一个或多个)非易失性存储设备(例如，一个或多个硬盘驱动器(HDD)、一个或多个光盘(CD)驱动器和/或一个或多个数字通用光盘(DVD)驱动器)。

NVM/存储设备320可包括在物理上作为系统300被安装在其上的设备的一部分的存储资源，或者其可被该设备访问而不必作为该设备的一部分。例如，NVM/存储设备320可通过网络经由(一个或多个)通信接口325进行访问。

(一个或多个)通信接口325可为系统300提供接口以通过一个或多个网络和/或与任意其他适当的设备通信。系统300可根据一个或多个无线网络标准和/或协议中的任意标准和/或协议来与无线网络的一个或多个组件进行无线通信。

对于一个实施例，(一个或多个)处理器305中的至少一个可与系统控制模块310的一个或多个控制器(例你如，存储器控制器模块330)的逻辑封装在一起。对于一个实施例，(一个或多个)处理器305中的至少一个可与系统控制模块310的一个或多个控制器的逻辑封装在一起以形成系统级封装(SiP)。对于一个实施例，(一个或多个)处理器305中的至少一个可与系统控制模块310的一个或多个控制器的逻辑集成在同一模具上。对于一个实施例，(一个或多个)处理器305中的至少一个可与系统控制模块310的一个或多个控制器的逻辑集成在同一模具上以形成片上系统(SoC)。

在各个实施例中，系统300可以但不限于是：服务器、工作站、台式计算设备或移动计算设备(例如，膝上型计算设备、持有计算设备、平板电脑、上网本等)。在各个实施例中，系统300可具有更多或更少的组件和/或不同的架构。例如，在一些实施例中，系统300包括一个或多个摄像机、键盘、液晶显示器(LCD)屏幕(包括触屏显示器)、非易失性存储器端口、多个天线、图形芯片、专用集成电路(ASIC)和扬声器。

本申请还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机代码，当所述计算机代码被执行时，如前任一项所述的方法被执行。

本申请还提供了一种计算机程序产品，当所述计算机程序产品被计算机设备执行时，如前任一项所述的方法被执行。

本申请还提供了一种计算机设备，所述计算机设备包括：

一个或多个处理器；

存储器，用于存储一个或多个计算机程序；

当所述一个或多个计算机程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如前任一项所述的方法。

需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。

另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。本领域技术人员应能理解，计算机程序指令在计算机可读介质中的存在形式包括但不限于源文件、可执行文件、安装包文件等，相应地，计算机程序指令被计算机执行的方式包括但不限于：该计算机直接执行该指令，或者该计算机编译该指令后再执行对应的编译后程序，或者该计算机读取并执行该指令，或者该计算机读取并安装该指令后再执行对应的安装后程序。在此，计算机可读介质可以是可供计算机访问的任意可用的计算机可读存储介质或通信介质。

通信介质包括藉此包含例如计算机可读指令、数据结构、程序模块或其他数据的通信信号被从一个系统传送到另一系统的介质。通信介质可包括有导的传输介质(诸如电缆和线(例如，光纤、同轴等))和能传播能量波的无线(未有导的传输)介质，诸如声音、电磁、RF、微波和红外。计算机可读指令、数据结构、程序模块或其他数据可被体现为例如无线介质(诸如载波或诸如被体现为扩展频谱技术的一部分的类似机制)中的已调制数据信号。术语“已调制数据信号”指的是其一个或多个特征以在信号中编码信息的方式被更改或设定的信号。调制可以是模拟的、数字的或混合调制技术。

作为示例而非限制，计算机可读存储介质可包括以用于存储诸如计算机可读指令、数据结构、程序模块或其它数据的信息的任何方法或技术实现的易失性和非易失性、可移动和不可移动的介质。例如，计算机可读存储介质包括，但不限于，易失性存储器，诸如随机存储器(RAM,DRAM,SRAM)；以及非易失性存储器，诸如闪存、各种只读存储器(ROM,PROM,EPROM,EEPROM)、磁性和铁磁/铁电存储器(MRAM,FeRAM)；以及磁性和光学存储设备(硬盘、磁带、CD、DVD)；或其它现在已知的介质或今后开发的能够存储供计算机系统使用的计算机可读信息/数据。

在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。装置权利要求中陈述的多个单元或装置也可以由一个单元或装置通过软件或者硬件来实现。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。

Claims (12)

1.一种呈现内容信息的方法，其中，所述方法包括：

响应于用户在目标网页的文本输入框中输入的内容标识信息，获取一个或多个内容信息，其中，所述文本输入框由可编辑的div标签节点构成；

响应于所述用户在所述一个或多个内容信息中选择的目标内容信息，确定所述目标内容信息对应的标签类型；根据所述标签类型及所述目标内容信息，创建所述目标内容信息对应的目标标签节点，其中，所述目标标签节点对应的第一文本样式区别于所述div标签节点对应的第二文本样式；

从所述目标网页中获取所述div标签节点；确定所述div标签节点对应的当前光标位置；将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息。

2.根据权利要求1所述的方法，其中，所述获取一个或多个内容信息，包括：

通过Axios库向网络设备发送第一内容信息获取请求；

接收所述网络设备基于所述第一内容信息获取请求返回的一个或多个内容信息。

3.根据权利要求1所述的方法，其中，所述获取一个或多个内容信息，包括：

获得所述用户在所述内容标识信息之后继续输入的文本输入信息，通过Axios库向网络设备发送第二内容信息获取请求，其中，所述第二内容信息获取请求包括所述文本输入信息；

接收所述网络设备基于所述第二内容信息请求返回的、与所述文本输入信息相匹配的一个或多个内容信息。

4.根据权利要求1所述的方法，其中，所述根据所述标签类型及所述目标内容信息，创建所述目标内容信息对应的目标标签节点，包括：

根据所述标签类型，创建所述目标内容信息对应的元素标签节点；

根据所述目标内容信息，创建所述目标内容信息对应的文本标签节点；

将所述文本标签节点嵌入所述元素标签节点，创建所述目标内容信息对应的目标标签节点。

5.根据权利要求4所述的方法，其中，所述方法还包括：

创建所述目标内容信息对应的属性标签节点，其中，所述属性标签节点中的style属性为所述第一文本样式；

其中，所述将所述文本标签节点嵌入所述元素标签节点，创建所述目标内容信息对应的目标标签节点，包括：

将所述文本标签节点嵌入所述元素标签节点，将所述属性标签节点赋予所述元素标签节点，创建所述目标内容信息对应的目标标签节点。

6.根据权利要求4所述的方法，其中，所述方法还包括：

通过所述目标网页对应的CSS样式表，给所述目标标签节点添加所述第一文本样式。

7.根据权利要求1所述的方法，其中，所述确定所述div标签节点对应的当前光标位置，包括：

获取所述div标签节点对应的Range对象；

根据所述Range对象，确定所述div标签节点对应的当前光标位置。

8.根据权利要求7所述的方法，其中，所述获取所述div标签节点对应的Range对象，包括：

根据所述目标网页对应的文档对象，获取所述目标网页对应的Selection对象；

通过所述Selection对象，获取所述div标签节点对应的Range对象。

9.根据权利要求7所述的方法，其中，所述将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息，包括：

通过调用所述Range对象的insertNode方法，将所述目标标签节点嵌入所述div标签节点中的所述当前光标位置处，以在所述文本输入框中呈现所述目标内容信息。

10.根据权利要求9所述的方法，其中，所述方法还包括：

通过调用所述Range对象的setStartAfter方法，将所述当前光标位置移动到所述目标内容信息之后。

11.一种呈现内容信息的设备，其特征在于，所述设备包括：

处理器；以及

被安排成存储计算机可执行指令的存储器，所述可执行指令在被执行时使所述处理器执行如权利要求1至10中任一项所述的方法。

12.一种存储指令的计算机可读介质，所述指令在被计算机执行时使得所述计算机进行如权利要求1至10中任一项所述方法的操作。