javascript解析器_JavaScript中的RGB颜色解析器

javascript解析器

它是什么(What is it)

A JavaScript class that accepts a string and tries to figure out a valid color out of it. Some accepted inputs are for example:

一个JavaScript类，它接受字符串并尝试从中找出有效的颜色。 一些可接受的输入例如：

• rgb(0, 23, 255)
  rgb(0，23，255)
• #336699
  ＃336699
• ffee66
  ffe
• fb0
  fb0
• red
  红
• darkblue
  深蓝
• cadet blue
  学员蓝色

For more accepted inputs - see the demo.

有关更多可接受的输入，请参见演示。

Here's the javascript class - rgbcolor.js.

这是javascript类-rgbcolor.js 。

一些历史/动机 (Some history / motivation)

I was playing around with an idea (will post later) and I needed to get color information using the so-called computed styles. The thing is that I needed the exact amounts of Red, Green and Blue, so I needed to parse the value returned.

我当时正在研究一个想法(稍后再发布)，我需要使用所谓的计算样式来获取颜色信息。 事实是，我需要确切数量的红色，绿色和蓝色，因此我需要解析返回的值。

In FireFox when you get a computed style, it's in the format rgb(xxx, yyy, zzz) In IE, it's #xxyyzz. So I needed to parse both formats.

在FireFox中，当您获得计算样式时，格式为rgb(xxx, yyy, zzz)在IE中，它是#xxyyzz 。 所以我需要解析两种格式。

I decided to take my script one step further and make the color parsing into a seperate class. Then I added those string values - red, green, etc.

我决定将脚本更进一步，将颜色解析为单独的类。 然后我添加了这些字符串值-红色，绿色等。

The result is something you can use, among other purposes, as a friendlier user input field.

结果是您可以将其用作更友好的用户输入字段的用途。

如何使用 (How to use)

The class is defied in a function RGBColor(). When you instantiate the class, you pass the string to be poarsed. The class has variables for the three channels - red, green and blue and methods to get the parsed value - toHex() and toRGB().

该类在函数RGBColor() 。 当您实例化该类时，您将传递字符串以进行初始化。 该类具有用于三个通道(红色，绿色和蓝色)的变量以及用于获取解析值的方法-toHex()和toRGB()。

Example use:

使用示例：

var color = new RGBColor('darkblue');
if (color.ok) { // 'ok' is true when the parsing was a success
    // alert channels
    alert(color.r + ', ' + color.g + ', ' + color.b);
    // alert HEX and RGB
    alert(color.toHex());
    alert(color.toRGB());
}

怎么运行的 (How it works)

• The class accepts a string
  该类接受一个字符串
• Any leading # is stripped; spaces are stripped
  除去任何前导＃号； 空格被剥夺
• There' s a check against a list of valid color names, such as "red" and "darkorange" and these are mapped to a Hex code
  会检查有效颜色名称的列表，例如“ red”和“ darkorange”，并将它们映射到十六进制代码
• An array of objects is defined that have one regexp property and a function that knows what to do if the regexp find a match
  定义了一个对象数组，该对象具有一个regexp属性和一个知道regexp找到匹配项怎么办的函数
• There is a quick validation that the channel values are between 0 and 255
  快速验证通道值在0到255之间

• The two getters are defined - toHex() and toRGB()

  定义了两个吸气剂toHex()和toRGB()

• Finally there is a function that acts as both a self-documentation and self-uinttest, where a bunch of accepted values are automatically run through the class and parsed and the result is displayed as a help text.
  最后，有一个函数既可以用作自我说明文件，又可以用作自我测试，该函数会自动在类中运行并接受一堆接受的值并进行解析，并将结果显示为帮助文本。

The idea of the array of objects containing a regexp and a handler function is Simon Willison's. He did a script to parse dates, which I used and modified to work with time entries.

包含正则表达式和处理程序函数的对象数组的想法是Simon Willison的。 他做了一个脚本来分析日期，我使用并对其进行了修改以处理时间条目。

In my time parser I also introduced the idea of the self-documenting regexps and the help/test function which I'm reusing here again.

在我的时间解析器中，我还介绍了自我记录式正则表达式和帮助/测试功能的概念，在此我将再次使用它们。

全都是你的 (All yours)

Feel free to use the code for your own color picker tool or whatever you feel like. If you let me know how you use it, that would be even greater. Meanwhile any other comments are highly appreciated.

随意将代码用于自己的颜色选择器工具或任何您喜欢的颜色。 如果您让我知道如何使用它，那就更好了。 同时，任何其他评论都将受到高度赞赏。

And if I may rephrase a TV ad: Allowing your users to enter the color "Dark Khaki" - priceless! 😉

如果我可以改写电视广告：允许您的用户输入“ Dark Khaki”(深色卡其色)颜色-无价！ 😉

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/rgb-color-parser-in-javascript/

javascript解析器