jquery regex continuous space

Question

I want to check input and want to show error if input is empty or entered continuous space. just one space allowed between words. e.g:

Test ok test

var pattern = /\s\s+/g;

$('a').click(function() {
  if ($('input').val().length <= 2 || pattern.test($('input').val())) {
    alert('error');
  } else {
    alert('ok go');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>check</a>
<input type="text"/>

It seems working, but it have issue, do this to find this issue:

Enter 5 space continuously, then click on check, it alert error but click again on check, it alert ok.

should error when user entered more than 2 space continuously.

Probably smoother to just remove the extra space on `keyup` with something like `$('input').val( $('input').val().replace(/\s+/g, ' ').trim() );` and dont even bother with the warning — Wesley Smith, Dec 23 '17 at 16:18
It looks like some regex caching. Set `pattern` inside click handler would resolved it — A. Wolff, Dec 23 '17 at 16:21
@A.Wolff hmm Interesting problem! yeah, problem solved! thanks. — , Dec 23 '17 at 16:24
@user8001250 Indeed quite interesting. I don't know enough V8 but it seems to be a bug to me — A. Wolff, Dec 23 '17 at 16:26
@user8001250 Ok this is the reason: https://stackoverflow.com/a/1520853/1414562 This isn't a bug but more like a bad design — A. Wolff, Dec 23 '17 at 16:30

score 0 · Answer 1 · answered Dec 23 '17 at 16:17

0

you can use trim method which will work better than your code in the if statement .

The trim() method removes white space from both ends of a string which in this case the value of the input , after that you can check if its equal to the empty string and will work fine

see the example below

var pattern = /\s\s+/g;

$('a').click(function() {
  if ($('input').val().trim()==='') {
    alert('error');
  } else {
    alert('ok go');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a>check</a>
<input type ="text" />

answered Dec 23 '17 at 16:17

mostafa tourad

4,308
1
12
21

not working when `asd///more space///asdasd` or `t` – Dec 23 '17 at 16:19
since you use jQuery than you might want to use `$.trim( someValue )` for browser support – Roko C. Buljan Dec 23 '17 at 17:14

ericw31415 · Answer 2 · 2017-12-23T17:06:42.950

From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test:

If the regex has the global flag set, test() will advance the lastIndex of the regex. A subsequent use of test() will start the search at the substring of str specified by lastIndex (exec() will also advance the lastIndex property).

The problem is after your regex is matched against the string, the lastIndex property will cause the next match to start after the previous match. You can verify this by outputting the value of pattern.lastIndex after each click.

You can fix this by manually setting lastIndex back to zero after each match, like

$('a').click(function() {
  pattern.lastIndex = 0;
  if ($('input').val().length <= 2 || pattern.test($('input').val())) {
    alert('error');
  } else {
    alert('ok go');
  }
});

You can also fix by getting rid of pattern all together and writing

$('a').click(function() {
  if ($('input').val().length <= 2 || /\s\s+/g.test($('input').val())) {
    alert('error');
  } else {
    alert('ok go');
  }
});

Note that you can change your pattern to /\s{2,}/g matching whitespace two or more times.

jquery regex continuous space

2 Answers2