Extract HTML markup from React JSX component code using Regex

Viewed 28

In my custom JS I'm trying to extract HTML markup from JSX-like React component source code using the two following replacings:

let html = `
return (
  <div></div>
)`;
html = html
    .replace(/(\n)?return(\s)?\((\n)?((\t)|(\s+))?/, '')
    .replace(/(\n)?\)/, '');

console.log(html);

It's working fine on the example above.

But everything is broken if I add lines with a function wrapper like:

let html = `
function App() {
  return (
    <div></div>
  )
}`;

What is the best option to extract HTML markup from JSX regardless of any case?

P.S. I'm working on my own simple visual builder to be able to re-write React components regardless of their code styles

0 Answers
Related