分享题解02：FED10 颜色字符串转换

题目描述

将 rgb 颜色字符串转换为十六进制的形式，如 rgb(255, 255, 255) 转为 #ffffff

1. rgb 中每个 , 后面的空格数量不固定
2. 十六进制表达式使用六位小写字母
3. 如果输入不符合 rgb 格式，返回原始输入

示例1

输入：‘rgb(255, 255, 255)’
输出：#ffffff

首先是匹配三个255，之后转换成十六进制，输出使用字符串拼接。

function rgb2hex(sRGB) {
    // 匹配括号里面的数据
    let re = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
        ret = sRGB.match(re),
        head = "#";
    console.log('ret:' + ret);
    console.log('-----------------------------');
    if(!ret) return sRGB;
    else {
        for(let i = 1; i < ret.length; i++) {
            let x = parseInt(ret[i]);
            if(x >= 0 && x <= 255) {
                head += x < 16 ? '0' + x.toString(16) : x.toString(16);
            } else return sRGB;
        }
    }
    return head
}

var sRGB = 'rgb(255, 255, 255)';
rgb2hex(sRGB);

JavaScript match() 方法

定义和用法

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

语法

stringObject.match(searchvalue)
stringObject.match(regexp)
// searchvalue	必需。规定要检索的字符串值。
// regexp	    必需。规定要匹配的模式的 RegExp 对象。
       //如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 
       //构造函数，将其转换为 RegExp 对象。

返回值

存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

说明

match() 方法将检索字符串 stringObject，以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g，那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组，其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本，而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外，返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置，input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g，则 match() 方法将执行全局检索，找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串，则返回 null。如果找到了一个或多个匹配子串，则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同，它的数组元素中存放的是 stringObject 中所有的匹配子串，而且也没有 index 属性或 input 属性。

注意：在全局检索模式下，match() 即不提供与子表达式匹配的文本的信息，也不声明每个匹配子串的位置。如果您需要这些全局检索的信息，可以使用 RegExp.exec()。

console.log('----------- 测试 match ------------')
var sRGB = 'rgb(255, 255, 255)';
let re_g = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/g,
    ret_g = sRGB.match(re_g),
    re = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/,
    ret = sRGB.match(re);
console.log('ret_g:' + ret_g);
console.log(ret_g);
console.log('ret  :' + ret);
console.log(ret);
//输出结果
----------- 测试 match ------------
ret_g:rgb(255, 255, 255)
[ 'rgb(255, 255, 255)' ]
ret  :rgb(255, 255, 255),255,255,255
[
  'rgb(255, 255, 255)',
  '255',
  '255',
  '255',
  index: 0,
  input: 'rgb(255, 255, 255)',
  groups: undefined
] 

// console.log('ret  :' + ret);
// console.log(ret);
// 上面两个表达式输出结果不一致的原因是 “ + ” 字符串拼接
// 包含了类型转换

js正则表达式常用方法总结

1、test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var reg = /(\d{4})-(\d{2})-(\d{2})/;
var dateStr = '2018-04-18';
reg.test(dateStr);  //true

2、replace() 字符串替换

//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob 
var txt = str.replace(/microsoft/i,"Runoob");  replace() 方法使用正则表达式
var txt = str.replace("Microsoft","Runoob");   replace() 方法使用字符串

3、search() 方法 。用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str = "Visit Runoob!";
var n = str.search(/Runoob/i);     //6

4、match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。该方法类似 indexOf() 和 lastIndexOf()，但是它返回指定的值，而不是字符串的位置。

var str="Hello world!"
document.write(str.match("world") + "<br />")       //world
document.write(str.match("World") + "<br />")       //null  W 大写
document.write(str.match("worlld") + "<br />")      //null  l 多写
document.write(str.match("world!"))                 //world!
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))         //1,2,3

关于正则匹配的方法，参考此链接

若有不足之处，欢迎大家批评指正。