怎么通过这段字符串生成html代码

Question

let str = 'TSUM('zibiao','zongjia',T('t1','t2'))'

<p>
    <span class="class1">TSUM</span>
    <span class="class1">(</span>
    <span class="class2">'mingcheng'</span>
    <span class="class2">,</span>
    <span class="class2">'danjia'</span>
    <span class="class2">,</span>
    <span class="class1">T</span>
    <span class="class1">(</span>
    <span class="class2">'t1'</span>
    <span class="class2">,</span>
    <span class="class2">'t2'</span>
    <span class="class1">)</span>
    <span class="class1">)</span>
</p>

Answer 1

首先，你的字符串有问题，如果这些内容是原始内容，你的字符串就需要处理。
比如

let str="TSUM('zibiao','zongjia')"

对此，再用 规则式就可以提取啦。

let RE=/^(.*)\(\s*('.*')\s*,\s*('.*')\s*\)$/;
let RtStr='<p>\n';
let RT= RE.exec(str);
if (RT!=null){
   RtStr=RtStr +  '\t<span class="class1">' + RT[1] + '</span>\n';
   RtStr=RtStr +  '\t<span class="class1">(</span>\n';
   RtStr=RtStr +  '\t<span class="class2">' + RT[2] + '</span>\n';
   RtStr=RtStr +  '\t<span class="class2">,' + RT[3] + '</span>\n';
   RtStr=RtStr +  '\t<span class="class1">)</span>\n'   ;
}
RtStr=RtStr +  '</p>\n';
console.log(RtStr)

上面的处理只是对于2个字符串参数，且参数中不能有 , 。

要处理不定数量的参数，个人建议分成2步，第一步，提取参数集，再用逗号分组。来提取每个参数。

至于输出，则用循环来处理多个参数的部分即可，外围的则相对固定。

Answer 2

let str2html = (s,a='<span class="class',b='</span>')=>'<p>'+s.replace(/(\w+)(\()/g,a+'1">$1'+b+a+'1">('+b).replace(/('\w+')/g,a+'2">$1'+b).replace(/([),])/g,a+'1">$1'+b)+'</p>';

let str  = "TSUM('zibiao','zongjia',T('t1','t2'))";

let html = str2html(str);

Answer 3

我猜你是要把方法和参数做一次分离处理，参数个数不限，下面是个通用方法

// 重新修改了一下，这里前提是方法名和参数名都只包含字母、数字和下划线，不包含其他特殊字符
function splitFunction(str) {
  const reg2 = /\w+|\(|(?:('|").+?\1)|,|\)/g
  let matchArr = str.match(reg2);
  matchArr = matchArr.map(s => {
    const cls = /(?:('|").+?\1)|,/.test(s) ? 'class2' : 'class1';
      return `<span class="${cls}">${s}</span>`
  })
  return (
    `<p>
      ${matchArr.join('\n')}
    </p>
    `
  )
}