React下不规则字符串转span和Input

遇到一个奇葩需求，接口收到一串算法规则，要求把'[]'内的数字内容转成Input，可供用户修改,其余部分转成文本，修改之后再转成字符串传给后台。这个算法没有规则，可能只有文本，可能有多个'[]'。也不知道中括号会出现在字符串的什么位置。
一开始接到这个需求，一脸懵逼。这两天想到一个还算不错的方法来解决这个问题。
举个例子，某个算法字符串格式：####[1]###[2]#[3]##########[4];

 第一步，将字符串转成html元素

 const [htmlElement,setHtmlElement] = useStae<any>(<></>); // 给需要转换的字符串设置初始值
 const rule = ruleSourceStr; // 赋值原生string
 let result = '';  // 结果
 if(rule.indexOf('[' === '0') { // 第一个字符就是[
    const parseFirst = rule.replace('[',`<Input type='numer' value='`); // 替换第一个字符
    const parseRemainder = parseFirst(/\[/g,`</span><Input type='number' value='`); // 替换剩余中括号[
    result = parseRemainder.replace(/\]/g,'/><span>'); // 替换]
 }else{  // 第一个[]出现在字符串中间
    const parseLeft = rule.replace(/\[/g,`</span><Input type='number' value='>`);
    const parseRight = parseLeft.replace(/\]/g,`/><span>`);
    const addLeft = '<span>' + parseRight; // 在字符串头部加上<span>
    result = addLeft+'</span>';
 }
 setHtmlElement(<div id = 'inner-html' dangerouslySetInnerHtml={{__html:result}}/>); // htmlElement更新后放入相应位置

第二步，相关的span和Input就显示在页面中，这时候加入样式调整一下就可以
第三步，确认之后收集元素内容，转成字符串

const getNode = document.getElementById('innder-html')?.childNodes;
let resultRule = '';
getNode?.forEach((item:any)=>{
    if(item.nodeName === 'SPAN'){
        ruleResult += item.outerText;
    }
    if(item.nodeName === 'INPUT'){
        ruleResult += ('['+ item.value +']');
    }
})
console.log(resultRule); //最终结果