如何从RGB格式颜色字符串中提取指定颜色分量值？

嘿，这个问题我刚好处理过，给你两种实用的方法来提取蓝色分量，顺便讲讲通用的RGB颜色值提取思路～

一、提取蓝色分量的具体实现 #

方法1：字符串分割法 #

这种方法简单直接，适合格式规整的RGB字符串：

// 假设你拿到的RGB字符串
const rgbStr = "rgb(221, 110, 43)";
// 截取括号内的内容：从第4位（跳过"rgb("）到倒数第1位（跳过")"）
const innerContent = rgbStr.slice(4, -1);
// 按逗号分割，同时处理可能存在的空格（用正则分割匹配逗号+任意空格）
const [red, green, blue] = innerContent.split(/,\s*/).map(numStr => parseInt(numStr, 10));
console.log(blue); // 输出 43

方法2：正则表达式法 #

这种方法更鲁棒，能兼容不同空格格式的RGB字符串（比如rgb(221,110,43)或rgb(221 , 110 , 43)）：

const rgbStr = "rgb(221, 110, 43)";
// 正则匹配RGB格式，捕获三个数字组
const rgbMatch = rgbStr.match(/rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\)/);
if (rgbMatch) {
  // 第三个捕获组就是蓝色分量，转成整数
  const blue = parseInt(rgbMatch[3], 10);
  console.log(blue); // 输出 43
}

二、提取RGB颜色值的通用方法 #

不管你要提取红、绿、蓝哪个分量，通用思路可以分为两种：

思路1：字符串操作流程 #

• 第一步：剥离RGB字符串的外层标识（比如去掉开头的rgb(和结尾的)）
• 第二步：将剩余的内容按逗号分割成数组，同时处理掉元素前后的空格（避免因为空格导致转换数字失败）
• 第三步：将数组中的每个字符串元素转换为整数，分别对应红（索引0）、绿（索引1）、蓝（索引2）分量

思路2：正则表达式匹配流程 #

• 第一步：编写适配RGB格式的正则表达式，通过捕获组提取三个数字（正则可以兼容不同的空格情况）
• 第二步：检查匹配结果是否存在，若存在则从捕获组中取出对应的数字并转换为整数
• 第三步：如果需要兼容RGBA格式，只需稍微修改正则为rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)(?:\s*,\s*\d+)?\)，就能同时处理带透明度的颜色字符串

内容的提问来源于stack exchange，提问作者RukkiesMan