JavaScript奇淫技巧：命令行语法高亮

真身法界2022-08-17 10:51

JavaScript奇淫技巧：命令行语法高亮

本文，将实现命令行输出带有语法高亮、带行号的JS代码。

效果如下图所示：

 

对于JS程序员而言，这个效果是有些惊喜的。

而实现起来，却似乎是出乎意料的简单。

直接上源码：

var js_code = `

function get_copyright(){

var domain = "jshaman.com";

var from_year = 2017;

var copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;

return copyright;

}

console.log(get_copyright());

`;

//高亮显示代码

const { codeFrameColumns } = require('@babel/code-frame');

const res = codeFrameColumns(js_code, {}, {

highlightCode: true,

});

console.log(res);

由代码可见，仅仅是使用@babel/code-frame这个NodeJS模块即可直接实现高亮语法。

本着“知其然，知其所以然”的理念，我们再深入探究一下实现语法高亮的原理。

首先，是进行语法分析，从JS代码分离出不同的关键字。

在这一步，可以使用babel的parser获得代码的AST（抽象语法树），再遍历AST进行分析取词。

例如获得变量名、函数名的方式如下：

var parser = require('@babel/parser');

var traverse = require('@babel/traverse').default;

//获得抽象语法树

var ast = parser.parse(js_code);

//遍历语法树

traverse(ast, traverse(ast,{

//函数

"FunctionDeclaration"(path){

var fun_name = path.node.id.name;

console.log("函数名：",fun_name);

},

//变量

"VariableDeclaration"(path){

var var_name = path.node.declarations[0].id.name;

console.log("变量名：",var_name);

},

}));

console.log(js_code)

注：语法分析也有其它办法，比如用正则等。

接着上面的思路，当获得变量名、函数名之后，接下来即可对其进行着色。

写着色功能之前，先来看行代码：

console.log('\u001b[31m JShaman专注于JS代码混淆加密 \u001b[0m');

它会输出带颜色的信息，如下图：

 

为什么看似有些乱码的console执行时会出现彩色的文字呢？

解释是这样的：

The original specification only had 8 colors, and just gave them names. The SGR parameters 30-37 selected the foreground color, while 40-47 selected the background. Quite a few terminals implemented "bold" (SGR code 1) as a brighter color rather than a different font, thus providing 8 additional foreground colors. Usually you could not get these as background colors, though sometimes inverse video (SGR code 7) would allow that. Examples: to get black letters on white background use ESC[30;47m, to get red use ESC[31m, to get bright red use ESC[31;1m. To reset colors to their defaults, use ESC[39;49m (not supported on some terminals), or reset all attributes with ESC[0m.

大意是：“\u001b”是一个特殊的转意字符，遵从一定的规则，可以用来设置文字或背景颜色。

上面代码中，前面的\u001b[31m用于设定SGR颜色，后面的\u001b[0m相当于一个封闭标签作为前面SGR颜色的作用范围的结束点标记。

有了这个知识储备后，我们就可以继续前面的工作。

当从JS代码中进行分词之后，将代码用此方法进行改造，即可使语法高亮。

 

运行效果：

 

至此，便已得知了命令行语法高亮的全部秘密。

最后，奉上本示例完整源码：

var js_code = `

function demo(){

var domain = "jshaman.com";

var from_year = 2017;

var copyright = "(c)" + from_year + "-" + (new Date).getFullYear() + "," + domain;

return copyright;

}

console.log(demo());

`;

//高亮显示代码

const { codeFrameColumns } = require('@babel/code-frame');

const res = codeFrameColumns(js_code, {}, {

highlightCode: true,

});

console.log(res);

var parser = require('@babel/parser');

var traverse = require('@babel/traverse').default;

//获得抽象语法树

var ast = parser.parse(js_code);

//遍历语法树

traverse(ast, traverse(ast,{

//函数

"FunctionDeclaration"(path){

var fun_name = path.node.id.name;

console.log("函数名：",fun_name);

js_code = js_code.replace(fun_name,"\u001b[32m" + fun_name + "\u001b[0m");

},

//变量

"VariableDeclaration"(path){

var var_name = path.node.declarations[0].id.name;

console.log("变量名：",var_name);

js_code = js_code.replace(var_name,"\u001b[31m" + var_name + "\u001b[0m");

},

}));

console.log(js_code)

JavaScript奇淫技巧：按键精灵https://www.toutiao.com/i7084507716579770914/?group_id=7084507716579770914

JavaScript奇淫技巧：收缩控制流https://www.toutiao.com/i7078233691402732044/?group_id=7078233691402732044

JavaScript奇淫技巧：变速齿轮https://www.toutiao.com/i7082323208803893767/?group_id=7082323208803893767

JavaScript奇淫技巧：隐写术https://www.toutiao.com/i7072893767174799886/?group_id=7072893767174799886

JavaScript奇淫技巧：压缩并加密图片https://www.toutiao.com/i7069950927884681739/?group_id=7069950927884681739

JavaScript奇淫技巧：用try、catch实现JS代码加密解密https://www.toutiao.com/i7131872720517628416/?group_id=7131872720517628416