3

I am actually got a angular form and some input inside. The purpose is to upload files in a cloud. So, I got an input for a directory path which could contain some sub-directories. So I got a regex on my JS in a scope like this: $scope.regex = "^[^\/]\S+$";

this regex would accept any characters if its not a "/" at first character.

and here's my angular code:

<input name="directory" id="directory" type="text" class="form-control" ng-pattern="regex" ng-model="directoryName" placeholder="Enter a directory name"/>

<span class="error" ng-show="uploaderForm.directory.$error.pattern">directory path can't start by a "/"</span>

Normally, with this regex, this path should be success: 

directory/subdirectories/filename...

and this one shouldn't: 

/directory/subdirectories/filename...

But my problem is that when i'm writing something like : test/subtest/blablabla, I got the ng-show error...

Note that my input can also be a single char, like a.

Cœur
  • 37,241
  • 25
  • 195
  • 267
Cupkek05
  • 458
  • 1
  • 6
  • 22

1 Answers1

1

Use

$scope.regex = "^[^/]\\S*$";

Or its equivalent regex literal notation:

$scope.regex = /^[^\/]\S*$/;

The first issue is solved with doubling the backslashes. To define a literal \ in JS string literal, you need to double it. See this thread.

The second problem is solved with replacing + (1 or more) with * (0 or more) quantifier. \S+ matches one or more non-whitespace chars, and \S* will match zero or more chars other than whitespace.

Details

  • ^ - start of string
  • [^\/] - any char other than /
  • \S* - zero or more non-whitespace chars
  • $ - end of string.

Just in case you also want to allow an empty string, you may use a lookahead based regex:

$scope.regex = /^(?!\/)\S*$/;

Here, (?!\/) is a negative lookahead that will fail the match if the first char is /.

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
  • Won't using double backslash actually match `'\'` literally followed by a `S`? – CinCout Aug 21 '17 at 12:46
  • @CinCout: No, see https://stackoverflow.com/questions/17863066/why-do-regex-constructors-need-to-be-double-escaped – Wiktor Stribiżew Aug 21 '17 at 12:47
  • Ah. The constructor is getting a `string`. Perfect – CinCout Aug 21 '17 at 12:48
  • Thanks man, and what if i just want to accept tilda, underscore, and letters at first please? – Cupkek05 Aug 21 '17 at 12:51
  • do I have to add other signs one by one after the "/" ? – Cupkek05 Aug 21 '17 at 12:52
  • *What if i just want to accept tilda, underscore, and letters at first* - then use [`/^[~_a-zA-Z]\S*$/`](https://regex101.com/r/g7hoPt/1). – Wiktor Stribiżew Aug 21 '17 at 12:57
  • ok, if i understood well, the combo of both should be: `/[^\/]^[~_a-zA-Z]\S*$/`? – Cupkek05 Aug 21 '17 at 13:03
  • No, `[^\/]^[~_a-zA-Z]\S*$` is a pattern that will never match any string. Just use `/^[~_a-zA-Z]\S*$/`. `[~_a-zA-Z]` is a *positive* character class that matches `~`, `_`, or an ASCII letter. It can't match `/`. The `[^/]` is a *negated character class* due to `^` after `[` and that means it matches any char but `/`. – Wiktor Stribiżew Aug 21 '17 at 13:04
  • I used this one, but actually when im writing something like _blabla, I got an error, or I began with a _ – Cupkek05 Aug 21 '17 at 13:08
  • Show me a fiddle. – Wiktor Stribiżew Aug 21 '17 at 13:10
  • what do you want to see ? I got the same code as bellow, just modified `$scope.regex = "^[~_a-zA-Z]\S*$";` on JS side and try to write _directory/something and directory/something and ~directory/something on my input and got the error – Cupkek05 Aug 21 '17 at 13:13
  • I told you to use `$scope.regex = /^[~_a-zA-Z]\S*$/;`. If you want to use a string literal, you must double escape the backslashes, `$scope.regex = "^[~_a-zA-Z]\\S*$";`. Re-read [this thread](https://stackoverflow.com/questions/17863066/why-do-regex-constructors-need-to-be-double-escaped). – Wiktor Stribiżew Aug 21 '17 at 13:15
  • Yep, ok it works fine with string literal, i didn't get the difference between both. but now i got it :) Thanks man – Cupkek05 Aug 21 '17 at 13:18
  • Just [have a look here](https://jsfiddle.net/4x9jy39a/), it will be even clearer. – Wiktor Stribiżew Aug 21 '17 at 13:22