RegExp Application

2019-12-27 128 阅读1分钟

CSSText Camel-Case驼峰命名转 kebab-case短横线命名

匹配大写字母/([A-Z])/g，返回-小写字母

const domElement = document.createElement('div');
const styleObject = {
    color: '#fff',
    backgroundColor: '#f9b',
    boxShadow: '0 0 20px 0 rgba(0,0,0,.3)',
    borderTopWidth: '20px',
}

方法一

以domElement.style.attr形式实现，允许驼峰命名

for (let attr in styleObject) {
    domElement.style[attr] = styleObject[attr];
}

方法二

以短横线实现

const reg = /([A-Z])/g;
const replace = (...args) => `-${(args[1].toLowerCase())}`;
const cssText = Object.keys(styleObject).map(attr => attr.replace(reg, replace)).join(';');
domElement.style.cssText = cssText;