如何高亮模版代码 ​

今天有个前端朋友说想要实现模版代码高亮，就是把一个模版字符串里的变量部分高亮出来。简化一下后就是要把`"dfasf$1${2tes}dfsdf$hello3blabla"\text{`}\mathrm{这}\mathrm{个}\mathrm{字}\mathrm{符}\mathrm{串}\mathrm{转}\mathrm{换}\mathrm{成}\mathrm{下}\mathrm{面}\mathrm{这}\mathrm{样}\mathrm{的}\mathrm{数}\mathrm{组}（\mathrm{转}\mathrm{成}\mathrm{数}\mathrm{组}\mathrm{后}\mathrm{每}\mathrm{个}\mathrm{数}\mathrm{组}\mathrm{元}\mathrm{素}\mathrm{外}\mathrm{面}\mathrm{包}\mathrm{一}\mathrm{个}span\mathrm{标}\mathrm{签}，\mathrm{带}${}的数组元素另外加一个特别的class单独给个高亮样式就可以了）： ```text ["dfasf", "$1","${2tes}", "dfsdf", "$hello3","blabla"\text{]}\text{`}\text{`}\text{`}\mathrm{以}\mathrm{下}\mathrm{为}\mathrm{我}\mathrm{的}\mathrm{解}\mathrm{决}\mathrm{方}\mathrm{案}：\text{`}\text{`}\text{`}jsconststrDemo{=}^{\prime }dfasf${1}$2tesdfsdf${hello3}blabla' function getChilds (str) { const arr = [] while (str.length > 0) { const match = str.match(/\$\{.*?\}/) if (match === null) { arr.push(str) str = '' continue } if (match !== null) { const matchStr = match[0] const matchIdx = match.index const matchLength = matchStr.length if (matchIdx !== 0) { arr.push(str.substring(0, matchIdx)) } arr.push(matchStr) str = str.substr(matchIdx + matchLength) } } return arr } getChilds(strDemo) ``` 这个方法会返回上面我们期望得到的数组。