css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成
backgroundImage 驼峰格式,请完成此转换功能
1. 以 - 为分隔符,将第二个起的非空单词首字母转为大写
2. -webkit-border-image 转换后的结果为 webkitBorderImage
样例:
输入:’font-size‘
输出:’fontSize‘
'font-size'
fontSize
function cssStyle2DomStyle(sName) {
let wordArr = sName.split("-").filter((val) => val!="");
// 得到非空单词数组
for (let i = 1; i < wordArr.length; i++) {
// 从第二个非空单词起
let letterArr = wordArr[i].split("");
// 得到每个单词的字母数组
letterArr[0] = letterArr[0].toUpperCase();
// 首字母大写
wordArr[i] = letterArr.join("");
// 重组单词
}
// 重组字符串并返回
return wordArr.join("");
} function cssStyle2DomStyle(sName) {
let check = /-*\w+/g;
let data = sName.match(check);
//判断第一个字符是否为-
if(data[0][0] == '-'){
data = toUP(data,1);
}else{
data = toUP(data,0);
}
data = data.join("")
return data.replace(/-/g,"");
}
function toUP(data,k){
for (let i in data){
data[i]= i ==0?data[i].replace(data[i][k],data[i][k].toLowerCase()):data[i].replace(data[i][1],data[i][1].toUpperCase());
}
return data;
} function cssStyle2DomStyle(sName){
return sName.replace(/-([a-z])/g,function(str,p2,index){
return index>2 ? p2.toUpperCase() : p2;
})
} function cssStyle2DomStyle(sName) {
return sName.replace(/-([a-z])/g, (str, letter, index) => {
return index ? letter.toUpperCase() : letter;
});
} /**
* css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式,请完成此转换功能
1. 以 - 为分隔符,将第二个起的非空单词首字母转为大写
2. -webkit-border-image 转换后的结果为 webkitBorderImage
* @param {String} sName
*/
function cssStyle2DomStyle(sName) {
// 排除空字符串的情况
if(!sName) return '';
// 去除开头第一个-
if(sName[0] == '-') {
sName = sName.slice(1);
}
// 复制进入一个新字符串
let res = ''
for(let i = 0 , len = sName.length ; i < len ; i ++) {
if(sName[i] == '-') {
res += sName[++ i].toUpperCase();
}
else {
res += sName[i];
}
}
return res;
} function cssStyle2DomStyle(sName) {
// 判断第一个字符是否为'-',如果是就取后面的,不是就直接使用原值
sName = sName[0] === '-' ? sName.slice(1) : sName;
var item = sName.split('-');
for(var i=1,len=item.length;i<len;i++){
item[i] = item[i][0].toUpperCase() + item[i].slice(1);
}
return item.join('');
}
function cssStyle2DomStyle(sName) {
var arr = sName.split('-')
var inde = sName.indexOf('-')
if(inde == 0) {
inde = 2
} else {
inde = 1
}
for(var i = inde ; i < arr.length ; i++ ) {
var tempArr = arr[i].split('')
tempArr[0] = tempArr[0].toLocaleUpperCase()
arr[i] = tempArr.join('')
}
var nName = arr.join('')
return nName
} //利用正则表达式
function cssStyle2DomStyle(sName) {
if(sName[0] === '-'){
sName = sName.replace('-','');
}
var re = /-([a-z])/g;
sName = sName.replace(re, function (a, b) {
return b.toUpperCase();
});
return sName;
}
console.log(cssStyle2DomStyle('-webkit-border-image '));
//利用了数组,比较笨的方法....
function cssStyle2DomStyle(sName) {
var arr = sName.split('-');
var len = arr.length;
var result;
var brr;
if(arr[0] === ''){ //第一个为"",从第二个开始
result = arr[1];
for(var i = 2; i < len; i++){
brr = arr[i].split('');
brr[0] = brr[0].toUpperCase();
result += brr.join('')
}
}else{
result = arr[0];
for(var j = 1; j < len; j++){
brr = arr[j].split('');
brr[0] = brr[0].toUpperCase();
result += brr.join('')
}
}
return result;
}
console.log(cssStyle2DomStyle('-webkit-border-image '));
function cssStyle2DomStyle(sName) {
return sName.replace(/-([a-z])/g,function(full, letter, index){
return index > 0 ? letter.toUpperCase() : letter;
});
}
function cssStyle2DomStyle(sName) {var arr=sName.split('-');for(var i=0;i<arr.length;i++){if(arr[i]==""){arr.splice(i,1);i--;}else{if(i>=1){arr[i]=arr[i].match(/\b\w+\b/)[0].replace(/\w+/,function(word){returnword.substr(0,1).toUpperCase()+word.substr(1);} );}}}returnarr.join("");}
return sName.replace(/\-[a-z]/g , function(a, b){return b == 0 ? a.replace('-','') : a.replace('-','').toUpperCase();});
function cssStyle2DomStyle(sName) {
var arr = sName.split('');
//判断第一个是不是 '-',是的话就删除
if(arr.indexOf('-') == 0)
arr.splice(0,1);
//处理剩余的'-'
for(var i=0; i<arr.length; i++){
if(arr[i] == '-'){
arr.splice(i,1);
arr[i] = arr[i].toUpperCase();
}
}
return arr.join('');
}
function cssStyle2DomStyle(sName) { //使用正则将 前一位有-的字符替换为大写【-([a-z])】 //replace第二个参数为函数时: //函数的第一个参数是匹配模式的字符 【t】 //接下来的参数是与模式中的子表达式匹配的字符,可以有0个或多个这样的参数。【m】 //接下来的参数是一个整数,代表匹配在被替换字符中出现的位置【i】 //最后一个参数是被替换字符本身【这里没有用到】 return sName.replace(/-([a-z])/g,function(t,m,i){return i?m.toUpperCase():m;}) }