使用JavaScript将XML动态转换为HTML表单并支持回写XML

业务场景 #

我正在开发Web端客户管理模块，创建订单的交互流程如下：

• 用户先从下拉选择框选中对应客户
• 系统通过AJAX请求拉取选中客户的全量数据，包含客户名称、地址信息，以及一段XML格式的结构模板字符串

XML模板示例：

<?xml version="1.0"?>
<cfdi xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="file:///c:/Users/dlucas/Desktop/Addendas%20XSD/Kuehne.xsd">
    <AD>
        <RECEPTION>
            <Tipo>
                <INVOICE>
                    <!--Element Purchase_Order is optional-->
                    <Order>string</Order>
                    <!--Element FileNumber_GL is optional-->
                    <GL>string</GL>
                    <Centre>string</Centre>
                    <Ref>string</Ref>
                </INVOICE>
            </Tipo>
        </RECEPTION>
    </AD>
</cfdi>

核心功能要求 #

不同客户对应的XML结构存在明显差异，需要实现两个核心能力：

1. 正向转换：传入任意XML结构字符串，自动生成可交互的HTML表单，供用户填写XML中对应字段的实际值（比如示例中的Order、GL、Centre、Ref字段）
2. 反向转换：用户填写完成点击保存后，将表单输入的内容重新组装为完全符合原XML层级结构的字符串

参考实现标准 #

我之前调研过现有JavaScript类库，仅找到一款工具可实现完全匹配需求的效果，经测试可完美适配我持有的各类XML结构，但该工具未提供可直接集成引入的开发资源，因此决定手动实现。我分析了该工具生成的表单HTML结构，作为开发参考：

<div id="xmlForm">
    <form name="xmlForm" target="_blank" method="post">
        <div class="XMLcomplexContent">
            <fieldset class="cfdi">
                <legend>cfdi</legend>
                <input type="hidden" value="cfdi" name=".tg">
                <input type="hidden" name="@xmlns:xsi" value="http://www.w3.org/2001/XMLSchema-instance">
                <input type="hidden" name="@xsi:noNamespaceSchemaLocation" value="file:///c:/Users/dlucas/Desktop/Addendas%20XSD/Kuehne.xsd">
                <div class="XMLcomplexContent">
                    <fieldset class="Addenda">
                        <legend>Addenda</legend>
                        <input type="hidden" value="Addenda" name=".tg">
                        <div class="XMLcomplexContent">
                            <fieldset class="KNRECEPCION">
                                <legend>KNRECEPCION</legend>
                                <input type="hidden" value="KNRECEPCION" name=".tg">
                                <div class="XMLcomplexContent">
                                    <fieldset class="Tipo">
                                        <legend>Tipo</legend>
                                        <input type="hidden" value="Tipo" name=".tg">
                                        <div class="XMLcomplexContent">
                                            <fieldset class="FacturasKN">
                                                <legend>FacturasKN</legend>
                                                <input type="hidden" value="FacturasKN" name=".tg">
                                                <span class="XMLsimpleType">
                                                    <span class="Purchase_Order">
                                                        <label>Purchase_Order: </label>
                                                        <input type="text" class="Purchase_Order" name="Purchase_Order" value="string">
                                                    </span>
                                                    <br>
                                                </span>
                                                <span class="XMLsimpleType">
                                                    <span class="FileNumber_GL">
                                                        <label>FileNumber_GL: </label>
                                                        <input type="text" class="FileNumber_GL" name="FileNumber_GL" value="string">
                                                    </span>
                                                    <br>
                                                </span>
                                                <span class="XMLsimpleType">
                                                    <span class="Branch_Centre">
                                                        <label>Branch_Centre: </label>
                                                        <input type="text" class="Branch_Centre" name="Branch_Centre" value="string">
                                                    </span>
                                                    <br>
                                                </span>
                                                <span class="XMLsimpleType">
                                                    <span class="TransportRef">
                                                        <label>TransportRef: </label>
                                                        <input type="text" class="TransportRef" name="TransportRef" value="string">
                                                    </span>
                                                    <br>
                                                </span>
                                                <input type="hidden" value="/FacturasKN" name=".tg">
                                            </fieldset>
                                        </div>
                                        <input type="hidden" value="/Tipo" name=".tg">
                                    </fieldset>
                                </div>
                                <input type="hidden" value="/KNRECEPCION" name=".tg">
                            </fieldset>
                        </div>
                        <input type="hidden" value="/Addenda" name=".tg">
                    </fieldset>
                </div>
                <input type="hidden" value="/cfdi" name=".tg">
            </fieldset>
        </div>
        <p>
            <input id="submit" type="submit" value="Generate XML">
            <input value="Reset" type="reset">
        </p>
    </form>
</div>

表单在浏览器中的实际渲染效果：

目前我对XML字符串的递归遍历、节点类型判断、表单与XML结构的双向映射逻辑存在较多困惑，需要相关的实现思路或可参考的代码片段，我也会同步推进开发，取得进展会及时同步。

内容的提问来源于stack exchange，提问作者Joseph Aguilar