遇到奇葩需求。接口接收到一系列算法规则,需要将'[]'中的数字内容转化为Input,用户可以修改,其余转化为Text,修改后转化为字符串传递给背景。这个算法没有规则,可能只有文本,可能有多个'[]'。我也不知道方括号会出现在字符串中的什么位置。当我第一次收到这个请求时,我惊呆了。这两天想到了一个很好的办法来解决这个问题。例如一个算法字符串格式:####[1]###[2]#[3]##########[4];第一步是将字符串转换成html元素const[htmlElement,setHtmlElement]=useStae(<>/>);//为待转换的字符串设置初始值construle=ruleSourceStr;//赋值原始字符串letresult='';//结果if(rule.indexOf('['==='0'){//第一个字符是[constparseFirst=rule.replace('[',`');//替换]}else{//第一个[]出现在字符串的中间constparseLeft=rule.replace(/\[/g,``);constparseRight=parseLeft.replace(/\]/g,`/>`);constaddLeft=''+parseRight;//在字符串开头添加result=addLeft+'';}setHtmlElement();//htmlElement更新后放在相应的位置Step2.页面会显示相关的span和Input。这时候可以添加样式,调整一下。第三步,确认后收集元素内容,并转化为字符串=>{if(item.nodeName==='SPAN'){ruleResult+=item.outerText;}if(item.nodeName==='INPUT'){ruleResult+=('['+item.value+']');}})console.log(resultRule);//最后结果