css颜色字符串转换, 字符串转化为驼峰形式
*
将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff
1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式,返回原始输入
input: 'rgb(255, 255, 255)'
output: #ffffff
function rgb2hex(sRGB) {
function int2hex(n, w) {
var m, s = [], c;
w = w || 4;
while (n>0) {
m = n % 16;
if (10 <= m) {
c = String.fromCharCode(97+m-10);
} else {
c = "" + m;
}
s.unshift(c);
n = Math.floor(n/16);
}
// length to pad '0'
var p = w-s.length;
if (p > 0) {
while (p--) {
s.unshift('0');
}
}
return s.join('');
}
/*
var trim = function(s) {
return s.replace(/(^\s*)|(\s*$)/g, "");
};
*/
return sRGB.replace(/^rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)$/,
function($0, $1, $2, $3) {
return '#' +int2hex($1) + int2hex($2) + int2hex($3);
});
}
console.log(rgb2hex('rgb(255, 255, 255)')); // #ffffff
console.log(rgb2hex('rgb(90, 103, 111)')); // #5a676f
console.log(rgb2hex('rgb(0,0,15)')); // #00000f
// 10进制整数 转化为16进制 2位
// ('0'+(+str).toString(16)).slice(-2)
function rgb2hex(sRGB) {
var int2hex = function(str) {
return ('0'+(+str).toString(16)).slice(-2);
};
return sRGB.replace(/^rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)$/,
function($0, $1, $2, $3) {
return '#' +int2hex($1) + int2hex($2) + int2hex($3);
});
}
* 字符串转化为驼峰形式
css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式,请完成此转换功能
1. 以 - 为分隔符,将第二个起的非空单词首字母转为大写
2. -webkit-border-image 转换后的结果为 webkitBorderImage
function cssStyle2DomStyle(sName) {
var ucfirst = function(s, delim) {
delim = delim || '-';
return s.split(delim).map(function(s) {
var c = s.charCodeAt(0);
if (65 <= c && c < 65 + 26) {
return s;
}
if (97 <= c && c < 97 + 26) {
c = c & 0xdf;
}
return String.fromCharCode(c) + s.substr(1);
}).join('');
}
var lowerFirstLetter = function(s) {
var i = 0,
c = s.charCodeAt(i);
while (i < s.length) {
if (97 <= c && c < 97 + 26) {
return s;
}
if (65 <= c && c < 65 + 26) {
c = c | 0x20;
break;
} else {
c = s.charCodeAt(++i);
}
}
return String.fromCharCode(c) + s.substr(i+1);
}
var s = ucfirst(sName);
return lowerFirstLetter(s);
}
console.log(cssStyle2DomStyle("-webkit-border-image")); // webkitBorderImage
console.log(cssStyle2DomStyle("font-size")); // fontSize
console.log(cssStyle2DomStyle("--selection")); // selection
/ / RegExp
// 链接:https://www.nowcoder.com/questionTerminal/2ded24e34ec34325a62d42d0c8479bae
// 来源:牛客网 function cssStyle2DomStyle(sName) {
return sName.replace(/(?!^)\-(\w)(\w+)/g, function(a, b, c){
return b.toUpperCase() + c.toLowerCase();
}).replace(/^\-/, '');
}
css颜色字符串转换, 字符串转化为驼峰形式的更多相关文章
- php 把驼峰样式的字符串转换成下划线样式的字符串
1.如何在php中把驼峰样式的字符串转换成下划线样式的字符串.例:输入是FooBar的话,输出则是foo_bar 以下是用正则的方式去完成,既然用到正则,方法肯定就不只一种,我们看下下面的方式 ech ...
- 已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”
题目:已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”. 代码: <!DOCTYPE html> &l ...
- PHP面试题之驼峰字符串转换成下划线样式例子
自己在看到这个问题的时候,想到的是用ASCII码来处理,没往万能的正则上去想.好吧,下面来看看答案: 答案1: 代码如下 复制代码 $str = 'OpenAPI'; $length = mb_str ...
- JavaScript学习笔记3之 数组 & arguments(参数对象)& 数字和字符串转换 & innerText/innerHTML & 鼠标事件
一.Array数组 1.数组初始化(Array属于对象类型) /*关于数组的初始化*/ //1.创建 Array 对象--方法1: var arr1=[]; arr1[0]='aa';//给数组元素赋 ...
- 字节流、字符串、16进制字符串转换__Java(转)
/** * @Package: * @ClassName:TypeConversion * @Description:字节流.字符串.16进制字符串转换 * @author:xk * @date:Ja ...
- java自带BASE64工具进行图片和字符串转换
java自带BASE64工具进行图片和字符串转换 import java.io.File; import java.io.FileInputStream; import java.io.FileOut ...
- Java字符串转换
public class StringConvertToInt{ public static void main(String[] args) { String a ="12a34bW()5 ...
- C# 判断字符串是否可以转化为数字
C# 判断字符串是否可以转化为数字 /// <SUMMARY> /// 判断字符串是否可以转化为数字 /// </SUMMARY> /// <PARAM name=&qu ...
- c++实现atoi()和itoa()函数(字符串和整数转化)
(0) c++类型所占的字节和表示范围 c 语言里 类型转换那些事儿(补码 反码) 应届生面试准备之道 最值得学习阅读的10个C语言开源项目代码 一:起因 (1)字符串类型转化为整数型(Integer ...
随机推荐
- 004 PCI Express体系结构(四)
一.PCI总线的中断机制 PCI总线使用INTA#.INTB#.INTC#和INTD#信号向处理器发出中断请求.这些中断请求信号为低电平有效,并与处理器的中断控制器连接.在PCI体系结构中,这些中断信 ...
- STM32—TIMx输出PWM信号驱动MG996R舵机
文章目录 一.前言 二.MG996R舵机简介 三.TIM定时器简介 四.通用定时器TIMx 1.TIMx主要功能 2.TIMx框图 3.计数单元 4.时钟选择 5.输出比较PWM 五.TIM3输出双路 ...
- Skywalking-07:OAL原理——解释器实现
OAL 解释器实现 OAL 解释器是基于 Antlr4 实现的,我们先来了解下 Antlr4 Antlr4 基本介绍 Antlr4 使用案例 参考Antlr4的使用简介这篇文章,我们实现了一个简单的案 ...
- 聊一聊中台和DDD(领域驱动设计)
本次分享价值:本次分享主要针对中台.微服务和领域模型的理念.本质及其构建方法论进行探讨.对领域分析的价值所在就是寻求"千变万化"中相对的"稳定性.第一性",然后 ...
- 针对Hbuilderx内置终端无法输入问题,总结了三种方法供大家参考
下图,是内置终端无法输入的现象(本人使用的第三种方案,解决了该问题) 第一种解决方案,也是网上推荐最多的方案: 打开Hbuilder安装路径下插件文件夹中的main.js文件:HBuilderX\pl ...
- 彻底搞懂volatile关键字
对于volatile这个关键字,相信很多朋友都听说过,甚至使用过,这个关键字虽然字面上理解起来比较简单,但是要用好起来却不是一件容易的事.这篇文章将从多个方面来讲解volatile,让你对它更加理解. ...
- 写webpack插件报警告Tapable.plugin is deprecated. Use new API on .hooks instead解决方案,webpack4插件新写法
最近写了个小插件报了个警告,然后去百度了一下,全都给我说extract-text-webpack-plugin这个插件有问题要更新,我也是无语了,这个插件我用都没用,百度翻了下齐刷刷全是这个答案,搞得 ...
- rest operater剩余操作符
rest叫做剩余操作符(rest operator),是解构的一种,意思就是把剩余的东西放到一个array里面赋值给它.一般只针对array的解构 //rest叫做剩余操作符(rest operato ...
- 小程序生成商品分享二维码海报解决方案和实现方式JAVA
使用技术: Graphics , 七牛云 , 微信sdk(github上非常出名的wxjava,地址https://github.com/Wechat-Group/WxJava/)直接上干货代码,每 ...
- 洛谷P1925 最大划分乘积的数学解法
题目 最大划分乘积 题解 这道题用到一点导数和数论的知识,很容易看出这道题是求函数 \[f(x)=(\frac{n}{x})^{x} \] ( \(x\) 为正整数)的最大值.我们可以对 \(ln(f ...