Package: html-to-dash
html-to-dashConvert HTML to dash format.Installationpip install html-to-dashExamplesBasic usagefromhtml_to_dashimportparse_htmlelement_str="""<div><div class='bg-gray-800' style='color:red;margin:10px'><svg aria-label="Ripples. Logo" role="img" xmlns="http://www.w3.org/2000/svg"></svg><a href="#" id="link1">A</a></div><div>text</div><div><a href="#" id="link1">a1</a>tail1<a href="#" id="link2">a2</a>tail2</div></div>"""parse_html(element_str)Print:# Tags : Unsupported [svg] removed.

Result:

html.Div(

    children=[

        html.Div(

            className="bg-gray-800",

            style={"color": "red", "margin": "10px"},

            children=[html.A(href="#", id="link1", children=["A"])],

        ),

        html.Div(children=["text"]),

        html.Div(

            children=[

                html.A(href="#", id="link1", children=["a1"]),

                html.Span(children=["tail1"]),

                html.A(href="#", id="link2", children=["a2"]),

                html.Span(children=["tail2"]),

            ]

        ),

    ]

)By default, only tags in the dash.html module are supported.Tags and attributes are checked, and those that are not supported are automatically removed.The tags and attributes are case-insensitive.If the provided HTML string is unclosed, div will be automatically added as the root tag.The html, body, and head tags will be automatically removed without notification, as these tags may be automatically supplemented by the lxml module and are not supported in dash.The tail(Text after element's end tag, but before the next sibling element's start tag) will automatically be converted into the text of a span tag.Enable dash_svgUsedash-svgmodule to render SVG tags.fromhtml_to_dashimportparse_htmlelement_str="""<svg xmlns=" http://www.w3.org/2000/svg " version="1.1" width="300" height="300"><rect x="100" y="100" width="100" height="100" fill="#e74c3c"></rect><polygon points="100,100 200,100 150,50" fill="#c0392b"></polygon><polygon points="200,100 200,200 250,150" fill="#f39c12"></polygon><polygon points="100,100 150,50 150,150 100,200" fill="#f1c40f"></polygon><polygon points="150,50 200,100 250,50 200,0" fill="#2ecc71"></polygon><polygon points="100,200 150,150 200,200 150,250" fill="#3498db"></polygon></svg>"""parse_html(element_str,enable_dash_svg=True)Print:Result:

dash_svg.Svg(

    xmlns=" http://www.w3.org/2000/svg ",

    version="1.1",

    width="300",

    height="300",

    children=[

        dash_svg.Rect(x="100", y="100", width="100", height="100", fill="#e74c3c"),

        dash_svg.Polygon(points="100,100 200,100 150,50", fill="#c0392b"),

        dash_svg.Polygon(points="200,100 200,200 250,150", fill="#f39c12"),

        dash_svg.Polygon(points="100,100 150,50 150,150 100,200", fill="#f1c40f"),

        dash_svg.Polygon(points="150,50 200,100 250,50 200,0", fill="#2ecc71"),

        dash_svg.Polygon(points="100,200 150,150 200,200 150,250", fill="#3498db"),

    ],

)In the dash application,import dash_svgmodule will render normally.The dash_svg has higher priority than dash.html, but lower priority than extra module.Expanded usagefromhtml_to_dashimportparse_htmlelement_str="""<html><body><div><input type="text" id="username" name="username" aria-label="Enter your username" aria-required="true"><div class='bg-gray-800' style='color:red;margin:10px'><a href="#" id="link1">A</a></div><div>text</div><svg></svg><script></script><div><a href="#" id="link2">B</a></div></div></body></html>"""extra_mod=[{"dcc":{"Input":["id","type","placeholder","aria-*"]}}]deftag_attr_func(tag,items):iftag=="Input":k,v=itemsif"-"ink:returnf'**{{"{k}": "{v}"}}'parsed_ret=parse_html(element_str,tag_map={"svg":"img"},skip_tags=['script'],extra_mod=extra_mod,tag_attr_func=tag_attr_func,if_return=True,)print(parsed_ret)Print:# Tags : Unsupported [script] removed.

# Attrs: Unsupported [name] in dcc.Input removed.

html.Div(

    children=[

        dcc.Input(

            type="text",

            id="username",

            **{"aria-label": "Enter your username"},

            **{"aria-required": "true"}

        ),

        html.Div(

            className="bg-gray-800",

            style={"color": "red", "margin": "10px"},

            children=[html.A(href="#", id="link1", children=["A"])],

        ),

        html.Div(children=["text"]),

        html.Img(),

        html.Div(children=[html.A(href="#", id="link2", children=["B"])]),

    ]

)The * sign is supported as a wildcard, like data-*, aria-*.Both class and className can be handled correctly.In fact, attributes with the "-" symbol are processed by default, which is only used here as an example. Similarly, the style attribute can be handled correctly.If tag_map param is provided, will convert the corresponding tag names in the HTML based on the dict content before formal processing.Tag in skip_tags will remove itself and its text.The priority of tag_map is higher than skip_tags.Supports any custom module, not limited to HTML and DCC. Essentially, it is the processing of strings.Custom module prioritize in order and above the default dash.html module.The tag_attr_func param is a function that handle attribute formatting under the tag.When adding quotation marks within a string,double quotation marksshould be added to avoid the black module being unable to parse.For example,f'**{{"{k}": "{v}"}}'instead off"**{{'{k}': '{v}'}}"、f'{k}="{v}"'instead off"{k}='{v}'"If the HTML structure is huge, set huge_tree to True.Referenceshttps://github.com/mhowell86/convert-html-to-dashhttps://github.com/xhluca/convert-html-to-dash