CODEWITHSUNDEEP
javascriptregex
Lau
Lau

Reputation: 179

RegExp case insensitive search for whole word with variable

I have an object with strings properties I want to compare to multiple user inputs using case insensitivity. My goal is to match input strings to object strings to increment the associated value by 1 (if it's a match). 

var objArr = [
    {"O": 0},
    {"foo": 0},
    {"faa": 0},
    {"A": 0}
];

Everything is working smoothly except for the case insensitivity. The RegExp method I used just looks for one letter instead of the whole word. I'm probably not using the right syntax, but I can't find results on google which explain the /i flag along with a variable. My closest try was :

var re = new RegExp(b, "i"); //problem here 
if (allinputs[i].value.match(re)) { //and here

This code indeed allows case insensitivity but it doesn't look for the whole object property string and stops for letters. For exemple typing "foo" will result in a match to "O" because it contains the letter "O", and the property "O" is before "foo". Accordingly, typing "faa" matches to "faa" and not "A", because "faa" is before "A" in the objects array. Strings that don't exist in my object like "asfo" will still be matched to "O" because of the one common letter.

Is there a way to search for the whole property string with case insensivity using the regExp /i flag ? I want to avoid using .toUpperCase() or .toLowerCase() methods if possible.

Fiddle here : https://jsfiddle.net/Lau1989/b39Luhcu/

Thanks for your help

Upvotes: 3

Views: 5890

Answers (2)

3ocene
3ocene

Reputation: 2210

To check that a regex matches the entire string, you can use the assert beginning character (^) and assert end ($).

For example, hello matches e but not ^e$.

For your code, just prepend ^ to the regex and append $:

var re = new RegExp("^" + b + "$", "i");

fiddle

Edit: Some characters have special meanings in regexes (^, $, \, ., *, etc). If you need to use any of these characters, they should be escaped with a \. To do this, you can use this simple replace:

str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");

So, your regex will end up being

new RegExp("^" + b.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&") + "$", "i");

See this question for more about escaping a regex.

You could also just convert the two strings to lowercase and then compare them directly. This will allow you to use special characters as well.

if (stringA.toLowerCase() == stringB.toLowerCase())) {
    ...
}

Upvotes: 3

Fabricio
Fabricio

Reputation: 76

Your approach was almost right, but you need limitate your regular expression to avoid an any match using ^ (start of string) and $ (end of string).

Here is a code that I made that may fit to your need:

function process() {

var allinputs = document.querySelectorAll('input[type="text"]');
var list = new Array();
var input = "";

objArr.map(function(value, index, array){ list.push(Object.keys(value))})

for(var i = 0; i < allinputs.length; i++)
{
     input = allinputs[i];
     if(input.value)
     {
          list.map(function( item, index, array ) {
              var re = new RegExp("^"+input.value+"$", "i");
              if(item.toString().match(re))
              {
                  allinputs[i].value = "1";
                  objArr[index][item] += 1;
          allinputs[i].style.backgroundColor = "lime";
                  document.getElementById('output').innerHTML += item + " : " + objArr[index][item] + "<br />";
               }
         });
     }
  }

}

The first thing here is create a list of keys from your objArr, so we can access the key names easily to match with what you type

  objArr.map(function(value, index, array){ list.push(Object.keys(value))})

Then the logic stills the same as you already did, a for loop in all inputs. The difference is that the match will occur on list array instead of the objArr. As the index sequence of list and objArr are the same, it's possible to access the object value to increment.

I used the .map() function in the list array, bit it's also possible use a for loop if you prefer, both method will work.

I hope this help you!

Upvotes: 2

Related Questions