htmlToReactElementWithInnerHtml.js

import React from 'react';

function styleStringToObject(styleStr) {
    return styleStr.split(';').reduce((acc, pair) => {
        const [name, ...valueParts] = pair.trim().split(':');
        return {
            ...acc,
            [name.trim()]: valueParts.join(':').trim(),
        };
    }, {});
}

const startTagRegex = /^<(.+?)>/;
export function htmlToReactElementWithInnerHtml(html) {
    const rootTagContentMatch = startTagRegex.exec(html);

    if (!rootTagContentMatch) {
        return null;
    }
    const [fullMatch, content] = rootTagContentMatch;
    const htmlAttrsRegex = /\s(\w+)="(.+?)"/g;

    let match;
    const argPairs = [];
    while ((match = htmlAttrsRegex.exec(content))) {
        argPairs.push([match[1], match[2]]);
    }
    const [rootTag] = content.split(' ');

    const rootProps = argPairs.reduce(
        (acc, [name, value]) => ({
            ...acc,
            [name]: name === 'style' ? styleStringToObject(value) : value,
        }),
        {}
    );

    return React.createElement(rootTag, {
        dangerouslySetInnerHTML: {
            __html: html.slice(fullMatch.length, html.lastIndexOf(`</${rootTag}>`)),
        },
        ...rootProps,
    });
}