正则处理css样式字符串

现有这样的一个字符串

“width: 100px; font-size: 10px;”

使用正则想要输出成：

{
width: 100px,
font-size: 10px
}

方法一

// 这是一个不规则的 样式
'width : 100px;     font-size  : 10px;'.match(/(([^:;]\S[^:;]+))/g)
// 输出 ['width', '100px', 'font-size', '10px']
const arrStyle = ['width', '100px', 'font-size', '10px']
function configSytle(arr){
	const resultObj = {}
	for(let i = 0; i < arr.length; i+=2){
		if(arr[i]){
			resultObj[arr[i]] = arr[i+1]
		}
	}
	return resultObj
}

configSytle(arrStyle)

方法二

'width : 100px;     font-size  : 10px;'.match(/([^;]\S[^;]+)\s*\:\s*([^;]\S[^;]+)/g)
// 输出的结果： ['width  : 100px', 'size:10px']有多余的空格
//所以需要先把空白字符去掉
'width : 100px;     font-size  : 10px;'.replace(/\s*/g,'')
// 得到 'width:100px;font-size:10px;'
'width:100px;font-size:10px;'.match(/([^;]\S[^;]+)\:([^;]\S[^;]+)/g)
// 得到['width:100px','font-size:10px']
function configobj(arr) {
	const result = {}
	let currentKey = ""
	let currentValue = ""
	for(let i=0; i<arr.length; i++){
		if(arr[i]){
			currentKey = arr[i].match(/([^:;]\S[^:;]+)(?=\:)/)[0]
			currentValue = arr[i].match(/(?<=\:)([^:;]\S[^:;]+)/)[0]
		}
		result[currentKey] = currentValue
	}
	return result
}
configobj(['width:100px','font-size:10px'])

下划线转驼峰的方法 更多详情请点击
若果是转换js描述css对象的，可以使用此方法 中横线转驼峰

toHump(string){
	return string.replace(/\-(\w)/g,function(all,letter){
		return letter.toUpperCase()
	})
}