如何用正则表达式从React组件字符串提取Props及对应值

问题描述 #

给定React组件的原始字符串：

<MyComponent id={123} value={345} name="Thomas" />

需要提取所有Props及其对应值，得到结果：

{ id: 123, value: 345, name: "Thomas" }

正确实现方式 #

可以通过正则表达式匹配所有props键值对，再遍历处理成目标对象，具体代码如下：

const myComp = '<MyComponent id={123} value={345} name="Thomas" />';
const propRegex = /(\w+)=({[^}]+}|"[^"]+")/g;
const props = {};
let match;

while ((match = propRegex.exec(myComp)) !== null) {
  const key = match[1];
  let value = match[2];
  
  // 处理花括号包裹的动态值（如{123}）
  if (value.startsWith('{') && value.endsWith('}')) {
    value = value.slice(1, -1);
    // 自动转换数字类型
    value = isNaN(Number(value)) ? value : Number(value);
  } else {
    // 处理引号包裹的字符串值（如"Thomas"）
    value = value.slice(1, -1);
  }
  
  props[key] = value;
}

console.log(props);
// 输出: { id: 123, value: 345, name: 'Thomas' }

实现说明 #

• 正则表达式/(\w+)=({[^}]+}|"[^"]+")/g的作用：
  • (\w+)：匹配props名称（支持字母、数字、下划线）
  • ({[^}]+}|"[^"]+")：匹配两种常见的props值类型，要么是{}包裹的动态表达式，要么是""包裹的字符串
• 遍历匹配结果时，会根据值的类型做对应的格式化：去掉包裹的{}或""，并将数字字符串自动转为Number类型
• 这种方式能处理多个props，且兼容不同类型的取值形式

原方法的问题 #

你之前的代码只针对id属性做了匹配，且通过split只能提取第一个花括号内的内容，无法覆盖所有props和不同类型的值，因此无法得到完整的结果。

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