Reactの下の不規則な文字列はspanとInputを回転します

        ，          ，   '[]'        Input，      ,        ，              。        ，      ，     '[]'。                   。
         ，    。                     。
    ，         ：####[1]###[2]#[3]##########[4];

    ，      html  

 const [htmlElement,setHtmlElement] = useStae(<>>); //               
 const rule = ruleSourceStr; //     string
 let result = '';  //   
 if(rule.indexOf('[' === '0') { //        [
    const parseFirst = rule.replace('[',`'); //   ]
 }else{  //    []        
    const parseLeft = rule.replace(/\[/g,`' + parseRight; //         
    result = addLeft+'';
 }
 setHtmlElement(
); // 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); //