实现代码提取功能的思路

1.前言

在JavaScript中，提取代码片段通常有多种方法，具体取决于你的需求。比如，如果你想从一个较大的代码字符串中提取特定的函数、变量声明或其他代码结构，可以使用正则表达式、抽象语法树等技术。

2.使用正则表达式

正则表达式是一种在文本中查找匹配字符串的方法。对于简单的代码提取任务，如提取函数定义、变量声明等，正则表达式可能足够用。但是，对于复杂的代码结构（如嵌套结构），正则表达式可能会变得复杂且容易出错。

示例：提取函数定义

//index.js
const code = `function add(a, b) {
    return a + b;
}
 
function subtract(a, b) {
    return a - b;
}
`;
 
const functionRegex = /function\s+([^\s(]+)\s*\(([^)]*)\)\s*\{([^}]+)\}/g;
let match;
const functions = [];
 
while ((match = functionRegex.exec(code)) !== null) {
    functions.push({
        name: match[1],
        params: match[2].split(',').map(p => p.trim()),
        body: match[3].trim()
    });
}
 
console.log(functions);

运行node index.js:

3.使用抽象语法树（AST）

抽象语法树（AST）是源代码的抽象语法结构的树状表现形式，它以树状形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一个结构。使用AST可以更精确地解析和操作代码。在JavaScript中，你可以使用acorn库来解析代码并构建AST，然后使用estraverse库来遍历AST。

首先，需要安装acorn和estraverse：

npm install acorn estraverse

然后，可以使用以下代码提取函数定义：

const acorn = require("acorn");
const estraverse = require("estraverse");

const code = `function add(a, b) {
    return a + b;
}
 
function subtract(a, b) {
    return a - b;
}
`;

const ast = acorn.parse(code, { ecmaVersion: 2020 }); // 使用最新的ECMAScript版本
const functions = [];

estraverse.traverse(ast, {
  enter(node) {
    if (node.type === "FunctionDeclaration") {
      console.log(node.body.body[0]);
      functions.push({
        name: node.id.name,
        params: node.params.map((param) => param.name),
        body: node.body.body
          .map((bodyNode) =>
            bodyNode.type === "ReturnStatement"
              ? bodyNode.argument.left.name +
                bodyNode.argument.operator +
                bodyNode.argument.right.name
              : ""
          )
          .join("\n"), // 简化处理，实际可能需要更复杂的处理方式来重构body内容
      });
    }
  },
});

console.log(functions);