Regex to Extract Props + Values from String that contains a React Component

Question

I have a React component, but the raw string:

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

How can I regex through this string and extract all props & their value?

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

I am struggling to understand how to go about something like this.

I've tried things like this, but they aren't really getting me anywhere... :

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

If you are receiving that object as a string, you can use JSON.parse() to convert it into an object. Link: stackoverflow.com/questions/11171746/reverse-of-json-stringify — man517
– man517, Commented Dec 18, 2022 at 20:54
If the component is all there is to the string, you could just match the content of what looks like properties by using lookarounds to make sure what you match is framed by ={...} or ="...". Something like (?<=={)[^}]*(?=})|(?<==")[^"]*(?=") used like let results = 'component-markup'.match(/expression/g). — oriberu
– oriberu, Commented Dec 18, 2022 at 21:33

The fourth bird · Accepted Answer · 2023-02-19 17:42:05Z

1

One option might be using a pattern with an infinite lookbehind assertion if supported and 3 capture groups with an alternation.

Assuming there are no other occurrences of < and > in the string:

(?<=<MyComponent\s[^<>]*)([^\s=]+)=(?:{([^{}]*)}|"([^"]*)")(?=[^<>]*\/>)

See a regex101 demo;

const regex = /(?<=<MyComponent\s[^<>]*)([^\s=]+)=(?:{([^{}]*)}|"([^"]*)")(?=[^<>]*\/>)/g;
const s = `<MyComponent id={123} value={345} name="Thomas" />`;
const result = {};
Array.from(s.matchAll(regex), m => {
  result[m[1]] = m[2] ? parseInt(m[2]) : m[3]
});
console.log(result);

answered Feb 19, 2023 at 17:42

The fourth bird

165k16 gold badges61 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Maurer · Accepted Answer · 2022-12-18 22:01:19Z

0

The following regexp should scan all of the name/value pairs. You can use this in a matchAll() to return an iterable object with all the matches. The name is in capture group 1 and the value can be gotten by concatenating groups 3, 4, and 5. You can add javascript code to iterate this structure and build your result string.

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

I added a little defensive check to handle escaped double-quotes inside double-quoted strings.

answered Dec 18, 2022 at 22:01

Chris Maurer

2,9321 gold badge13 silver badges9 bronze badges

Comments

lemon · Accepted Answer · 2022-12-19 02:13:20Z

0

Given your string, another regex that would retrieve your values is the following:

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

Regex Explanation:

(\b\S+\b): Group 1, non-space characters sequence
=: =
[{"]: either open brace or double quotes
(\b\S+\b): Group 2, , non-space characters sequence
[}"]: either closed brace or double quotes

Check the demo 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])
}

edited Dec 19, 2022 at 2:13

answered Dec 19, 2022 at 1:39

lemon

15.6k6 gold badges23 silver badges42 bronze badges

Collectives™ on Stack Overflow

Regex to Extract Props + Values from String that contains a React Component

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related