Javascript正则解析出代码的函数体
Javascript正则解析代码的函数体
How to use regex to capture and extract “class/function” context in source code
在做软件工程研究时，我们通常会遇到处理代码片段的问题。
最近在研究上遇到一个问题：如何抽取Solidity代码中的contract和function内容？
前期准备
- regex正则表达式基础
- node.js或其他运行js的平台（前端）
遇到的问题
- 多层嵌套的花括号
{{{{}}}} - 引号里的字符串，尤其是字符串还带有了
{}()等本来需要匹配的特殊字符 - 中文，或非ASCII码
- 注释中的花括号，引号等影响
第一步
首先我们需要先处理掉代码中的注释部分，因为这部分如果不去除，后面在使用正则解析时会遇到非常多奇奇怪怪的字符。
去除注释方法如下：
function clearCode(sources) {
// merge files
let code = ''
for (const i in sources) code += sources[i].content
// remove commments
code = code.replace(/(\/\*[\s\S]*?\*\/)|((?/g, '')
// remove import
code = code.replace(/import.*;/g, '')
// remove pragma
code = code.replace(/pragma.*;/g, '')
return code.trim()
}
这里实际使用的一行正则是：(\/\*[\s\S]*?\*\/)|((?；
注意下，这里排出了各种可能出现的://，因为代码中容易出现类似http://, ftp://这类字符串；
另外上述方法删除了Sol文件的前缀信息，包括pragma编译版本，import引入合约等。
第二步
第二步，我们需要使用base64来mask引号内容，也就是代码中的字符串，防止字符串里的特殊字符影响接下来的正则匹配。
// to mask string with '...', "..."
hashStr(text, flag = true) {
if (flag) {
const reg = /("[^"]*")|('[^']*')/g
text = text.replace(reg, s => `"${this.encode(s)}"`)
} else {
const reg = /"[^"]*"/g
text = text.replace(reg, s => this.decode(s.slice(1).slice(0, -1)))
}
return text
}
encode(text) {
return btoa(unescape(encodeURIComponent(text)))
}
decode(text) {
return decodeURIComponent(escape(atob(text)))
}
函数hashStr作用是遮掩（mask）掉代码文本中的所有字符串，思路是连带引号一起转换为base64码。
注意，base64前需要使用encode，这是因为你很可能遇到字符串中是UTF8编码内容，base64默认只支持latin（ASCII），反之解码base64之后，也需要decode出文本。这是一个常见的坑，需要注意⚠️。
hashStr关键的正则为：
hash时：("[^"]*")|('[^']*')；
反向hash时："[^"]*"
反向时仅匹配"是因为我在base64后，统一用双引号highlight出这些base64，为的是方便反向解码时容易匹配到。
第三步
最后，我们可以放心使用如下超长超长的regex进行capture啦，抓取contract和function内容吧。
获取class/contract
getContracts(text) {
text = this.hashStr(text)
const reg =
/(^|\s)(contract|interface|library|abstractcontract)\s[^;{}]*{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{[^{}]*})*})*})*})*})*})*})*})*})*}/g
const res = text.match(reg) || []
for (const i in res) res[i] = this.hashStr(res[i].trim(), false)
return res
}
获取functiion
getFunctions(text) {
text = this.hashStr(text)
const reg =
/(^|\s)((function|event)\s|constructor\s*\(.*\))[^{};]*({(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{[^}{]*})*})*})*})*})*})*})*})*}|;)/g
const res = text.match(reg) || []
for (const i in res) res[i] = this.hashStr(res[i].trim(), false)
return res
}
注意，regex本身是不支持多层嵌套的，这里勉强采用手动嵌套的方式来匹配嵌套的花括号。
getContracts支持10层嵌套，regex是：(^|\s)(contract|interface|library|abstractcontract)\s[^;{}]*{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{(?:[^{}]+|{[^{}]*})*})*})*})*})*})*})*})*})*}
getFunctions支持9层嵌套，regex是：(^|\s)((function|event)\s|constructor\s*\(.*\))[^{};]*({(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{(?:[^}{]+|{[^}{]*})*})*})*})*})*})*})*})*}|;)
如需超出预设层数，js会出现timeout，可以自行添加层数
补充
同时，为了方便获得函数名，类名，这里还给出一套方法：
nWord(str, n) {
if (typeof n === 'number') {
const m = str.match(new RegExp('^(?:\\w+\\W+){' + n + '}(\\w+)'))
return m && m[1]
} else if (n.length) {
const arr = []
for (const i of n) arr.push(this.nWord(str, i))
return arr
}
},
getContractName(contractCode) {
const words = this.nWord(contractCode, [0, 1, 2])
if (words[0] === 'abstract') return words[2]
else return words[1]
},
getFunctionName(functionCode) {
const words = this.nWord(functionCode, [0, 1])
if (words[0] === 'constructor') return words[0]
else return words[1]
}
nWord函数可以获取第n个单词，getContractName获得合约/类名，getFunctionName获取方法名。
以上所有步骤结合，就可以获取方法，类的内容，名称。
结合echarts插件还可以构建函数树。
开发中，regex常用工具网站：
工具一：可以显示regex的流程规则图
https://www.debuggex.com/
工具二：在线调试regex和需要匹配的样本文件
https://regexr.com/
