jQuery - Capturing HEX color strings

Question

I need help for a little task. I have a configuration file where I have to get the specified HEX color code:

; List of colors to use for
; the cards in the game
; Colour Memory

#3be6c4     
#e6e03b
#6f3be6 ; This purple shade could be nicer...
#4fe63b
#e63b3b 
#ff5a00 
#ff00de
#3b8fe6

On my jQuery code, I know how to read the data from the file, but what I need now is to take ONLY the HEX codes (cutting out blank lines and comments), and put each one into an array. It's a regex matter I guess, but I'm kind of stocked :D

Many thanks

@Brian, /#[a-f0-9]{6}/i matches hex, a-z is most certainly incorrect. — zzzzBov
– zzzzBov, Commented Sep 20, 2013 at 18:58

Patrick Evans · Accepted Answer · 2013-09-20 19:07:55Z

2

use /#[0-9a-f]{6}/ig as the regular expression, no need for jquery as it can all be easily done without the library.

var data = "your file data here";
hexcodes = data.match(/#[0-9a-f]{6}/ig);

hexcodes will contain

[
    "#3be6c4",
    "#e6e03b",
    "#6f3be6",
    "#4fe63b",
    "#e63b3b",
    "#ff5a00",
    "#ff00de",
    "#3b8fe6"
]

edited Sep 20, 2013 at 19:07

answered Sep 20, 2013 at 18:59

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zzzzBov Over a year ago

# belongs inside the / chars.

Luca Ballore Over a year ago

It seems to don't work with that regex. It does with this one: /\b[0-9A-F]{6}\b/gi

adeneo · Accepted Answer · 2013-09-20 19:06:09Z

1

It can be done without a regex as well.
Get the string content of the file, split on newlines and map the values, adding an empty string for anything that doesn't start with #, and then filter out the empties :

var arr = 'string with hex codes'.split('\n');

var hex = $.map(arr, function(color) {
    return $.trim(color).indexOf('#') === 0 ? $.trim(color).slice(0,7) : '';
}).filter(function(n) { return $.trim(n).length; });

FIDDLE

edited Sep 20, 2013 at 19:06

answered Sep 20, 2013 at 18:59

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Here you go: http://jsfiddle.net/ECuux/1/

Uses this regex: /\b[0-9A-F]{6}\b/gi

The basic code I used:

var configFile; // Your file as a string

configFile.match(/\b[0-9A-F]{6}\b/gi)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 20, 2013 at 19:02

Jake

4,26410 gold badges38 silver badges60 bronze badges

1 Comment

Luca Ballore Over a year ago

I've just edited your regex by adding the "#" character, like that /#\b[0-9A-F]{6}\b/gi

Collectives™ on Stack Overflow

jQuery - Capturing HEX color strings

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related