CN113656006A - 一种富文本的渲染方法及渲染设备 - Google Patents

Abstract

本申请公开了一种富文本的渲染方法及渲染设备，该方法包括：监听外部传入的第一富文本；进一步的，确定第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；进一步的，若第一富文本字符与当前富文本字符不相同，采用正则表达式结合预设方法处理第一富文本，获得第二富文本，并保存第二富文本；进一步的，对第二富文本进行渲染，获得第一目标多媒体页面。通过这种方式，可以在不同的技术语言边编写工程中，统一使用相同的处理渲染逻辑，可以实现在不同技术语言编写的工程中无需重复实现同样的处理渲染逻辑的效果，可以降低代码的维护成本。

Description

一种富文本的渲染方法及渲染设备

技术领域

本申请涉及互联网技术领域，特别是涉及一种富文本的渲染方法及渲染设备。

背景技术

目前，在web行业中有多种热门技术语言，例如Vue和React，支持渲染富文本，使得可以在页面中展示富文本内容。但是，由于多种技术语言编写的项目会需要渲染富文本字符的功能，需要重新采用对应的技术语言实现更改富文本字符的渲染逻辑。

可见，目前如果需要在不同的web语言环境中实现统一的富文本内容，代码会存在较大的差异，使得代码的维护成本增高。

发明内容

基于此，本申请提供一种富文本的渲染方法及渲染设备，用于解决现有技术中存在的若需要在不同的web语言环境中实现统一的富文本内容，代码会存在较大的差异，使得代码的维护成本增高的问题，可以降低代码的维护成本。

第一方面，本申请实施例提供一种富文本的渲染方法，包括：

监听外部传入的第一富文本；

确定所述第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；

若所述第一富文本字符与所述当前富文本字符不相同，采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，并保存所述第二富文本；

对所述第二富文本进行渲染，获得第一目标多媒体页面。

在一种可能的设计中，监听外部传入的第一富文本，包括：

运用svelte的反应式声明监听外部传入的所述第一富文本。

在一种可能的设计中，保存所述第二富文本，包括：

采用transContent参数保存所述第二富文本。

在一种可能的设计中，所述预设方法为JavaScript的字符串replace方法；

采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，包括：

对所述第一富文本中的段首空格、空行进行去除处理，获得处理后的第一富文本；

采用所述正则表达式识别所述处理后的第一富文本中的视频、音频、图片的地址协议，以及识别所述处理后的第一富文本中的Video标签、Audio标签、Img标签和自定义模块；

采用所述字符串replace方法将所述地址协议替换为所述当前访问页面的协议，以及将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块分别替换为带有随机id的div标签，并将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id分别保存到相应的数组；

确定经过替换处理后的第一富文本的px值，将所述px值替换为所述当前访问页面支持的rem值，获得所述第二富文本。

在一种可能的设计中，所述相应的数组包括：所述Video标签对应的videoArr数组、所述Audio标签对应的audioArr数组、所述Img标签对应的imgArr数组和所述自定义模块对应的voteElld数组；

对所述第二富文本进行渲染，获得第一目标多媒体页面，包括：

使用svelte的HTML内容插入功能，对所述第二富文本进行初次渲染处理，获得处理后的第二富文本；

遍历所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，通过所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id，绑定实例化渲染所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，并为所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组设置属性，获得所述第一目标多媒体页面。

在一种可能的设计中，对所述第二富文本进行渲染，获得第一目标多媒体页面之后，所述方法还包括：

接收所述相应的数组中的任一数组对应的更改参数；基于所述更改参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面；和/或，

接收针对所述相应的数组中的任一数组对应的定制参数；基于所述定制参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面。

在一种可能的设计中，所述方法还包括：

设置所述第一目标多媒体页面的样式属性font-size，统一所述第一目标多媒体页面的样式尺寸与不同的终端中的页面的样式尺寸相同。

第二方面，本申请实施例提供一种渲染设备，包括：

监听单元，用于监听外部传入的第一富文本；

处理单元，用于确定所述第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；若所述第一富文本字符与所述当前富文本字符不相同，采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，并保存所述第二富文本；对所述第二富文本进行渲染，获得第一目标多媒体页面。

在一种可能的设计中，所述监听单元具体用于：

运用svelte的反应式声明监听外部传入的所述第一富文本。

在一种可能的设计中，所述处理单元具体用于：

采用transContent参数保存所述第二富文本。

在一种可能的设计中，所述预设方法为JavaScript的字符串replace方法；所述处理单元具体用于：

对所述第一富文本中的段首空格、空行进行去除处理，获得处理后的第一富文本；

采用所述正则表达式识别所述处理后的第一富文本中的视频、音频、图片的地址协议，以及识别所述处理后的第一富文本中的Video标签、Audio标签、Img标签和自定义模块；

采用所述字符串replace方法将所述地址协议替换为所述当前访问页面的协议，以及将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块分别替换为带有随机id的div标签，并将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id分别保存到相应的数组；

确定经过替换处理后的第一富文本的px值，将所述px值替换为所述当前访问页面支持的rem值，获得所述第二富文本。

在一种可能的设计中，所述相应的数组包括：所述Video标签对应的videoArr数组、所述Audio标签对应的audioArr数组、所述Img标签对应的imgArr数组和所述自定义模块对应的voteElld数组；所述处理单元具体用于：

使用svelte的HTML内容插入功能，对所述第二富文本进行初次渲染处理，获得处理后的第二富文本；

遍历所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，通过所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id，绑定实例化渲染所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，并为所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组设置属性，获得所述第一目标多媒体页面。

在一种可能的设计中，所述处理单元还用于：

接收所述相应的数组中的任一数组对应的更改参数；基于所述更改参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面；和/或，

接收针对所述相应的数组中的任一数组对应的定制参数；基于所述定制参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面。

在一种可能的设计中，所述处理单元还用于：

设置所述第一目标多媒体页面的样式属性font-size，统一所述第一目标多媒体页面的样式尺寸与不同的终端中的页面的样式尺寸相同。

第三方面，本申请实施例提供一种渲染设备，所述渲染设备包括：至少一个存储器和至少一个处理器；

所述至少一个存储器用于存储一个或多个程序；

当所述一个或多个程序被所述至少一个处理器执行时，实现上述第一方面中任一种可能设计所涉及的方法。

第四方面，本申请实施例提供一种计算机可读存储介质，所述计算机可读存储介质存储有至少一个程序；当所述至少一个程序被处理器执行时，实现上述第一方面中任一种可能设计所涉及的方法。

本申请的有益效果如下：

在本申请提供的技术方案中，监听外部传入的第一富文本；进一步的，确定第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；进一步的，若第一富文本字符与当前富文本字符不相同，采用正则表达式结合预设方法处理第一富文本，获得第二富文本，并保存第二富文本；进一步的，对第二富文本进行渲染，获得第一目标多媒体页面。通过这种方式，可以在不同的技术语言边编写工程中，统一使用相同的处理渲染逻辑，可以实现在不同技术语言编写的工程中无需重复实现同样的处理渲染逻辑的效果，可以解决现有技术中存在的若需要在不同的web语言环境中实现统一的富文本内容，代码会存在较大的差异，使得代码的维护成本增高的问题，可以降低代码的维护成本。

附图说明

图1为本申请实施例提供的一种富文本的渲染方法的流程示意图；

图2为本申请实施例提供的一种采用正则表达式结合预设方法处理第一富文本，获得第二富文本的过程示意图；

图3为本申请实施例提供的一种渲染设备的结构示意图；

图4为本申请实施例提供的一种渲染设备的结构示意图；

图5为本申请实施例提供的一种预览API中的Props配置项的示意图；

图6为本申请实施例提供的一种预览API中的imageProps配置项的示意图；

图7为本申请实施例提供的一种预览API中的videoProps配置项的示意图；

图8为本申请实施例提供的一种预览API中的control配置项的示意图；

图9为本申请实施例提供的一种预览API中的audioProps配置项的示意图；

图10为本申请实施例提供的一种预览API中的voteProps配置项的示意图；

图11为本申请实施例提供的另一种预览API中的voteProps配置项的示意图。

具体实施方式

为了便于理解本申请实施例提供的技术方案，下面结合附图详细说明本申请的技术方案。

以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的方法的例子。

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。还应理解，本文中使用的术语“多个”包括两个及两个以上。

除非有相反的说明，本申请实施例提及“第一”、“第二”等序数词用于对多个对象进行区分，不用于限定多个对象的顺序、时序、优先级或者重要程度。

本申请实施例所涉及的NPM，为一种JavaScript包管理工具。

本申请实施例所涉及的Vue，为一种渐进式JavaScript框架，用于编写前端页面工程。

本申请实施例所涉及的React，可以用于构建用户界面的JavaScript库，用于编写前端页面工程。

本申请实施例所涉及的Svelte，可以用于构建web应用程序的工具，在构建/编译阶段将应用程序转换为理想的JavaScript应用并融合到其他前端页面工程。

本申请实施例所涉及的Svelte反应式声明，可以是当组件的状态改变时，Svelte会自动更新文档对象模型DOM。通常，组件状态的某些部分需要通过其它部分的计算而得出，并在其它部分更改时重新计算，也就是只要参考值变化了就重新运行此代码。

本申请实施例所涉及的Svelte HTML内容插入，用于渲染富文本字符串。

本申请实施例所涉及的Video，为一种HTML的视频标签，用于播放视频。

本申请实施例所涉及的Audio，为一种HTML的音频标签，用于播放音频。

本申请实施例所涉及的Img，为一种HTML的图片标签，用于展示图片。

下面将结合图1对本申请实施例提供的富文本的渲染方法进行具体阐述。

请参考图1所示，为本申请实施例提供的一种富文本的渲染方法的流程示意图。以渲染设备为执行主体为例，如图1所示，该方法流程可以包括以下步骤：

S101、监听外部传入的第一富文本。

在一些实施例中，渲染设备可以运用svelte的反应式声明监听第一富文本。比如，渲染设备可以在当前访问页面初始化时，运用svelte的反应式声明监听第一富文本。

本申请实施例中，通过运用svelte的反应式声明监听外部传入的第一富文本，可以便于在当前访问页面的组件状态发生改变时，能够及时更新当前访问页面对应的DOM，从而可以及时保证执行步骤S102不会存在偏差，可以提高判断确定第一富文本字符与当前富文本字符是否相同的准确性。

S102、确定第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同。若第一富文本字符与当前富文本字符不相同，执行步骤S103，否则，执行步骤S105。

在具体的实现过程中，若第一富文本中的第一富文本字符不包含在当前访问页面中的当前富文本字符内，渲染设备可以确定第一富文本字符与当前富文本字符不相同，执行步骤S103。或者，若第一富文本中的第一富文本字符包含在当前访问页面中的当前富文本字符内，渲染设备可以确定第一富文本字符与当前富文本字符相同，执行步骤S105。

本申请实施例中，通过在第一富文本字符与当前富文本字符不相同时，即当前访问页面的富文本字符存在变化时，能够及时启动后续的渲染过程，可以确保能够及时将当前访问页面更新为目标多媒体访问页面。

S103、采用正则表达式结合预设方法处理第一富文本，获得第二富文本，并保存第二富文本。

在一些实施例中，该预设方法可以为JavaScript的字符串replace方法。

在一些实施例中，如图2所示，渲染设备采用正则表达式结合预设方法处理第一富文本，获得第二富文本的具体过程可以包括如下步骤：

S201、对第一富文本中的段首空格、空行进行去除处理，获得处理后的第一富文本。

本申请实施例中，通过对第一富文本中的首空格、空行进行去除处理，可以优化后续得到的第一目标多媒体页面的排版，可以防止第一目标多媒体页面发生内容错乱的问题。

S202、采用正则表达式识别处理后的第一富文本中的视频、音频、图片的地址协议，以及识别处理后的第一富文本中的Video标签、Audio标签、Img标签和自定义模块。

在具体的实现过程中，对于特定的HTML标签，如Img、Video、Audio等标签，可以使用组件来整体替换，使得终端(例如PC端或移动端)所支持的功能也可以变得定制化，页面展示的效果也能更多样化。比如，富文本字符中某些特定的HTML标签，如Img、Video、Audio等标签可以转换为带有标准格式的插座，通过正则表达式识别出上述特定的HTML标签。例如，渲染设备可以采用正则表达式识别处理后的第一富文本中的视频、音频、图片的地址协议，以及识别处理后的第一富文本中的Video标签、Audio标签、Img标签和自定义模块。

在一些实施例中，自定义模块可以是自定义投票模块，也可以是其它任何可以自定义显示在页面中的模块，本申请实施例不限定。通过自定义模块，可以使支持定制终端的网页功能，可以满足用户不同的页面功能需求。

S203、采用该字符串replace方法将地址协议替换为当前访问页面的协议，以及将Video标签、Audio标签、Img标签和自定义模块分别替换为带有随机id的div标签，并将Video标签、Audio标签、Img标签和自定义模块各自对应的随机id分别保存到相应的数组。

在一些实施例中，该相应的数组可以包括但不限于：Video标签对应的videoArr数组、Audio标签对应的audioArr数组、Img标签对应的imgArr数组和自定义模块对应的voteElld数组。

在一些实施例中，渲染设备识别出上述特定的HTML标签后，可以对接使用与上述特定的HTML标签对应的组件(例如videoArr数组、audioArr数组、imgArr数组和voteElld数组)。

比如，渲染设备可以采用该字符串replace方法将该地址协议替换为当前访问页面的协议。渲染设备可以采用该字符串replace方法将Video标签替换为带有随机id的div标签，并将Video标签对应的随机id分别保存到videoArr数组。渲染设备可以采用该字符串replace方法将Audio标签替换为带有随机id的div标签，并将Video标签对应的随机id分别保存到audioArr数组。渲染设备可以采用该字符串replace方法将Img标签替换为带有随机id的div标签，并将Video标签对应的随机id分别保存到imgArr数组。渲染设备可以采用该字符串replace方法将该自定义模块替换为带有随机id的div标签，并将Video标签对应的随机id分别保存到voteElld数组。

本申请实施例中，通过在识别出上述特定的HTML标签后，对接使用与上述特定的HTML标签对应的组件，由于各个组件的内部参数、方法有着的作用域，其它组件无法访问使用其内部参数、方法，即组件化结构能减少不同功能之间干扰性，且上述特定的HTML标签对应的随机id聚体育唯一性，开发者在维护过程中，能够根据随机id快速定位出现的问题，可以便于提高互联网产品的稳定性。

S204、确定经过替换处理后的第一富文本的px值，将px值替换为当前访问页面支持的rem值，获得第二富文本。

在一些实施例中，为了兼顾不同的终端的屏幕尺寸，渲染设备可以确定经过替换处理后的第一富文本的px值，将px值替换为当前访问页面支持的rem值，获得第二富文本。

本申请实施例中，通过将第一富文本的px值替换为当前访问页面支持的rem值，可以理解为，类似等比缩放第一目标多媒体页面，可以确保后续得到的第一目标多媒体页面的UI与不同的终端中的页面的UI一致。

在一些实施例中，渲染设备获得第二富文本后，可以采用transContent参数保存第二富文本。在具体实现过程中，可以采用下述svelte语法完成第二富文本的保存。

示例性的，svelte语法可以为：<div>{@HTML transContent}</div>。

S104、对第二富文本进行渲染，获得第一目标多媒体页面。

在一些实施例中，渲染设备可以使用svelte的HTML内容插入功能，对第二富文本进行初次渲染处理，获得处理后的第二富文本。此时，渲染设备已完成初次把第二富文本渲染成文档对象模型dom。

在一实施例中，渲染设备可以遍历videoArr数组、audioArr数组、imgArr数组和voteElld数组，通过Video标签、Audio标签、Img标签和自定义模块各自对应的随机id，可以绑定实例化渲染videoArr数组、audioArr数组、imgArr数组和voteElld数组，并可以为videoArr数组、audioArr数组、imgArr数组和voteElld数组设置属性，此时，完成对第二富文本的渲染，获得该第一目标多媒体页面。

在具体的实现过程中，可以采用下述代码实现对第二富文本进行渲染，以获得第一目标多媒体页面。

示例性的，该代码可以为：

其中，上述控制台可以是终端的控制台，也可以是其它设备中用于控制终端的控制台。

本申请实施例中，通过执行步骤S101-S104，可以在不同的技术语言边编写工程中，统一使用相同的处理渲染逻辑，可以实现在不同技术语言编写的工程中无需重复实现同样的处理渲染逻辑的效果，可以解决现有技术中存在的若需要在不同的web语言环境中实现统一的富文本内容，代码会存在较大的差异，使得代码的维护成本增高的问题，可以降低代码的维护成本。

本申请实施例中，通过使用svelte编辑富文本，打包成JavaScript文件后，可以支持Vue和React等技术语言编写的工程中引用，能兼容运行在安装有相应的操作系统(例如Android、IOS等操作系统)的终端中的显示页面或该终端安装的APP中的页面。例如，Vue和React等技术语言编写的代码可以打包部署成网站，该终端中安装的APP可以通过webview访问该网站的地址，该终端可以直接访问该网站的地址。

在本申请实施例提供的一种可适用的场景下，渲染设备获得第一目标多媒体页面后，还可以接收相应的数组中的任一数组对应的更改参数。之后，渲染设备可以基于该更改参数，动态改变渲染该任一数组，得到新的第一目标多媒体页面。比如，当自定义模块为自定义投票模块，该更改参数可以是更改投票状态的参数时，渲染设备可以基于接收到的voteElld数组对应的更改参数，动态改变渲染voteElld数组，使得第一目标多媒体页面更改当前显示的投票结果，获得可以显示最新投票结果的新的第一显示多媒体页面。

在本申请实施例提供的另一种可适用的场景下，渲染设备获得第一目标多媒体页面后，还可以接收针对相应的数组中的任一数组对应的定制参数。之后，渲染设备可以基于该定制参数，动态改变渲染该任一数组，得到新的第一目标多媒体页面。若该任一组数组为videoArr数组，该定制参数为打开投屏功能的参数，那么渲染设备可以基于该定制参数，动态改变渲染该任一数组，使得新的第一目标多媒体页面可以显示投屏到终端的页面上内容。

在具体的实现过程中，渲染设备可以只实现上述两种场景中的一个场景，也可以实现上述两种场景，即渲染设备可以支持终端使用默认的页面展示效果，和/或，可以定制相应的页面展示效果。

本申请实施例中，渲染设备可以支持终端实现动态修改相应的数组(组件)的属性，可以支持终端使用默认的页面展示效果，和/或，可以定制相应的页面展示效果，从而满足用户的不同渲染需求。

在一些实施例中，渲染设备可以设置第一目标多媒体页面的样式属性font-size，统一第一目标多媒体页面的样式尺寸与PC端或移动端中的页面的样式尺寸相同。在具体的实现过程中，此统一样式尺寸过程，可以是在步骤S103之前执行，或者，也可以是在步骤S104之前执行，或者，也可以是在步骤S104之后执行，本申请实施例不限定。

本申请实施例中，由于需要实现渲染富文本功能的互联网产品过多，在功能进行更新升级时，要同步到所有互联网产品，难免出现样式不统一、部分功能缺失等问题，通过统一第一目标多媒体页面的样式尺寸与PC端或移动端中的页面的样式尺寸相同，可以确保第一目标多媒体页面在PC和移动端中样式尺寸能够实现统一的效果，从而可以使得不同互联网产品具有整体性，在项目迭代过程中可以避免出现代码遗留的问题，可以降低代码的维护成本。

S105、继续使用当前访问页面用于渲染富文本字符的功能，对第一富文本进行渲染，得到第二目标多媒体页面。

在一些实施例中，渲染设备识别到第一富文本字符与当前富文本字符不相同后，可以继续使用当前访问页面用于渲染富文本字符的功能，对第一富文本进行渲染，得到第二目标多媒体页面。

在具体实现过程中，渲染设备对第一富文本进行渲染所使用的渲染逻辑，和上述渲染设备对第二富文本进行渲染所使用的渲染逻辑相同或者类似，在此不再赘述。

为了更清楚的介绍本申请实施例所提供的富文本的渲染方法的具体实施过程中，下面将结合具体的示例进行介绍。

在一些实施例中，渲染设备可以安装HtmlParser用于执行上述图1所示的富文本的渲染方法。示例性的，渲染设备可以使用npm命令的方式安装HtmlParser。其中，该npm命令可以为：npm i@itouchtv/touchtv-html-parser。

在具体的实现过程中，若渲染设备在Vue或React编写的工程中执行上述图1所示的富文本的渲染方法，渲染设备可以使用import引入HtmlParser，将HtmlParser注册到components，即可使用标签语言运行HtmlParser，如<HtmlParser>，并可以实现设置主要属性styleUnit(样式统一功能)和content(富文本字符)，就可以实现富文本的渲染，以完成渲染页面。

在具体的实现过程中，渲染设备通过安装HtmlParser用于执行上述图1所示的富文本的渲染方法，可以支持API一览，便于编辑富文本。示例性的，如图5所示，可以预览API中的Props配置项。如图6所示，可以预览API中的imageProps配置项。如图7所示，可以预览API中的videoProps配置项。如图8所示，可以预览API中的control配置项。如图9所示，可以预览API中的audioProps配置项。如图10所示，可以预览API中的一种voteProps配置项。如图11所示，可以预览API中的另一种voteProps配置项。

需要说明的是，上述渲染设备可以是上述终端，也可以是与上述终端交互通信的其它设备，本申请实施例不限定。

通过以上描述内容可知，在本申请实施例提供的技术方案中，监听外部传入的第一富文本；进一步的，确定第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；进一步的，若第一富文本字符与当前富文本字符不相同，采用正则表达式结合预设方法处理第一富文本，获得第二富文本，并保存第二富文本；进一步的，对第二富文本进行渲染，获得第一目标多媒体页面。通过这种方式，可以在不同的技术语言边编写工程中，统一使用相同的处理渲染逻辑，可以实现在不同技术语言编写的工程中无需重复实现同样的处理渲染逻辑的效果，可以解决现有技术中存在的若需要在不同的web语言环境中实现统一的富文本内容，代码会存在较大的差异，使得代码的维护成本增高的问题，可以降低代码的维护成本。

基于同一发明构思，本申请实施例还提供一种渲染设备，如图3所示，渲染设备300可以包括：

监听单元301，用于监听外部传入的第一富文本；

处理单元302，用于确定所述第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；若所述第一富文本字符与所述当前富文本字符不相同，采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，并保存所述第二富文本；对所述第二富文本进行渲染，获得第一目标多媒体页面。

在一种可能的设计中，所述监听单元301具体用于：

运用svelte的反应式声明监听外部传入的所述第一富文本。

在一种可能的设计中，所述处理单元302具体用于：

采用transContent参数保存所述第二富文本。

在一种可能的设计中，所述预设方法为JavaScript的字符串replace方法；所述处理单元302具体用于：

对所述第一富文本中的段首空格、空行进行去除处理，获得处理后的第一富文本；

采用所述正则表达式识别所述处理后的第一富文本中的视频、音频、图片的地址协议，以及识别所述处理后的第一富文本中的Video标签、Audio标签、Img标签和自定义模块；

采用所述字符串replace方法将所述地址协议替换为所述当前访问页面的协议，以及将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块分别替换为带有随机id的div标签，并将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id分别保存到相应的数组；

确定经过替换处理后的第一富文本的px值，将所述px值替换为所述当前访问页面支持的rem值，获得所述第二富文本。

在一种可能的设计中，所述相应的数组包括：所述Video标签对应的videoArr数组、所述Audio标签对应的audioArr数组、所述Img标签对应的imgArr数组和所述自定义模块对应的voteElld数组；所述处理单元302具体用于：

使用svelte的HTML内容插入功能，对所述第二富文本进行初次渲染处理，获得处理后的第二富文本；

遍历所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，通过所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id，绑定实例化渲染所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，并为所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组设置属性，获得所述第一目标多媒体页面。

在一种可能的设计中，所述处理单元302还用于：

接收所述相应的数组中的任一数组对应的更改参数；基于所述更改参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面；和/或，

接收针对所述相应的数组中的任一数组对应的定制参数；基于所述定制参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面。

在一种可能的设计中，所述处理单元302还用于：

设置所述第一目标多媒体页面的样式属性font-size，统一所述第一目标多媒体页面的样式尺寸与不同的终端中的页面的样式尺寸相同。

本申请实施例中的渲染设备300与上述图1所示的富文本的渲染方法是基于同一构思下的发明，通过前述对富文本的渲染方法的详细描述，本领域技术人员可以清楚的了解本实施例中渲染设备300的实施过程，所以为了说明书的简洁，在此不再赘述。

基于同一发明构思，本申请实施例还提供一种渲染设备，如图4所示，渲染设备400可以包括：至少一个存储器401和至少一个处理器402。其中：

至少一个存储器401用于存储一个或多个程序。

当一个或多个程序被至少一个处理器402执行时，实现上述图1所示的富文本的渲染方法。

渲染设备400还可以可选地包括通信接口(图4中未示出)，通信接口用于与外部设备进行通信和数据交互传输。

需要说明的是，存储器401可能包含高速RAM存储器，也可能还包括非易失性存储器(nonvolatile memory)，例如至少一个磁盘存储器。

在具体的实现过程中，如果存储器、处理器及通信接口集成在一块芯片上，则存储器、处理器及通信接口可以通过内部接口完成相互间的通信。如果存储器、处理器和通信接口独立实现，则存储器、处理器和通信接口可以通过总线相互连接并完成相互间的通信。

基于同一发明构思，本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质可以存储有至少一个程序，当至少一个程序被处理器执行时，实现上述图1所示的富文本的渲染方法。

应当理解，计算机可读存储介质为可存储数据或程序的任何数据存储设备，数据或程序其后可由计算机系统读取。计算机可读存储介质的示例包括：只读存储器、随机存取存储器、CD-ROM、HDD、DVD、磁带和光学数据存储设备等。

计算机可读存储介质还可分布在网络耦接的计算机系统中使得计算机可读代码以分布式方式来存储和执行。

计算机可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、射频(Radio Frequency，RF)等，或者上述的任意合适的组合。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对申请专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。

Claims (10)

1.一种富文本的渲染方法，其特征在于，包括：

监听外部传入的第一富文本；

确定所述第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；

若所述第一富文本字符与所述当前富文本字符不相同，采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，并保存所述第二富文本；

对所述第二富文本进行渲染，获得第一目标多媒体页面。

2.如权利要求1所述的方法，其特征在于，监听外部传入的第一富文本，包括：

运用svelte的反应式声明监听外部传入的所述第一富文本。

3.如权利要求1所述的方法，其特征在于，保存所述第二富文本，包括：

采用transContent参数保存所述第二富文本。

4.如权利要求1所述的方法，其特征在于，所述预设方法为JavaScript的字符串replace方法；

采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，包括：

对所述第一富文本中的段首空格、空行进行去除处理，获得处理后的第一富文本；

采用所述正则表达式识别所述处理后的第一富文本中的视频、音频、图片的地址协议，以及识别所述处理后的第一富文本中的Video标签、Audio标签、Img标签和自定义模块；

采用所述字符串replace方法将所述地址协议替换为所述当前访问页面的协议，以及将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块分别替换为带有随机id的div标签，并将所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id分别保存到相应的数组；

确定经过替换处理后的第一富文本的px值，将所述px值替换为所述当前访问页面支持的rem值，获得所述第二富文本。

5.如权利要求4所述的方法，其特征在于，所述相应的数组包括：所述Video标签对应的videoArr数组、所述Audio标签对应的audioArr数组、所述Img标签对应的imgArr数组和所述自定义模块对应的voteElld数组；

对所述第二富文本进行渲染，获得第一目标多媒体页面，包括：

使用svelte的HTML内容插入功能，对所述第二富文本进行初次渲染处理，获得处理后的第二富文本；

遍历所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，通过所述Video标签、所述Audio标签、所述Img标签和所述自定义模块各自对应的随机id，绑定实例化渲染所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组，并为所述videoArr数组、所述audioArr数组、所述imgArr数组和所述voteElld数组设置属性，获得所述第一目标多媒体页面。

6.如权利要求4或5所述的方法，其特征在于，对所述第二富文本进行渲染，获得第一目标多媒体页面之后，所述方法还包括：

接收所述相应的数组中的任一数组对应的更改参数；基于所述更改参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面；和/或，

接收针对所述相应的数组中的任一数组对应的定制参数；基于所述定制参数，动态改变渲染所述任一数组，得到新的第一目标多媒体页面。

7.如权利要求1-5任一项所述的方法，其特征在于，所述方法还包括：

设置所述第一目标多媒体页面的样式属性font-size，统一所述第一目标多媒体页面的样式尺寸与不同的终端中的页面的样式尺寸相同。

8.一种渲染设备，其特征在于，包括：

监听单元，用于监听外部传入的第一富文本；

处理单元，用于确定所述第一富文本中的第一富文本字符是否与当前访问页面的当前富文本字符相同；若所述第一富文本字符与所述当前富文本字符不相同，采用正则表达式结合预设方法处理所述第一富文本，获得第二富文本，并保存所述第二富文本；对所述第二富文本进行渲染，获得第一目标多媒体页面。

9.一种渲染设备，其特征在于，包括：至少一个存储器和至少一个处理器；

所述至少一个存储器用于存储一个或多个程序；

当所述一个或多个程序被所述至少一个处理器执行时，实现如权利要求1-7任一项所述的方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有至少一个程序；当所述至少一个程序被处理器执行时，实现如权利要求1-7任一项的方法。

Images