<pre class="language-javascript"><code class="language-javascript">


/**
 * @param {code} string
 * @returns {any} AST 
 */
function parse(code) {
 if (code.length &lt; 1) {
 return null;
 }

 const strArr = code.split('');
 const openingTagIndex = strArr.indexOf('&lt;');

 if (openingTagIndex &lt; 0) {
 throw new Error();
 }

 const closingTagIndex = strArr.indexOf('&gt;');
 const openingTagChars = strArr.splice(openingTagIndex, closingTagIndex + 1);

 const [openingTagName, props] = processOpeningTag(openingTagChars);
 const closingTagName = processClosingTag(strArr.splice(strArr.lastIndexOf('&lt;')));
 const children = processChildren(strArr);

 if (openingTagName !== closingTagName) {
 return;
 } 

 return {
 openingElement: {
 name: openingTagName,
 },
 closingElement: {
 name: closingTagName,
 },
 props: { ...props, children}
 }
}

function processOpeningTag(strArr) {
 strArr.splice(strArr.indexOf('&lt;'), 1);
 strArr.splice(strArr.lastIndexOf('&gt;'));
 const str = strArr.join('').split(' ');
 const props = {} ;
 let tagName;

 for(let token of str) {
 if (token.includes('=')) {
 const [key, value] = token.split('=');
 props[key] = value;
 } else if (tagName === undefined &amp;&amp; token.length &gt; 0) {
 tagName = token.trim();
 }
 }

 return [tagName, props];
}

function processClosingTag(strArr) {
 strArr.splice(0, strArr.lastIndexOf('/') + 1);
 strArr.splice(strArr.lastIndexOf('&gt;'), 1);
 return strArr.join('').trim();
}

function processChildren(strArr) {
 const openingTagIndex = strArr.indexOf('&lt;');
 const leftChild = strArr.splice(0, openingTagIndex).join('');
 const closingTagIndex = strArr.lastIndexOf('&gt;');
 const rightChild = strArr.splice(closingTagIndex + 1).join('');
 const middleChild = parse(strArr.join(''));
 const children = [];

 if (leftChild.length &gt; 0) {
 children.push(leftChild);
 }

 if (middleChild != null) {
 children.push(middleChild);
 }

 if (rightChild.length &gt; 0) {
 children.push(rightChild);
 }

 return children;
}

/**
 * @param {any} your AST
 * @returns {string} 
 */
function generate(ast) {
 return {
 type: ast.openingElement.name,
 props: {
 children: ast.props.children,
 }
 };
}</code></pre>

Easy to understand modular solution

If you are using React, you must be familiar with JSX. With JSX syntax support, transpilers are able to understand below non-standard code directly in…