Need help refactoring this jquery snippet

Question

I'm almost embarrassed to say that I can't figure out a better way to do this. Can someone help me with refactoring this code? I tried doing a few "or" operators in one match function, but it didn't seem to take em.

$('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) {          

    console.log($(this).attr('class'));

    optionsClass = 'ui-icon-pencil';
    confirmClass = 'ui-icon-check';
    closeClass = 'ui-icon-close';
    deleteClass = 'ui-icon-trash';

    icon = $(this).attr('class').match(optionsClass);

    if(icon == null) {
    icon = $(this).attr('class').match(confirmClass);
    }
    if(icon == null) {
    icon = $(this).attr('class').match(closeClass);
    }
    if(icon == null) {
    icon = $(this).attr('class').match(deleteClass);
    }

    console.log('icon = '+icon);

});

Rob W · Accepted Answer · 2012-03-16 16:14:34Z

2

When you utilise a RegExp, do it in the right way:

$('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) {
    var icon = /\bui-icon-(?:pencil|check|close|trash)\b/.exec(this.className);
    if (icon) { // If a match is found
        icon = icon[0];
    }
    console.log('icon = ' + icon);
});

this.className holds a (white-space separated) list of class names
/ui-icon- ... / is a RegExp literal.
regex.exec(input_string) is equivalent, but neater than input_string.match(regex).

When a match is found, icon will be an array in the following format:

[full match, group1, group2, ..., groupN]

To see the full match without the separate groups, use icon[0] (first element of icon array).

The string.match converts the first argument to a RegExp. Generally, regex.exec is preferred over string.match, because the latter method would fail if the input is not a string (unexpected?).

Explanation of my RegEx: \b matches a word boundary. (?:pencil|check|close|trash) is a dereferenced RegEx group, which matches "pencil", "check", "close" or "trash".

edited Mar 16, 2012 at 16:14

answered Mar 16, 2012 at 16:05

Rob W

351k87 gold badges811 silver badges683 bronze badges

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

5 Comments

Catfish Over a year ago

Can you explain what this does?

Rob W Over a year ago

@Catfish I have added references + a brief explanation at the bottom of my answer. Are you familiar with Regular expressions?

Catfish Over a year ago

This doesn't quite work. It returns things like icon = ui-icon-pencil,pencil. I need just ui-icon-pencil.

Jim H. Over a year ago

It's an array. icon[0] will give you the first element.

Rob W Over a year ago

@Catfish Updated answer with more explanation, plus [0].

nathanjosiah · Accepted Answer · 2012-03-16 16:06:45Z

1

$('.ui-icon-pencil, .ui-icon-check, .ui-icon-close, .ui-icon-trash').hover(function(e) {          

    var icon = $(this).attr('class').match(/ui-icon-(?:pencil|check|close|trash)/)[0]
    console.log('icon = '+icon);

});

answered Mar 16, 2012 at 16:06

nathanjosiah

4,4594 gold badges38 silver badges47 bronze badges

1 Comment

nathanjosiah Over a year ago

.match() returns an array of matches found, [0] returns the whole match found.

Collectives™ on Stack Overflow

Need help refactoring this jquery snippet

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related