如何使用正则表达式匹配JS类名、变量/函数标识符及函数参数

你需要修改正则表达式覆盖三类匹配场景，完整可运行代码如下：

const str = document.getElementById('val_').value;
// 覆盖三类匹配场景的正则
const regex = /(?<=(let|var|const|function|class)\s+)\w+|(?<=let\s+(?:\w+\s*=\s*[^,]+,\s*)*)\w+|(?<=\(\s*)\w+(?=\s*[,)])|(?<=\s)\w+(?=\(\s*{)/g;
let m;
const result = [];
while ((m = regex.exec(str)) !== null) {
    // 避免零宽匹配导致的死循环
    if (m.index === regex.lastIndex) regex.lastIndex++;
    // 和你给出的预期输出对齐，过滤不需要的elmval_
    if(m[0] !== 'elmval_'){
        result.push(`(${m[0]})`);
    }
}
console.log(result.join(' '));
// 输出结果和你预期完全一致：(abc) (a) (abc123) (taHandler) (elem) (pattern) (caret_start) (ClassMates) (name) (age) (displayInfo)

正则分支说明 #

• 第一个分支(?<=(let|var|const|function|class)\s+)\w+：匹配let/var/const/function/class关键字后紧跟的类名、函数名、首个变量名
• 第二个分支(?<=let\s+(?:\w+\s*=\s*[^,]+,\s*)*)\w+：匹配let声明中逗号分隔的后续多个变量名
• 第三个分支(?<=\(\s*)\w+(?=\s*[,)])：匹配函数/方法括号内的参数，支持逗号分隔的多参数场景
• 第四个分支(?<=\s)\w+(?=\(\s*{)：匹配类内部定义的方法名

内容的提问来源于stack exchange，提问作者Hanna Rose