0

I want to write a regular expression for input box validation with respect to Gherkin syntax.The valid example inputs are like this Ex: 

Given I enter "www.google.com"
And enter keyword "new york"
When I click on "Images"
Then I can see "image list"

Basically, I am trying for: any case(Given|When|And|Then)+String+"String in quotes"

i tried this but not working: (Given|When|And|Then)^[A-Za-z]+$/"(?:[^"\]|\.)*"/

created a form like this 

<body ng-app="app">
 <form name="exampleForm" class="elegant-aero">
   <label>Test Step:</label>
   <input type="email" name="steps" ng-model="teststeps" ng-pattern="(Given|When|And|Then)^[A-Za-z]+$/"(?:[^"\\]|\\.)*"/" required/>
   <div ng-messages="exampleForm.steps.$error">
     <div ng-message="required">This field is required</div>
     <div ng-message="pattern">Must be a valid gherkin syntax</div>
   </div>
 </form>
</body>

CodePenn

Aravin
  • 6,605
  • 5
  • 42
  • 58
ronypatil
  • 153
  • 2
  • 3
  • 19
  • Is it correct to say you're trying to make a web form to validate gherkin syntax, NOT make use of Gherkin via cucumber? – DVG Jan 08 '16 at 20:15
  • yes. Right now I am just making client side validation on front end. – ronypatil Jan 08 '16 at 20:17
  • I think the quoted string should be unwrapped using unroll the loop technque: [`^(Given|When|And|Then)(?:\s+[A-Za-z]+)+\s+"[^"\\]*(?:\\.[^"\\]*)*"$`](https://regex101.com/r/jK6qU8/1). This way it will be more efficient. – Wiktor Stribiżew Jan 08 '16 at 20:29
  • yes this regex seems to be good. But when i use in ng-pattern it doesn't work because of multiple quotes i guess – ronypatil Jan 08 '16 at 20:39
  • 1
    You can work around the quotes using `\x22` with `^(Given|When|And|Then)(?:\s+[A-Za-z]+)+\s+\x22[^\x22\\]*(?:\\.[^\x22\\]*)*\x22$`. Also, you have `type="email"` and I think it should be `type="text"`. I added that as an answer since it seems working. – Wiktor Stribiżew Jan 08 '16 at 22:58

2 Answers2

1

To answer your question, this seems to work, and performs captures of each segment:

(Given|When|Then|AND)([^"]+)(".+")

To go a bit further, trying to validate a language with a grammer via a regex embedded in the DOM sounds extremely painful and a bad idea. Especially since Gherkin doesn't really follow the format you suggest in your question.

If you need to do this for some reason, I'd suggest you use the actual gherkin library to parse the string: https://github.com/cucumber/gherkin3

DVG
  • 17,392
  • 7
  • 61
  • 88
1

You need to use

<input type="text" name="steps" ng-model="teststeps" ng-pattern="/^(Given|When|And|Then)(?:\s+[A-Za-z]+)+\s+\x22[^\x22\\]*(?:\\.[^\x22\\]*)*\x22$/" required/>

See updated pen

First, change type to text. Second, mind that quotes cannot be used as plain or escaped ones, you need to either use &quot; or \x22 in the pattern. Third, the quoted C strings (with escape sequences) are better matched with an unrolled pattern (i.e. "[^"\\]*(?:\\.[^"\\]*)*") - it is the most efficient pattern I know for those "..." strings.

Wiktor Stribiżew
  • 607,720
  • 39
  • 448
  • 563
  • Thank you !! Just Quick modification i faced that If i want to add string after quoted string. Ex. Given If i enter "100" in search box. I tried this Regex but not working : ^(Given|When|And|Then)(?:\s+[A-Za-z]+)+\s+"[^"\\]*(?:\\.[^"\\]*)*"$\s*(?:\s+[A-Za-z]+)* – ronypatil Jan 10 '16 at 07:24
  • Try `^(Given|When|And|Then)(?:\s+[A-Za-z]+)+\s+\x22[^\x22\\]*(?:\\.[^\x22\\]*)*\x22$`, see [this demo](https://regex101.com/r/fO2kV4/1). – Wiktor Stribiżew Jan 10 '16 at 08:29
  • 1
    Thanks. I finally settled up with ^(given|when|and|then)(?:\s+[A-Za-z]+)+\s+\x22[^\x22\\]*(?:\\.[^\x22\\]*)*\x22(?:(\s*[A-Za-z])*)?$ Do you know how to make (Given|when|then|add) case insensitive in regex ? – ronypatil Jan 13 '16 at 20:39
  • 1
    To make the pattern case insensitive you can use `/i` modifier: `"/^(Given|When|And|Then)(?:\s+[A-Za-z]+)+\s+\x22[^\x22\\]*(?:\\.[^\x22\\]*)*\x22$/i"` – Wiktor Stribiżew Jan 13 '16 at 20:43