<pre class="shiki github-dark shaku"><code>/** * @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…