4

I'm creating an input mask used to for the length of items. This input will convert to a "proper" format on blur but it should accept numbers, decimals, spaces, single quotes, double quotes and / for fractions (no letters).

I've got an okay start, but I'm no regex master and feel I'm complicating my pattern too much. So the following values are allowed:

5 6 (feet and inches separated by spaces)

5'6" (feet and inches in the correct format)

5.2 6 (decimal feet separated by spaces)

5.2'6" (decimal feet in the correct format)

5 6.1 (decimal inches separated by spaces)

5'6.1" (decimal inches in the correct format)

5.2 6.1 (decimal feet and inches separated by spaces)

5.2'6.1" (decimal feet and inches in the correct format)

5 6 1/2 (any combination above followed by a space and fraction)

5.2'6.1 1/2" (again with decimals)

78" (only inches)

78.4" (only inches with a decimal)

Rather picky, I know. I've got something that's a work in progress and I've broken it down to be more readable (to myself at least). http://jsfiddle.net/t37m0txu/383/

// allow numbers
var p_num = "[0-9]";

// numbers are up to 9 characters (it needs a range, for some reason)
var p_range = "{0,9}";

// allow a single decimal
var p_dec = "([.]{0,1})";

// allow a single space (needs to happen only if not directly followed by a decimal)
var p_space = "([ ]{0,1})";

// numbers, possible single decimal and/or space
var p_base = p_num + p_range + p_dec + p_space;

// only allow a single/double quote after a number
var p_afternum = "?(?=" + p_num + ")";

// allow a single or double quote
var p_quote = "(\'(0?" + p_base + ")?\|\"$)";

// issues: 
// i do not need a range/cap on numbers
// after using decimal or space - only one number is allowed to follow (do not cap the range on numbers, only decimal/space)
// do not allow a space directly following a decimal
// do not allow a decimal directly following a single or double quote

var ex = "(" + p_base + ")" + p_afternum + p_quote + "(0?" + p_base + ")?\""
0m3r
  • 12,286
  • 15
  • 35
  • 71
triplethreat77
  • 1,276
  • 8
  • 34
  • 69
  • Maybe https://regex101.com/r/zlXQnA/2 (javascript doesn't like the named groups) group 1 is feet, 2 is inches. – chris85 Mar 13 '17 at 19:47

1 Answers1

1

How to scan for only valid feet and inches input

This scan uses REGEX masking combined with input mask to create a powerful, feet and inches only textbox.

ex = "[\\d]+(?:\\.[\\d]+|)(?:\\s\\d+\\/\\d+|)(?:\\s|\\'|\\\"|)[\\d]+(?:\\.[\\d]+|)(?:\\s\\d+\\/\d+|)(?:\\'|\\\"|)";
$('#feet').inputmask('Regex', { regex: ex });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/RobinHerbots/jquery.inputmask/3.x/dist/jquery.inputmask.bundle.js"></script>
So the following values are allowed:<br /><br />

5 6 (feet and inches separated by spaces)<br />
5'6" (feet and inches in the correct format)<br />
5.2 6 (decimal feet separated by spaces)<br />
5.2'6" (decimal feet in the correct format)<br />
5 6.1 (decimal inches separated by spaces)<br />
5'6.1" (decimal inches in the correct format)<br />
5.2 6.1 (decimal feet and inches separated by spaces)<br />
5.2'6.1" (decimal feet and inches in the correct format)<br />
5 6 1/2 (any combination above followed by a space and fraction)<br />
5.2'6.1 1/2" (again with decimals)<br />
78" (only inches)<br />
78.4" (only inches with a decimal)<br />
    
<input id="feet" />

<br />
Neil
  • 14,063
  • 3
  • 30
  • 51
  • Something isn't escaped when I paste it into my js. What do I need to add to fix it? – triplethreat77 Mar 13 '17 at 19:51
  • ^[\d]+(?:\.[\d]+|)(?:\s\d+\/\d+|)(?:\s|\'|\"|)[\d]+(?:\.[\d]+|)(?:\s\d+\/\d+|)(?:\'|\"|)$ – Neil Mar 13 '17 at 19:52
  • I added the ^ and the $ so that it has to match the full string. – Neil Mar 13 '17 at 19:52
  • Yeah, add the ^$ – Neil Mar 13 '17 at 19:54
  • Oh, we just had to escape the special characters: http://jsfiddle.net/nfnneil/t37m0txu/395/ – Neil Mar 13 '17 at 20:20
  • Amazing! Thank you so much. Where did you learn regex patterns? – triplethreat77 Mar 13 '17 at 20:36
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/137962/discussion-between-nfn-neil-and-triplethreat77). – Neil Mar 13 '17 at 20:38
  • Sorry, I can't find where I learned it, if it occurs to me, I'll comment here. – Neil Mar 13 '17 at 20:42
  • I need an edit to that input mask for millimeters. 1200m is a valid value. Nothing else can follow the "m" and the "m" is only allowed if there are no single quotes, double quotes, decimals or spaces. // 1200mm / 304.8 = 3.937007874015748 (3 ft) -> 3'11 3/16" (millimeter, 1 Foot = 304.8 Millimeters) – triplethreat77 Mar 14 '17 at 16:59