如何高亮模版代码

今天有个前端朋友说想要实现模版代码高亮,就是把一个模版字符串里的变量部分高亮出来。简化一下后就是要把"dfasf${1}${2tes}dfsdf${hello3}blabla"这个字符串转换成下面这样的数组(转成数组后每个数组元素外面包一个span标签,带${}的数组元素另外加一个特别的class单独给个高亮样式就可以了):

["dfasf", "${1}", "${2tes}", "dfsdf", "${hello3}", "blabla"]

以下为我的解决方案:

const strDemo = 'dfasf${1}${2tes}dfsdf${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)

这个方法会返回上面我们期望得到的数组。

Author: Yakima
关于作者:楠溪江人,出生于1991年,目前坐标上海。读书时代跳过级、保过送,工作后转过行。2013年本科毕业于北药。看书、码字、敲代码、打羽毛球是我花时间的爱好。曾在某上市药企任国际药品注册岗,现在某高新企业任前端管理岗。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据