阅读说明：本技术 一种代码转换方法、设备和存储介质 (Code conversion method, equipment and storage medium ) 是由 蔡亮 张帅 李伟 匡立中 邱炜伟 于 2020-04-09 设计创作，主要内容包括：本发明提供本发明提供一种代码转换方法、设备和存储介质,包括：将第一源代码中所有以双斜杠“//”开头,以换行结尾的代码删除后并生成第一文本；将第一文本中所有的空格字符删除后生成第二文本；判断第一文本中左右花括号数量是否相等：是,则顺序遍历第二文本,根据匹配的花括号类型执行对应的操作以生成节点树；根据节点树按照设定的层级、缩进规则生成第二代码。本发明根据不同的花括号类型做出不同的操作,以供构造节点树,并根据节点树按照相应的规则快速直接生成第二代码。(The invention provides a code conversion method, a device and a storage medium, comprising the following steps: deleting all codes beginning with a double slash '//' and ending with line feed in the first source code and generating a first text; deleting all space characters in the first text to generate a second text; judging whether the quantity of the left curly braces and the quantity of the right curly braces in the first text are equal: if yes, traversing the second text in sequence, and executing corresponding operation according to the matched curly brace type to generate a node tree; and generating a second code according to the node tree and the set hierarchy and indentation rule. The invention makes different operations according to different curly brace types so as to construct the node tree, and the second code is quickly and directly generated according to the node tree and the corresponding rule.)

一种代码转换方法、设备和存储介质

技术领域

本申请涉及计算机技术领域，具体涉及一种代码转换方法、设备和存储介质。

背景技术

在前端领域，使用标准CSS时，要为多层嵌套的元素定义样式，要么使用后代选择器从外到内的嵌套定义，要么给这个元素加上类名或id来定义。这样的写法虽然简单，但维护起来很不方便，原因在于CSS语法分散，无法清晰了解到样式之间的层级和关联。因此诞生了Less这样的语言，它是一种CSS预处理器，可以允许你使用嵌套的语法定义样式。在Less中，嵌套规则使得CSS语法分散，层级不清晰这样的问题迎刃而解。嵌套规则允许在一个选择器中嵌套另一个选择器，这更容易设计出精简的代码，并且样式之间的关系一目了然，而且在相应的html代码中，Less层级和html层级对应关系也更明确，在维护和修改代码时，能更快速的定位。

但是，在编写CSS代码或Less代码时，还需再手动编写相应的html代码，我们可以利用Less的代码规则，自动生成相对应的html代码，减少工作量。但目前还没有能将Less代码转换成相应html代码的方法。

发明内容

鉴于现有技术中的上述缺陷或不足，期望提供一种简单有效的代码转换方法、设备和存储介质。

第一方面，本发明提供一种代码转换方法，包括：

将第一源代码中所有以双斜杠“//”开头，以换行结尾的代码删除后并生成第一文本；

将第一文本中所有的空格字符删除后生成第二文本；

判断第一文本中左右花括号数量是否相等：

是，则顺序遍历第二文本，根据匹配的花括号类型执行对应的操作以生成节点树；

根据节点树按照设定的层级、缩进规则生成第二代码。

进一步，将第一源代码中所有以双斜杠“//”开头，以换行结尾的代码删除后并生成第一文本，包括：

通过第一正则表达式/\/\/.*\n/识别第一源代码中所有双斜杠“//”开头，以换行结尾的代码，删除后生成第一文本；其中，\/代表匹配一个左斜杠；.代表一个任意字符；*代表匹配次数，0次或n次，.*即代表匹配不确定数目的任意字符；\n代表换行字符，即一行的结尾。

进一步，将第一文本中所有的空格字符删除后生成第二文本，包括：

通过第二正则表达式/\s+/识别第一文本中空格字符，删除后生成第二文本；其中，s代表匹配一个空格字符；+代表匹配次数，匹配一次或多次，则\s+代表匹配任意长度的连续空格。

进一步，根据匹配的花括号类型执行对应的操作以生成节点树，包括：

配置一根节点压入栈底；根节点包括节点类型、节点名称、节点值和子节点列表；

判断匹配的花括号类型：

若类型为左花括号，则生成第一节点后压入堆栈；

若类型为右花括号，则将堆栈中的当前节点推出后作为下一节点的子节点，并放入下一节点的子节点列表；

遍历第二文本直到遍历完所有的花括号。

进一步，根据节点树按照设定的层级、缩进规则生成第二代码，包括：

获取节点树的根节点的信息，根据节点类型，节点名，节点值，创建一个html的父标签；

根据子节点列表的若干子节点的信息生成对应的若干html子标签，并依次放置在父标签内；

根据每个层级，按照设定的缩进规则对各html的标签进行填充后生成第二代码，即html代码。

进一步，第一源代码为Less代码和/或Scss代码。

第二方面，本发明还提供一种设备，包括一个或多个处理器和存储器，其中存储器包含可由该一个或多个处理器执行的指令以使得该一个或多个处理器执行根据本发明各实施例提供的代码转换方法。

第三方面，本发明还提供一种存储有计算机程序的存储介质，该计算机程序使计算机执行根据本发明各实施例提供的代码转换方法。

本发明诸多实施例提供的一种代码转换方法、设备和存储介质通过将第一源代码转换成无空格字符的代码文本后，根据不同的花括号类型做出不同的操作，以供构造节点树，并根据节点树按照相应的规则快速直接生成第二代码。

附图说明

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

图1为本发明一实施例提供的一种代码转换方法的流程图。

图2为图1所示一优选实施例生成的节点树结构图。

图3为图1所示方法一优选实施方式中步骤13的场景示意图。

图4为本发明一实施例提供的一种设备的结构示意图。

具体实施方式

下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例仅仅用于解释相关发明，而非对该发明的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与发明相关的部分。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

图1为本发明一实施例提供的一种代码转换方法的流程图。

如图1所示，在本实施例中，本发明提供一种代码转换方法，包括：

S11、将第一源代码中所有以双斜杠“//”开头，以换行结尾的代码删除后并生成第一文本；

S12、将第一文本中所有的空格字符删除后生成第二文本；

S13、判断第一文本中左右花括号数量是否相等：

是，则顺序遍历第二文本，根据匹配的花括号类型执行对应的操作以生成节点树；

S14、根据节点树按照设定的层级、缩进规则生成第二代码。具体地，以下面less源代码为例：

将第一源代码中所有以双斜杠“//”开头，以换行结尾的代码删除后并生成第一文本；如下：

将第一文本中所有的空格字符删除后生成第二文本；如下：.common-select-wraper{position:relative；.common-select-search{cursor:pointer；font-size:16px；position:absolute；top:50％；margin-top:-8px；}.common-select{cursor:initial；}p{height:32px；line-height:31px；font-size:14px；}}

如上述第二文本所示，左花括号数量(4个)与右花括号数量(4个)一致，则顺序遍历第二文本，根据匹配的花括号类型执行对应的操作以生成节点树，如图2所示。

最后根据节点树按照设定的层级、缩进规则生成第二代码，即：

需要说明的是，本方法中的第一语言代码适用于大多数程序语言，如JavaScript，less，css，Scss等，根据具体语言的属性的不同，使得有些语言在转换成html的语言后并不能很好的实现需要的功能，本方法对于less语言和Scss语言是较优的选择。

进一步优选地，将第一源代码中所有以双斜杠“//”开头，以换行结尾的代码删除后并生成第一文本，包括：

通过第一正则表达式/\/\/.*\n/识别第一源代码中所有双斜杠“//”开头、以换行结尾的代码，删除后生成第一文本；其中，\/代表匹配一个左斜杠；.代表一个任意字符；*代表匹配次数，0次或n次，.*即代表匹配不确定数目的任意字符；\n代表换行字符，即一行的结尾。

通过上述第一正则表达式，匹配第一源代码中所有以双斜杠“//”开头，换行结尾的代码替换掉以生成上述第一文本。

进一步优选地，步骤S11中将第一文本中所有的空格字符删除后生成第二文本，包括：

通过第二正则表达式/\s+/识别第一文本中空格字符，删除后生成第二文本；其中，s代表匹配一个空格字符；+代表匹配次数，匹配一次或多次，\s+即代表匹配任意长度的连续空格。通过该正则表达式生成不含空格字符的第二文本，为后续的匹配判断做准备。

在更多实施例中，步骤S13中根据匹配的花括号类型执行对应的操作以生成节点树，包括：

S131、配置一根节点压入栈底；根节点包括节点类型、节点名称、节点值和子节点列表；

S132、判断匹配的花括号类型：

若类型为左花括号，则生成第一节点后压入堆栈；

若类型为右花括号，则将堆栈中的当前节点推出后作为下一节点的子节点，并放入下一节点的子节点列表；

遍历第二文本直到遍历完所有的花括号。

具体地，以上述第二文本为例，首先，先配置一个根节点，如：

type:'id',

value:'root',

nodeName:'div',

child:[]

根节点信息可包括：节点类型type，节点名nodeName，节点值value，子节点列表child[]，并将该对象节点压入堆栈。

在一优选实施方式中，

节点类型的判断依据可以为以下几种：1.如果匹配到的文本是以“.”字符开头，则节点类型为从环境中获取到的默认配置项(配置项一般设置为class或className)；2.如果匹配到的文本以“#”字符开头，则节点类型为id；3.如果匹配到的文本以&开头，则节点类型设置为reverse；4.如果上述规则都不适用，则把节点类型设置为tag)。

节点值的配置方法为：匹配到的左花括号之前的内容并去掉.#&字符，例如匹配到.common-select-wraper{，则节点值为common-select-wraper)。

节点名的配置方法为：1.判断节点类型是不是tag，如果是则节点值为左花括号前的内容，例如p{，节点名为p；2.如果节点类型不是tag，则节点名为为从环境中获取到的默认配置项(一般设置为div))使用正则表达式匹配右花括号。

如图3所示，遍历第二文本的第一个花括号为左花括号，此时，生成节点A，并压入堆栈，继续遍历第二文本，匹配到的下一个花括号仍为左花括号，则生成节点B，并压入栈堆；继续遍历第二文本，匹配到的下一个花括号为右花括号，此时，将节点B从堆栈里推出，推出后，最新的节点为节点A，将节点B加入节点A的子节点列表中，继续遍历第二文本，匹配到的下一个花括号仍为左花括号，则生成节点C，并压入栈堆……，直到最后匹配最后一个花括号为右花括号，则将节点A(子节点为B,C,D)加入到根节点root的子节点列表中，最终生成图2所示的节点树。

在一优选实施方式中，匹配的表达式为：

/([.#][-\w:()@,]+[{])|(&.*？[{])|([a-z]+[{])|}|{/：其中，该正则表达式有四个分支条件，每一个条件使用()包裹，并使用|分割

1、[.#]代表匹配一次.字符或一次#字符；

[-\w()@,]+代表匹配一次或多次-，\w，(，)，@，,字符

[{]代表匹配一次{

2、&代表以&字符开头,

.*？代表尽可能少的匹配任意字符

[{]代表匹配一次{

3、[a-z]+标识匹配一次或多次任意小写字母

[{]代表匹配一次{

4、{代表匹配一次{

在更多实施例中，步骤S14中所述的根据节点树按照设定的层级、缩进规则生成第二代码，包括：

S141、获取节点树的根节点的信息，根据节点类型，节点名，节点值，创建一个html的父标签；

S142、根据子节点列表的若干子节点的信息生成对应的若干htmlL子标签，并依次放置在父标签内；

S143、根据每个层级，按照设定的缩进规则对各html的标签进行填充后生成第二代码，即html代码。

具体地，过滤节点类型为reverse之后，再递归遍历该树，遍历时，每个节点生成一个html节点，然后每个节点按照对应的层级，生成对应的缩进，递归遍历指把一个节点的全部子节点遍历一遍，如果子节点还有子节点，那就把子节点的子节点再遍历，直到子节点为空为止。生成规则如下所示

1.`\n${″.repeat(level*4)}<${nodeName}${type！＝＝'tag'？`${type}＝'${value}'`:″}>\n${″.repeat(level*6)}\n${″.repeat(level*4)}</${nodeName}>`；

其中：

\n${″.repeat(level*4)}表示每一行前面都插入一个换行，然后再插入对应层级4倍的空格，level是递归遍历中的层级，层级每加一，空格数就多4；

2.下列规则生成节点的开始标签，${nodeName}的占位变量会被节点中的变量替换；

<${nodeName}${type！＝＝'tag'？`${type}＝'${value}'`:″}>

需要说明的是，${type！＝＝'tag'？`${type}＝'${value}'`:″}表达的意思是如果节点类型是tag，那标签内什么也不填充，如果节点类型不是tag，那标签内就填充节点类型＝节点值；

以下列节点为例，套用上面规则：

生成的结果为

<div class＝'common-select-search'>

以下列节点为例,套用上面规则，

生成结果

<p>

3.下列规则表示先填充换行，然后填充对应层级6倍空格，再填充换行，填充对应层级4倍空格

\n${″.repeat(level*6)}\n${″.repeat(level*4)}

4.下列规则生成节点的结束标签

</${nodeName}>`；

将每一个节点按照上述规则生成html，会得到下列结果：

图4为本发明一实施例提供的一种设备的结构示意图。

如图4所示，作为另一方面，本申请还提供了一种设备400，包括一个或多个中央处理单元(CPU)401，其可以根据存储在只读存储器(ROM)402中的程序或者从存储部分408加载到随机访问存储器(RAM)403中的程序而执行各种适当的动作和处理。在RAM403中，还存储有设备400操作所需的各种程序和数据。CPU401、ROM402以及RAM403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。

以下部件连接至I/O接口405：包括键盘、鼠标等的输入部分406；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分407；包括硬盘等的存储部分408；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分409。通信部分409经由诸如因特网的网络执行通信处理。驱动器410也根据需要连接至I/O接口405。可拆卸介质411，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器410上，以便于从其上读出的计算机程序根据需要被安装入存储部分408。

特别地，根据本公开的实施例，上述任一实施例描述的代码转换方法可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括有形地包含在机器可读介质上的计算机程序，所述计算机程序包含用于执行代码转换方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分409从网络上被下载和安装，和/或从可拆卸介质411被安装。

作为又一方面，本申请还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例的装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，该程序被一个或者一个以上的处理器用来执行描述于本申请的代码转换方法。

附图中的流程图和框图，图示了按照本发明各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这根据所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以通过执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以通过专用硬件与计算机指令的组合来实现。

描述于本申请实施例中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，例如，各所述单元可以是设置在计算机或移动智能设备中的软件程序，也可以是单独配置的硬件装置。其中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定。

以上描述仅为本申请的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本申请中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离本申请构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本申请中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。