关于html5: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); //最终后果