使用正则表达式从字符串提取组件名与可解析JSON部分

云上老周

2026-8-3

解决方案

方法1：字符串拆分（更稳妥，规避正则陷阱）

通过字符定位直接拆分，不受字段值内特殊字符影响：

找到第一个{的索引位置，以此为界将字符串拆分为「前缀+组件名」段和「JSON内容」段
对「前缀+组件名」段按最后一个/分割，取后半段即为组件名
「JSON内容」段直接用JSON.parse解析

示例代码（JavaScript）：

const input = "form/Slider{\"label\":\"范围(0-100)\",\"min\":0,\"max\":100}";

// 定位JSON起始位置
const jsonStartIndex = input.indexOf("{");
const prefixComponentStr = input.slice(0, jsonStartIndex);
const jsonStr = input.slice(jsonStartIndex);

// 提取组件名
const componentName = prefixComponentStr.split("/").pop();

// 解析JSON
const jsonData = JSON.parse(jsonStr);

console.log("组件名:", componentName); // 输出 Slider
console.log("解析后的JSON:", jsonData);

方法2：修正正则表达式

用贪婪模式匹配完整JSON结构，精准提取组件名，不受(、)等字符干扰：
正则表达式：^(.*\/([^\/]+))(\{.*\})$

示例代码（JavaScript）：

const input = "form/Slider{\"label\":\"范围(0-100)\",\"min\":0,\"max\":100}";
const regex = /^(.*\/([^\/]+))(\{.*\})$/;
const matchResult = input.match(regex);

if (matchResult) {
  const componentName = matchResult[2];
  const jsonStr = matchResult[3];
  const jsonData = JSON.parse(jsonStr);
  
  console.log("组件名:", componentName); // 输出 Slider
  console.log("解析后的JSON:", jsonData);
}