regex 从包含React组件的字符串中提取属性+值的正则表达式

yptwkmov 于 2022-12-19 发布在 React

关注(0)|答案(2)|浏览(110)

我有一个React组件，但是原始字符串：

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

我怎样才能正则化这个字符串，并提取所有的 prop 和他们的价值？

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

我很难理解如何去做这样的事情。
我试过这样的方法，但没有什么效果...：

let res = myComp.match(/.*<MyComponent id={.*/g)
let value = res[0].split('{')[1].split('}')[0]

regex

来源：https://stackoverflow.com/questions/74844132/regex-to-extract-props-values-from-string-that-contains-a-react-component

2条答案

按热度按时间

iqjalb3h1#

下面的正则表达式应该扫描所有的名称/值对。你可以在matchAll（）中使用它来返回一个包含所有匹配项的可迭代对象。名称在捕获组1中，值可以通过连接组3、4和5来获得。你可以添加javascript代码来迭代这个结构并构建你的结果字符串。

/([\w.:-]+)(\s*=\s*)(?:\{(.+?)\}|(".*?")(?<!\\")|(\w+))/gs

我添加了一些防御性检查来处理双引号字符串中转义的双引号。

赞(0）回复(0）举报 2022-12-19

os8fio9y2#

给定您的字符串，另一个将检索您的值的正则表达式如下：

(\b\S+\b)=[{"](\b\S+\b)["}]

正则表达式解释：

(\b\S+\b)：组1，非空格字符序列
=：=
[{"]：左大括号或双引号
(\b\S+\b)：第2组，，非空格字符序列
[}"]：右括号或双引号

检查here演示。

let text = "<MyComponent id={123} value={345} name=\"Thomas\" />";

let regex = /(\b\S+\b)=[{"](\b\S+\b)["}]/g;

let results = text.matchAll(regex);

for (result of results) {
  console.log("Key:", result[1], ' Value:', result[2])
}

赞(0）回复(0）举报 2022-12-19

我来回答

regex 从包含React组件的字符串中提取属性+值的正则表达式

2条答案

相关问题

热门标签

最新问答