关于html5:React下不规则字符串转span和Input

35次阅读

共计 1225 个字符，预计需要花费 4 分钟才能阅读完成。

遇到一个奇葩需要，接口收到一串算法规定，要求把 '[]' 内的数字内容转成 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); // 最终后果

正文完