Restrict input to the range 1..25 with Angular - regex

In an input form like the following:
<div class="row">
<label for="input">Value</label>
<input type="text" id="input" [(ngModel)]="player.input" name="input"
required pattern=" ([1-9]+(\.[0-9]{1,2})?|[1][0-9]+(\.[0-9]{1,2})|[2][0-4]+(\.[0-9]{1,2})?|25|25.0|25.00)" #input="ngModel">
<div [hidden]="input.valid || input.pristine"
class="alert alert-danger">
input must be between 1-25 with decimal places
</div>
</div>
How can I restrict the input to the range of 1 to 25, inclusive, with two decimal places?
Valid inputs: 25.00, 24.99, 08.89, 9.98
Invalid inputs: 255.00, 244.999, 24.999

Try this regex:
^(([1-9]|1[0-9]|2[0-4])(\.[0-9]{1,2})?|25|25\.0|25\.00)$
Explanation:
(
[1-9] match 1-9
1[0-9] match 10-19
2[0-4] match 20-24
)
(\.[0-9]{1,2})? match an optional decimal component with 1 or 2 digits
|25|25\.0|25\.00 or match 25, 25.0, or 25.00 exactly
Demo

Related

Regexp: negative lookahead that don't allow an open tag inside a tag

I'm looking for a negative lookahead that don't allow an open tag inside a tag, I try
failing negative lookahead #1
/(<(\w+)[^>]*>)((?!<\2).*?)(<\/\2>)/gs
see the example
failing negative lookahead #2
/(<(\w+)[^>]*>)((?!<\2).*)(<\/\2>)/gs
see the example
alpha
<div>
alpha<div>
beta<div>
x < y divided by 4
</div>
</div>
</div>
<div>
<span style="font-size: 8pt;" disabled title="data">
<span>
infinite
</span>
<?= $record->id ?>
</span>
<div> equal </div>
</div>
<div> sum </div>
When x y and y > 0
<div style="font-size: 8pt;" >Summary</div>
Equation id <?= $equation->id ?>
In this exampled they're the once containing:
x < y divided by 4
infinite
equal
sum
summary
Here is a regex you may want to use:
.*?<(\w+)[^>]*>((?:(?!<\1>).)*?)<\/\1>|.*
Click on it for explanation and also to see how to use it.

Match values in pairs from Html using RegEx

I need to use Regex only to extract the following output:
Match 1: (Group 1: Packaged Quantity) (Group 2: 1)
Match 2: (Group 1: Width) (Group 2: 14.7 cm)
Given the following input:
<li>
<div class="col-3"> Packaged Quantity </div>
<div class="col-5"> 1 </div>
</li>
<li>
<div class="col-3"> Width </div>
<div class="col-5"> 14.7 cm </div>
</li>
So far I have tried using :
(?<=class=\"col-3\">)[^<]+|(?<=class=\"col-5\">)[^<]+
This gives me 4 different matches. But I want two matches, with two groups in each match. I know I could use xpath to do the same, but I am limited to use Regex for some constraints that I won't be able to comment on.
You can match the col-3"> at the start, then capture non-< characters for the first group, match </div> followed by non-> characters, and capture non-< characters again for the second group:
col-3">([^<]+)<\/div>[^>]+>([^<]+)
https://regex101.com/r/YAZFvV/1
(that said, if at all possible, it would be better to use a proper HTML parser for this sort of thing)

HTML validation rules with regex

I need to validate a code format:
Need to be 10 characters
A mix of letters and numbers
At least 1 letter from a-f
and I write:
<input maxlength="200" type="text" name="code" id="code" required="required" class="form-control input-lg" pattern="[a-fA-F0-9]{10}" title="Wrong Code" placeholder="Security Code" />
so my pattern is pattern="[a-fA-F0-9]{10}" but HOW I can add rules that at least 1 letter from a-f is required?
You could use a positive lookahead (?= to assert that what follows contains at least 1 occurance of [a-fA-F]
Updated version suggested by Wiktor Stribiżew
(?=[0-9]*[a-fA-F])[a-fA-F0-9]{10}
Explanation about the positive lookahead (?=[0-9]*[a-fA-F])
(?: Non capturing group
[0-9]* Match zero or more times a digit
[a-fA-F] Match a-f in lower or uppercase
) Close non capturing group
<form>
<input maxlength="200" type="text" name="code" id="code" required="required" class="form-control input-lg" pattern="(?=[0-9]*[a-fA-F])[a-fA-F0-9]{10}" title="Wrong Code" placeholder="Security Code" />
<input type="submit" name="submit">
</form>
Regex pattern to match at least 1 number and 1 character in a string
/^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+)$/
Look at the regex in this thread, it should fit your needs. You need to replace your pattern with it.
try this one
<form action="/action_page.php">
<input type="text" name="code" id="code" required="required" class="form-control input-lg" pattern="(?=[a-fA-F0-9]*[a-fA-F])[a-fA-F0-9]{10}" title="Wrong Code" placeholder="Security Code" />
<input type="submit">
</form>
<b>
<pre>
1)Need to be 10 characters
2)A mix of letters and numbers
3)At least 1 letter from a-f
</pre></b>
There is already an accepted answer, but that one is not complete.
The requirements state that there needs to be "A mix of letters and numbers" and "At least 1 letter from a-f". That would mean that these entries below would match as well:
8adfl9542a
m0ammmmmmm
11111a1111
They do not match in the accepted answer. I created my own regex which shows that the above entries match as well:
(?=.*[a-fA-F]+)(?=.*[0-9]+)[a-zA-Z0-9]{10}
Explanation:
(?=.*[a-fA-F]+) Match at least one character from a-f (upper- or lowercase)
(?=.*[0-9]+) Match at least one number
[a-zA-Z0-9]{10} Total string must be 10 characters long and must consist of characters from a-z (upper- or lowercase) or numbers

HTML5 input pattern (prevent first to 0)

I try to let the user input a version number.
With a minimum of 3 numbers in pairs of 2 like:
1.1.1
or
11.11.11
or
11.10.11.1
I only NOT want that the first number starts with a 0 like:
01.1.1
or
0.11.11.11
I not want the 0 (i am very happy i came this far)
<form onsubmit="alert('Submitted.');return false;">
<input type="text" required="" pattern="((^|\.)(([1-9]?\d))){2,4}$" value="" placeholder="Try it out.">
<input type="submit" value="»">
</form>
Use
input:valid {
color: black;
}
input:invalid {
color: red;
}
<form onsubmit="alert('Submitted.');return false;">
<input type="text" required pattern="[1-9]\d?(?:\.\d{1,2}){1,3}" value="" placeholder="Try it out.">
<input type="submit" value="»">
</form>
The pattern will be translated to /^(?:[1-9]\d?(?:\.\d{1,2}){1,3})$/ and will match
^(?: - start of the string with a non-capturing group start
[1-9]\d? - a digit from 1 to 9 and then any optional digit
(?:\.\d{1,2}){1,3} - 1 to 3 occurrences of:
\. - a dot
\d{1,2} - any 1 or 2 digits
)$ - end of the automatically generated group and end of the string.
See the regex demo online.

HTML pattern does't work even with correct regular expression

Regular expression: ((?=.*\d)(?=.*[A-Z]))
Input string: qwer1Q
The input string above pass the validation if you check it in regex101
However, if you include the regex in a html pattern attribute and try to validate the same string again, it shall not pass:
<form>
<div>
<input type="text" placeholder="Password"
pattern="((?=.*\d)(?=.*[A-Z]))">
</div>
<div>
<button>Submit</button>
</div>
</form>
You need to make sure the pattern matches (and consumes) the entire string because the HTML5 pattern regex is anchored by default.
<form>
<div>
<input type="text" placeholder="Password"
pattern="(?=.*\d)(?=.*[A-Z]).*">
</div>
<div>
<button>Submit</button>
</div>
</form>
The (?=.*\d)(?=.*[A-Z]).* pattern will be turned into ^(?:(?=.*\d)(?=.*[A-Z]).*)$ and it will match:
^ - start of string
(?: - start of a non-capturing group:
(?=.*\d) - a positive lookahead check to make sure there is at least 1 digit
(?=.*[A-Z]) - a positive lookahead check to make sure there is at least 1 uppercase letter
.* - any 0+ chars, greedily, up to the end of string
) - end of the non-capturing group
$ - end of string.