Question

我想用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 char长十六进制代码的第一个实际字符。我试图添加' g lobal'修饰符，但结果仍然相同。我的正则表达式应该怎么样？

这是一个关于我想要的例子：从任何类型的内联css定义，如： “border:1px solid #00ffff; background-color: #00ffaa; width: 500px ...etc”与“background-color: #00ffaa”部分匹配，并提取“#00ffaa”部分。

Answer 1

试试这个正则表达式：

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]);

希望它有所帮助。

Answer 2

有可能有更好的方法来完成你想要的 - 这是什么？

我认为你想要找到一些元素的颜色，因为它意味着什么 - 例如，如果背景是蓝色，它是侧边栏，或者如果按钮的背景是灰色的，它被禁用了，或者在你的情况下，如果所选的选项是粉红色，那么它就是一只狗。实质上，您将应用程序的部分状态存储在CSS属性中。但是，正如您已经发现的那样，一旦您设置了CSS，重新获得它可能并不容易。因此，最基本的解决方案是查看是否有一种方法来管理JS中的应用程序状态。

在您的情况下，您似乎想要在select元素中获取所选选项的背景颜色，以便对其执行某些操作。相反，请考虑为每个选项维护一系列相关信息;或者在您轻松获得的每个选项上添加数据属性;或者其他一些不需要在样式字符串内翻找的方法。

其次，有经验的HTML / CSS人员非常同意使用单独的样式属性不如使用类更可取。对于类，我可以通过设置类来在元素上设置一组属性;我可以使用标准DOM或jQuery API轻松查询，删除或替换类。

第三，它也非常同意使用regexp来解析语言 - 即使是像CSS这样简单的语言 - 这不是一个好主意。你总会错过一些东西，然后你的正则表达式会破裂。例如，在您的原始正则表达式和其中一个答案中，正则表达式将无效，除非冒号周围只有零个或一个空格。一些可怜的灵魂 - 也许你，也许是从现在起六个月后出现的新人 - 将要追查并修复当有人在结肠后放置两个空格时会出现的错误。

或者您将假设背景颜色始终使用十六进制值设置 - 并根据该假设构建代码。但随后新人出现并决定使用hsl指定颜色 - 并且代码将再次破坏。

第四，如果这对你来说是一个问题，那么＆＃34; regexp on style string＆＃34;只有在该元素上显式设置背景颜色属性时，方法才有效。例如，如果背景颜色来自CSS规则，则此方法不会提取它。通常情况下，这是人们建议使用getComputedStyle或jQuery .css()的点，这确实有效（尽管您仍然可以使用rgb(r,g,b)格式，如果你真的想要以十六进制格式，你必须转换） - 但问题仍然存在，为什么你＆＃34;存储＆＃34; CSS中需要再次退出的信息？当然有用例，但它们相对较少。

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

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

您可以在SO或其他地方找到convertRGBToHex的大量方法。

Answer 3

尝试以下方法

  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])

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

3 个答案: