如何可靠提取JSX元素属性？Python正则处理复杂场景遇困惑

为什么正则行不通？ #

你遇到的问题本质是正则无法处理嵌套、上下文相关的语法结构，JSX的属性场景完全命中了正则的短板：

• 字符串插值：比如className={btn ${isActive ? 'active' : ''}}，正则的[^'"\}]+会在第一个}就停止匹配，拿不到完整的插值内容。
• 嵌套结构：像style={{ color: 'red', padding: { top: 10 } }}这种嵌套对象属性，正则无法识别嵌套的大括号层级，会错误截断。
• 回调与复杂表达式：比如onClick={() => { handleClick(); setVisible(false); }}，回调里的代码块包含大括号、分号等符号，会直接破坏正则的简单匹配规则。
• JSX与JS混合：在条件渲染、循环里的嵌套JSX，正则会把内部的JSX标签当成普通文本，无法区分上下文。

可靠的解决方案：基于AST解析 #

要准确提取JSX元素的所有属性，必须用**抽象语法树（AST）**解析工具，这类工具能完整理解JSX的语法结构，而不是靠字符串匹配。

最成熟的方案是基于Babel生态：

1. 用@babel/parser把JSX代码解析成AST，它原生支持JSX语法。
2. 用@babel/traverse遍历AST，定位到所有JSXElement节点。
3. 从节点的openingElement.attributes中直接获取所有属性，每个属性都有明确的类型标识（比如普通属性JSXAttribute、展开属性JSXSpreadAttribute），值的类型也清晰区分（字符串StringLiteral、动态表达式JSXExpressionContainer等）。

示例代码：

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

// 你的JSX代码示例
const jsxCode = `
<Button 
  onClick={() => { handleClick(); setVisible(false); }} 
  disabled={isDisabled} 
  className="btn"
  style={{ color: 'red', padding: { top: 10 } }}
/>
`;

// 解析JSX生成AST
const ast = parser.parse(jsxCode, { 
  plugins: ['jsx'],
  sourceType: 'module'
});

// 遍历AST提取JSX属性
traverse(ast, {
  JSXElement(path) {
    const elementName = path.node.openingElement.name.name;
    console.log(`找到元素：${elementName}`);
    
    path.node.openingElement.attributes.forEach(attr => {
      if (attr.type === 'JSXAttribute') {
        const attrName = attr.name.name;
        const attrValue = attr.value;
        
        if (!attrValue) {
          // 布尔属性，比如 <Button disabled />
          console.log(`- 属性：${attrName}（布尔属性）`);
        } else if (attrValue.type === 'StringLiteral') {
          console.log(`- 属性：${attrName}，值："${attrValue.value}"`);
        } else if (attrValue.type === 'JSXExpressionContainer') {
          // 动态表达式属性，这里可以进一步解析表达式的AST
          console.log(`- 属性：${attrName}，值类型：动态表达式`);
        }
      } else if (attr.type === 'JSXSpreadAttribute') {
        // 展开属性，比如 <Button {...props} />
        console.log(`- 展开属性：${attr.argument.name}`);
      }
    });
  }
});

简化方案：基于ESLint自定义规则 #

如果你的核心需求是落实公司内部规范，不需要从头写解析器，直接基于ESLint开发自定义规则更高效：

• ESLint本身就是基于AST做静态分析，内置了JSX支持。
• 你只需要编写规则逻辑，比如检查是否存在禁用属性、强制属性顺序、验证回调函数的写法等，不需要处理解析细节。

内容的提问来源于stack exchange，提问作者Big boy