Efficient way to convert space separated class list to a Jquery selector?

Question

Is there a fast, reliable way to convert a space-separated class list like:

classOne classTwo classThree

to a selector like:

$('.classOne .classTwo .classThree')

I'm thinking it could done with either a loop that builds a selector string, or a series of regular expressions (one to clean up extra spaces and a second to convert [space] to [space].), but I'd like to know if there’s a built-in way, or something more concise/efficient/clever.

You probably want `$(".classOne.classTwo.classThree")` instead of `$('.classOne .classTwo .classThree')`. You want to get element's `className` and convert it to a selector matching this element, right? — Seva Arkhangelskiy, Dec 15 '14 at 20:09
Actually, it could be `$(".classOne, .classTwo, .classThree")`, the exact formatting can be tweaked based on requirements. — Nick, Dec 16 '14 at 01:00

score 5 · Accepted Answer · edited Nov 13 '19 at 07:51

5

Sure

var klass = "classOne classTwo classThree";
var arr   = klass.split(/\s+/);
var selector   = '.' + arr.join('.');

$(selector)

FIDDLE

or more directly

$('.' + klass.split(/\s+/).join('.') )

edited Nov 13 '19 at 07:51

shreyas d

774
1
4
16

answered Dec 15 '14 at 19:38

adeneo

312,895
29
395
388

You need to add a space to the arr.join() call, otherwise its one long word. – Aweary Dec 15 '14 at 19:39

Karl-André Gagnon · Answer 2 · 2014-12-16T13:30:19.697

3

Simple, use .replace :

var className = 'classOne classTwo classThree';
$(className.replace(/(^ *| +)/g, '$1.'));

edited Dec 16 '14 at 13:30

answered Dec 15 '14 at 19:40

Karl-André Gagnon

33,662
5
50
75

Could you explain what the carrot and the pipe do in that context? – Nick Dec 15 '14 at 19:44
1

Let start with the pipe. The pipe is just a simple `or` so it will match either the left side or the right side of the pipe. `^` mean *start of the string*. so basically, `(^| )` mean *match the start of the string OR a space and replace it with what you just matched + a dot.* – Karl-André Gagnon Dec 15 '14 at 19:47

score 2 · Answer 3 · edited Dec 16 '14 at 19:20

2

How this compact RegEx:

var className = 'classOne classTwo classThree';
$(className.replace(/\b(\w)/g, '.$1'));

This will replace every set of word characters (ex: some classes) in the class list with dot + the word (ex: .some.classes) and then stick the result directly to a jQuery selector.

edited Dec 16 '14 at 19:20

Robbie Wxyz

7,671
2
32
47

answered Dec 15 '14 at 19:42

Toto

89,455
62
89
125

@M42: Maybe you could even get [this hat](http://winterbash2014.stackexchange.com/business-in-the-front-party-in-the-back) from it. – Robbie Wxyz Dec 16 '14 at 19:21

Seva Arkhangelskiy · Answer 4 · 2014-12-15T20:32:02.893

0

If you don't like regular expressions:

var className = "classOne classTwo classThree";
var selector = className.split(" ").map(function (_class) {return "." + _class}).join(" ");

You can split className with whitespaces and then use Array.prototype.map to create new array ([".classOne", ".classTwo", ".classThree"]). And then you just join it with whitespaces again.

edited Dec 15 '14 at 20:32

answered Dec 15 '14 at 19:39

Seva Arkhangelskiy

685
3
12

1

This answer turned up in the low quality review queue, presumably because you didn't explain the code. If you do explain it (in your answer), you are far more likely to get more upvotes—and the questioner is more likely to learn something! – The Guy with The Hat Dec 15 '14 at 20:26

score 0 · Answer 5 · edited May 23 '17 at 12:20

Based on this other answer,

var selector = className
    .replace(/(?=[^ \w])/g, '\\')   // Escape non-word characters
    .replace(/\b\d/g, '\\00003$&')  // Escape digits at the beginning
    .replace(/(^| +)(?!$| )/g, '.') // Add "." before classes, removing spaces

It works with

Untrimmed strings (at the beginning).
"Strange" class characters (/, $, *, etc.)
Classes which begin with a digit (invalid identifiers)

Efficient way to convert space separated class list to a Jquery selector?

5 Answers5