Making contains selector not case sensitive

Question

I have an editor for non technical people to build their specific application. A few places though I need to insert an 'em' after the value they enter so it passes it correctly to my back-end.

For this I have something like this

$( "input[name*='width']" ).on( "focusout", function(){
  var value = $(this).val();
  if(value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && $(this).val().length != 0){
    var newVal = value+'em';
    $(this).val(newVal).trigger('change');
  }
});

My question is. Is there a way to make that selector non-case sensitive so I don't have to repeat the code twice one with a lower case and one with an uppercase to catch all the cases?

To the possible duplicate. I cannot use that answer. I have already looked at that and can't use the filter in this case.

possible duplicate of [Case insensitive jQuery attribute selector](http://stackoverflow.com/questions/19465157/case-insensitive-jquery-attribute-selector) — HashPsi, Sep 04 '15 at 13:39
@HashPsi, I have looked at that and cannot use that answer. I need to be able to use this format and not returns. — zazvorniki, Sep 04 '15 at 13:41
Is Question referencing selector `$( "input[name*='width']" )` ? Is there element with both `Width` , `width` values ? — guest271314, Sep 04 '15 at 13:42
Your selector is `"input[name*='width']"` - is that the one you need to make case insensitive — mplungjan, Sep 04 '15 at 13:42
PS: the <=0 means you will add emem if someone types em only — mplungjan, Sep 04 '15 at 13:44
@mplungjan, they're not that technical to know what em means so the likelihood of them typing em is low to none. — zazvorniki, Sep 04 '15 at 13:45

palaѕн · Answer 1 · 2015-09-04T14:01:42.213

1

You can use this custom expression:

$.expr[':'].nameCaseInsensitive = function (node, stackIndex, properties) {
    return node.name.toLowerCase().indexOf(properties[3]) > -1 ;
};

and use like:

$('input:nameCaseInsensitive("width")').on('focusout',...);

FIDDLE DEMO

edited Sep 04 '15 at 14:01

answered Sep 04 '15 at 13:42

palaѕн

72,112
17
116
136

I can't put this on all of my input fields. Only the ones that contain the word width. – zazvorniki Sep 04 '15 at 13:44

guest271314 · Answer 2 · 2015-09-04T13:50:44.177

1

Try utilizing .filter() String.prototype.match() , with i flag set at RegExp

$("input").filter(function() {
  return $(this).attr("name").match(/width/i) !== null
})

edited Sep 04 '15 at 13:50

answered Sep 04 '15 at 13:44

guest271314

1
15
104
177

Jamiec · Answer 3 · 2015-09-04T13:56:00.510

1

About the only thing you can do is select all input elements with a name attribute, and filter them using a case-insensitive comparison

$('input[name]').filter(function(){
    return $(this).attr('name').match(/width/i);
}).on('focusout',...);

edited Sep 04 '15 at 13:56

answered Sep 04 '15 at 13:48

Jamiec

133,658
13
134
193

I'm really trying to avoid this because I have some couple hundred inputs at any given time. And I need to call it several times already for different field. I don't want to make this super heavy. – zazvorniki Sep 04 '15 at 13:50
I dont think you have any option. The contains selector is case sensitive. – Jamiec Sep 04 '15 at 13:53
@zazvorniki - see update - by adding `[name]` you're now only looking at input which have a name attribute - hopefully that narows it down a bit. – Jamiec Sep 04 '15 at 13:55
They all have name attributes. haha I'm thinking of maybe tiring to create an array of each field I need than then doing a loop with the contains. – zazvorniki Sep 04 '15 at 14:00
1

How many fields are you talking about? Even with a couple of hundred fields on the page (which is a lot!) this will run quite fast indeed. Before overengineering a solution, you should check you actually have a problem. – Jamiec Sep 04 '15 at 14:01
@zazvorniki _"They all have name attributes. haha I'm thinking of maybe tiring to create an array of each field I need than then doing a loop with the contains."_ ? See _"I'm really trying to avoid this because I have some couple hundred inputs at any given time. And I need to call it several times already for different field. I don't want to make this super heavy."_ ? – guest271314 Sep 04 '15 at 14:01
@guest271314, I don't understand what you're trying to say. Looping through a couple of strings is not heavy at all. – zazvorniki Sep 04 '15 at 14:03
@zazvorniki I think he was telling ME that you've already answered my question above. – Jamiec Sep 04 '15 at 14:04
@Jamiec, it's almost the weekend. That's my excuse and I'm sticking to it! :) – zazvorniki Sep 04 '15 at 14:08
1

@zazvorniki Attempted to convey that "create an array of each field I need than then doing a loop with the contains." could be considered "heavy" ? Where `.filter()` is single loop of input elements , even more specific with `[name]` included at selector ? _"it's almost the weekend."_ Some still do stuff at weekend same as weekday :) – guest271314 Sep 04 '15 at 14:09
@guest271314, I'm only looping through several different strings instead of every input on the screen. And with the filter I would have to repeat the code several times for each variable. I'm just trying to simplify my code a bit. I've been working three weeks straight without any weekends, so my brain is starting to shut down at the prospect of a break. :) – zazvorniki Sep 04 '15 at 14:20

score 0 · Answer 4 · answered Sep 04 '15 at 13:42

0

You can use match like this:

matches = value.match(/px|em/i);
if ($(this).val().length && matches !== null && matches['index'] <= 0) {
    var newVal = value+'em';
    $(this).val(newVal).trigger('change');
}

answered Sep 04 '15 at 13:42

Mihai Matei

24,166
5
32
50

I'm looking at the name selector, not the px em. That's what I'm adding to the end of the input. – zazvorniki Sep 04 '15 at 13:43

score 0 · Accepted Answer · answered Sep 04 '15 at 14:12

I started to really think about this and came up with a different kind of solution. Since I do have multiple fields that I want this one I created an array of all said fields.

var valueArray = ["padding", "width", "Width", "height", "Height", "spacing", "Spacing", "size", "Size"];

and then used the code above to loop through the fields listed in the array. This way I don't even look at the other inputs on the screen, I don't have to worry about it being case sensitive and I don't have to repeat code.

for(var i = 0, ii = valueArray.length; i < ii; i++){
            $( "input[name*='"+valueArray[i]+"']" ).on( "focusout", function(){
                var value = $(this).val();
                if(value.indexOf("em") <= 0 && value.indexOf("px") <= 0 && $(this).val().length != 0){
                    var newVal = value+'em';
                    $(this).val(newVal).trigger('change');
                }
            });
        }

Wait, so this wasnt about case sesitivity at all? It was just about 2 variations - `Width` and `width`.... you should have just gone with one of the early suggestions of `name*="idth"`. Simples! — Jamiec, Sep 04 '15 at 14:34
No, I just put the most common use cases above. I didn't want to type out all the variations here. using just idth could select fields I don't want selected. — zazvorniki, Sep 04 '15 at 15:09

Making contains selector not case sensitive

5 Answers5