PEG.js是什么?如何使用?比写正则表达式还要强?

2018-11-1511:40:59WEB前端开发Comments2,420 views字数 4565阅读模式

假如有这样一个场景:用户输入一句简单的 sql 查询语句 select name from user , 我们的任务是获取到里面的列名表名。在现有工具下,我们第一个想到的就是正则表达式,熟悉的同学应该能很快写出这样的正则表达式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

/^select\s+([A-Za-z_]*)\s+from\s+([A-Za-z_]*)$/.exec("select name from user")
//["select t from", "name", "user"]
复制代码

完成了之后发现正则表达式稍微有点长,但是整体结构还是蛮简单的。不过仔细测试发现,我们的正则表达式考虑的还不是很周全,例如: select * from user , select user.name from user 这两种情况我们都没考虑到,所以我们还需要完善一下正则表达式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

/^select\s+([A-Za-z_]*|\*|[A-Za-z_]*.[A-Za-z_]*)\s+from\s+([A-Za-z_]*)$/.exec("select user.name from user")
//["select user.name from user", "user.name", "user"]
复制代码

很明显,正则表达式已经比较长了,看过去会有一点眼花,可是,这条正则表达式其实并不完善,例如没有考虑到多列名的情况 select name, age from user ,和多表的情况 select user.name, class.name from user,class ,假如继续扩展下去,我们的正则表达式将会变得十分庞大,并且当别人来修改自己的代码的时候,也会变得十分困难,久而久之,就会变得难以维护。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

我们仔细思考一下上面的流程,其实正则表达式主要帮助我们做了一件事,那就是将一条 sql 语句转化为结构化的数据 ["select t from", "name", "user"] ,从而我们根据结构化的数据来获取自己想要的信息。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

PEG.js是什么?如何使用?比写正则表达式还要强?

这里的正则表达式就是一个用来解析 sql 语句的 parser ,那么有没有一种更加简便可维护的工具能用来编写 parser 呢? PEG.js 就是一个很适合我们的工具。 不过,它和正则表达式还是有一点区别。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

PEG.js是什么?如何使用?比写正则表达式还要强?

PEG.js 是一个 parser generator ,它会将我们用 PEG.js 语法编写的 sql 语法文件转化为可以直接运行的 parser , 而我们也是通过这个parser去解析 sql 语句。所以我们的工作就是编写 sql 语法文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

安装

首先,我们将 PEG.js 安装到全局下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

npm install -g pegjs
复制代码

安装好了可以验证一下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

$ pegjs -v
PEG.js 0.10.0
复制代码

然后我们在新建一个目录用来存放我们代码。本文的结构如下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

PEG.js是什么?如何使用?比写正则表达式还要强?

peg文件夹用来存放我们的语法文件, dist 文件夹用来存放我们生成的 parser。创建完项目之后,我们下面就开始来正式使用 PEG.js 来解析 sql。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

开始使用

首先,我们先确定一下我们要实现的 select 语句,本文为了便捷,不会编写完善的语法文件,所以这里以最简单的 select 语句为例子。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

select
    column_name | *
from
    table_name;
复制代码

开始编写 PEG 文件

在 PEG.js 文件的开头,我们来写下第一个规则 ,PEG.js 默认从第一个规则开始解析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

start
= selectStatement
复制代码

这里我们定义了一个 start 规则,而这个 start解析表达式由一个 selectStatement 规则组成,而这个 selectStatement 就是我们刚刚定义的 select 语句了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

那么按照我们之前的定义,selectStatement 又由什么组成呢?文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

经过一些思考,我们应该能写下以下规则文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

selectStatement
= select colunm_clause from table_name ';'
复制代码

selectStatement 的解析表达式由5个部分组成,其中,';'代表一个分号字符串,来代表一条 sql 语句的结尾,而其他4个则代表 selectStatement 解析表达式的四个组成部分。所以,我们只要从 selectStatement 开始自顶向下 ,为每一个规则添加解析表达式就好了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

selectStatement
= select colunm_clause from table_name ';'

colunm_clause
= column_name
/ '*'

column_name
= ident_part+

table_name
= ident_part+

ident_part
= [A-Za-z0-9]

select
= 'select'i

from
= 'from'i
复制代码

这里 colunm_clause 的解析表达式有一个 / ,它代表 的意思,意思是 colunm_clause 是由 column_name 或者 一个 * 组成。 除此之外,还可以发现,有很多语法和 JS 的正则表达式是相似的,比如文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

  • [A-Za-z0-9]
  • ident_part+
  • 'from'i

分别代表的意思是文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

  • 匹配字母和数字
  • 匹配1个或多个 ident_part 规则
  • 忽略 from 的大小写

编写完了之后我们尝试将这个语法文件编译成 JS 可以使用的 parser文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

pegjs -o dist/selectParser.js peg/select.peg
复制代码

我们这里指定了一个编译输出文件 dist/selectParser.js 和待编译的语法文件 peg/select.peg ,运行结束后,我们可以在 dist 文件夹中看见看见我们的 parser 文件 selectParser.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

生成 parser 文件之后就是使用它了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

const selectParser=require("./dist/selectParser.js");
console.log(selectParser.parse("select name from user;"))
复制代码

这里调用了 parser 文件的 parse 方法来开始解析,不过,我们却得到了一个错误文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

> node index.js
SyntaxError: Expected "*" or [A-Za-z0-9] but " " found.
复制代码

这里的意思是,parser希望收到 "*"[A-Za-z0-9] ,不过却得到了一个空字符串。回到我们的语法解析文件开头文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

selectStatement
= select colunm_clause from table_name ';'
复制代码

只有 colunm_clause 是由 "*"[A-Za-z0-9] 组成的,那看来是 parser 把我们的输入 select name from user;selectname 中间的空格当作 colunm_clause 来解析了,导致报错,所以我们需要再完善一下原来的语法文件,加入空格的解析。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

selectStatement
= select _ colunm_clause _ from _ table_name __ ';'

__ 
= whitespace*
_ 
= whitespace+

whitespace
= [ \t\r\n];
复制代码

现在我们再次编译运行,我们得到了正确的输出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

> node index.js
[ 'select',
  [ ' ' ],
  [ 'n', 'a', 'm', 'e' ],
  [ ' ' ],
  'from',
  [ ' ' ],
  [ 'u', 's', 'e', 'r' ],
  [],
  ';' 
]
复制代码

现在结构是解析出来了,不过,展示上却不是非常的美观,比如 nameuser 被拆分成了字符数组,这是因为我们在 table_namecolumn_name 中使用了 + ,所以输出的时候,也会变成数组输出;还有,我们其实并不需要空白字符,但是结果里却也包含了它 [ ' ' ]。因此,我们需要再处理一下匹配的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

selectStatement
= select _ colunm_clause:colunm_clause _ from _ table_name:table_name __ ';'{ return `column_name=${colunm_clause}, table_name=${table_name}`}

column_name
= name:ident_part+ {return name.join("")}

table_name
= name:ident_part+ {return name.join("")}
复制代码

这里我们用到了 PEG.js 的 action ,我们可以在 aciton 里面写 JS 代码,它会在规则匹配成功的时候执行,同时,我们也给规则取了名字(例如 name:ident_part+ 中的 name),以便于我们在 action 中使用。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

现在,再次运行编译执行过程,不出意外,我们可以得到以下输出文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

> node index.js
column_name=name, table_name=user
复制代码

这样,一个最最基础的 select 语句解析就完成了~我们可以锦上添花,让它支持多条 sql 语句。完整代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

PEG文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

start
= selectStatements:selectStatement* 
{ 
    return selectStatements.join("\n")
}

selectStatement
= select _ colunm_clause:colunm_clause _ from _ table_name:table_name __ ';'{ return `column_name=${colunm_clause}, table_name=${table_name}`}

colunm_clause
= column_name
/ '*'

column_name
= name:ident_part+ {return name.join("")}

table_name
= name:ident_part+ {return name.join("")}

ident_part
= [A-Za-z0-9]

select
= 'select'i

from
= 'from'i

__ = whitespace*
_ = whitespace+

whitespace
= [ \t\r\n];

复制代码

JS文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

const addParser=require("./dist/addParser.js");
const selectParser=require("./dist/selectParser.js");
const sqls=[
    'select * from user;',
    'select name from user;',
    'select id from user;'
].join("")
console.log(selectParser.parse(sqls))
复制代码

运行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

> node index.js
column_name=*, table_name=user
column_name=name, table_name=user
column_name=id, table_name=user
复制代码

回过头来,我们发现,借助 PEG.js 编写的 parser 很容易维护,整个语法的描述都是有结构的,并且借助于 action ,我们可以很方便的返回我们所需要的结构。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

和正则表达式相比,唯一的缺点就是 PEG.js 生成的 parser 更占空间,加载上相对慢一些,不过,我们开发效率和代码的可维护性也有了比较大的提升,综合比较下, PEG.js 还是一个很不错的解决方案。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

作者:HSunboy
来源:掘金文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/7867.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/7867.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定