使用javascript匹配功能捕获十六进制颜色代码

Capture hexadec color code with javascript match function

本文关键字：十六进制 颜色 代码 功能 javascript 使用      更新时间：2023-09-26

我正在用javascript字符串捕获元素背景颜色的十六进制颜色代码。我使用这个脚本：

style = select.find(":selected").attr("style");
match = style.match(/background-color ?: ?(#[0-9a-f]{6})/i);
console.log(match);

上面的代码导致匹配数组有两个元素：

0: "background-color:#f"
1: "#f"

我不明白为什么我的正则表达式只捕获"#"和6个字符长的十六进制代码的第一个实际字符。我尝试添加'gglobal'修饰符，但结果仍然相同。我的正则表达式应该是什么样子？

以下是我想要的一个示例：从任何类型的内联css定义，比如："border:1px solid #00ffff; background-color: #00ffaa; width: 500px ...etc"匹配"background-color: #00ffaa"部分并提取"#00ffaa"部分。

试试这个正则表达式：

var string = "border:1px solid #00ffff; background-color: #00ffaa; width: 500px ...etc";
var answer = string.match(/background-color's*:'s*([^;]+)/);
console.log(answer);
document.write(answer[0] + '<br>' + answer[1]);

希望能有所帮助。

可能有更好的方法来实现您想要实现的目标——那就是什么？

我想你想找到某个元素的颜色，因为它意味着什么——比如，如果背景是蓝色，它是侧边栏，或者如果按钮的背景是灰色，它被禁用，或者在你的情况下，如果选择的选项是粉红色，那么它是一只狗。本质上，您将应用程序的部分状态存储在CSS属性中。但是，正如您所发现的，一旦您设置了CSS，重新将其取出可能并非易事。因此，最基本的解决方案是看看是否有办法在JS中管理应用程序的状态。

在您的情况下，您似乎想要在select元素中获得所选选项的背景色，以便对其进行处理。请考虑为每个选项维护一组相关信息；或者在你容易得到的每个选项上加上一个数据属性；或者不需要在样式字符串内部到处翻找的其他方法。

其次，经验丰富的HTML/CSS人员几乎都同意，使用单独的样式属性不如使用类更可取。有了类，我只需设置类就可以在元素上设置一组属性；我可以用标准DOM或jQueryAPI轻松地查询、删除或替换类。

第三，人们也一致认为，使用regexp解析语言——即使是CSS这样简单的语言——也不是一个好主意。你总是会错过一些东西，然后你的正则表达式就会崩溃。例如，在您的原始regexp和其中一个答案中的一个中，除非冒号周围正好有零或一个空格，否则regexp将不起作用。一些可怜的灵魂——也许是你，也许是六个月后新来的人——将不得不追踪并修复当有人在冒号后面加两个空格时会出现的错误。

或者，您将假设背景颜色总是使用十六进制值设置的，并在此假设基础上构建代码。但后来新来的家伙来了，决定用hsl指定一种颜色——代码会再次中断。

第四，如果这对您来说是一个问题，那么只有在该元素上显式设置了背景色属性时，"regexp on style string"方法才会起作用。例如，如果背景颜色来自CSS规则，那么这种方法就不会接受它。通常，这是人们建议使用getComputedStyle或jQuery的.css()的时候，这确实有效（尽管你仍然会得到rgb(r,g,b)格式，如果你真的想用十六进制格式，你必须转换它）——但问题仍然存在，你为什么要在CSS中"存储"信息，以便再次返回？当然有这样的用例，但它们相对较少。

如果你确定你需要从特定元素的样式中检索背景颜色，并使用十六进制格式（为什么？），那么获取它并转换它：

backgroundColor = select.find(":selected").css('backgroundColor');
rgbColor = convertRGBToHex(style);

你可以在SO或其他地方找到很多convertRGBToHex的方法。

尝试以下操作

  var txt='border:1px solid #00ffff; background-color: #00ffaa;';
var match = txt.match(/background-color ?: ?(#{1}(?:[A-F0-9]){6})(?![0-9A-F])/i);
console.log(match);
document.write(match[1])

相关文章：