JavaScript RegExp 自动格式化模式
JavaScript RegExp to automatically format Pattern
我在stackflow社区中看到了很多格式化电话或号码(逗号和小数(的函数，就像这里和其他问题一样。这是我想要的：
步骤 1：为如下模式维护库：
var library = {
fullDate : {
pattern : /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/,
error : "Invalid Date format. Use YYYY-MM-DD format."
},
fullDateTime : {
pattern : /^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2} [0-9]{1,2}:[0-9]{1,2}$/,
error : "Invalid DateTime format. Use YYYY-MM-DD HH:MM (24-hour) format."
},
tel : {
pattern : /^'(?([0-9]{3})')?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/,
error : "Invalid Telephone format."
}
};
第 2 步：在他们键入时自动添加字符。例如，在日期中的 4 个数字后添加一个-。
我有一个文本字段说：
<input type="text" data-validate="fullDate" placeholder="YYYY-MM-DD"/>
以及可能从以下位置开始脚本：
$('body').on('keyup','input',function(){
var validate = $(this).data('validate');
var pattern = library[validate].pattern;
//Some more steps here....
});
但是，我不能再进一步了，因为我是正则表达式的新手。这是一个启动小提琴。任何人？
进一步说明：我已经能够使用以下函数进行验证，但我想要的是自动制作模式：
function validate(libraryItem, subject){
var item = library[libraryItem];
if(item !== undefined){
var pattern = item.pattern;
if(validatePattern(pattern, subject)){
return true;
} else {
return item.error;
}
}
return false;
}
function validatePattern(pattern, subject){
return pattern.test(subject);
}
它并不像你想象的那么复杂。您正在寻找的是 JQuery 屏蔽输入和其他替代库。这是文档。您所需要的只是：
<input id="date" type="text" placeholder="YYYY-MM-DD"/>
和脚本：
$("#date").mask("9999-99-99",{placeholder:"YYYY-MM-DD"});
这是演示笔链接：http://codepen.io/anon/pen/gpRyBp
要实现验证，请使用此库：https://github.com/RobinHerbots/jquery.inputmask
这里需要的是分解子表达式中的正则表达式，该表达式与字符串的一部分匹配，并根据正则表达式中的下一个字符建议完成。我写了一个朴素的解析器，它解析表达式并划分为原子子表达式。
var parser = function(input) {
var tokenStack = [];
var suggestions = [];
var suggestion;
var lookAhead;
if (input[0] === '/')
input = input.slice(1, input.length - 1);
var i;
for (i = 0; i < input.length - 1; i++) {
lookAhead = input[i + 1];
switch (input[i]) {
case '(':
tokenStack.push('(');
break;
case '[':
tokenStack.push('[');
break;
case ')':
if (tokenStack[tokenStack.length - 1] === '(') {
tokenStack.pop();
if (tokenStack.length === 0) {
suggestion = generateSuggestion(input, i);
if (suggestion !== null)
suggestions.push(suggestion);
}
}
else
throw 'bracket mismatch';
break;
case ']':
if (lookAhead === '{') {
while (input[i] !== '}')
i++;
}
if (tokenStack[tokenStack.length - 1] === '[') {
tokenStack.pop();
if (tokenStack.length === 0) {
suggestion = generateSuggestion(input, i);
if (suggestion !== null)
suggestions.push(suggestion);
}
}
else
throw 'bracket mismatch';
break;
default:
if (tokenStack.length === 0) {
suggestion = generateSuggestion(input, i);
if (suggestion !== null)
suggestions.push(suggestion);
}
break;
}
}
return suggestions;
}
var generateSuggestion = function(input, index) {
if (input[index].match(/[a-zA-Z'-' '.:]/) !== null)
return {
'regex': input.slice(0, index) + '$',
'suggestion': input[index]
};
else
return null;
}
这是parser()的示例输入和输出
parser('/^[0-9]{4}-[0-9]{1,2}-[0-9]{1,2}$/');
// output:
[ { regex: '^[0-9]{4}$', suggestion: '-' },
{ regex: '^[0-9]{4}-[0-9]{1,2}$', suggestion: '-' } ]
因此，在每keyup，您都需要检查parser生成的正则表达式列表，如果其中任何一个与输入匹配，则使用该建议。
编辑：
编辑generateSuggestion以仅匹配完整表达式。这是示例小提琴： http://jsfiddle.net/a7kkL6xu/6/
忽略退格键：http://jsfiddle.net/a7kkL6xu/7/
这可以通过单个正则表达式来完成。
这要求 MM：DD 和 HH：MM 为 2 位数字，YYYY 为 4 位
数字完全有效的条目，但匹配所有部分。
可以允许上述2位有效数字的个位数有效性。
但这样做会对- - [ ] :形式提出过早的建议。
如果您不想注入建议，那么 1 或 2 位数字就可以了。
JavaScript 不允许后瞻断言，因此部分字段表达式
位于其各自组中的有效字段表达式下方。
基本上，发生的事情是在每个按键事件上重写输入。
您要做的就是匹配事件处理程序中的当前输入。
如果没有建议，您只需覆盖整个匹配项(组 0(的输入。
匹配项(组 0(将仅包含有效的部分匹配或完全匹配项。
有效的已完成字段捕获组为 1 到 5
[ 年、月、日、小时、分钟 ]
不完整的字段捕获是组 6 到 10
[ 分钟， 小时， 星期， 月， 年 ]
这是逻辑：
// Note 1 - can handle control chars by just returning.
// Note 2 - can avoid rewrite by keeping a global of last good,
// then return if current == last.
if ( last char of group 0 is a dash '-' or space ' ' or colon ':'
or any of groups 6 - 10 matched
or group 5 matched )
set input equal to the group 0 string;
else if ( group 4 matched ) // Hours
set input equal to group 0 string + ':';
else if ( group 3 matched ) // Day
set input equal to group 0 string + ' ';
else if ( group 1 or 2 matched ) // Year or Month
set input equal to group 0 string + '-';
else // Here, effectively strips bad chars from input box
// before they are displayed.
set input equal to group 0 string;
请注意，如果组不匹配，则其值将为 NULL
并检查整个有效性，不应有部分和
组 1 - 3 必须仅完成 YYYY-MM-DD 或 1 - 5 与可选
时间 小时：毫米
最后说明：这是一个解析器，实际上是外观和感觉的测试用例，即闪烁，实时输入重写。
如果进展顺利，处理程序中的逻辑可以包括基于月份的日验证(和重写(。
此外，前提可以扩展到任何类型的输入，任何类型的形式和
形式分隔符组合等。
如果它有效，您可以构建一个库。
# /^(?:(19'd{2}|20[0-1]'d|202[0-5])(?:-(?:(0[1-9]|1[0-2])(?:-(?:(0[1-9]|[1-2]'d|3[0-1])(?:[ ](?:(0'd|1'd|2[0-3])(?::(?:(0'd|[1-5][0-9])|([0-5]))?)?|([0-2]))?)?|([0-3]))?)?|([01]))?)?|(19'd?|20[0-2]?|[12]))/
^ # BOL
(?:
( # (1 start), Year 1900 - 2025
19 'd{2}
| 20 [0-1] 'd
| 202 [0-5]
) # (1 end)
(?:
- # -
(?:
( # (2 start), Month 00 - 12
0 [1-9]
| 1 [0-2]
) # (2 end)
(?:
- # -
(?:
( # (3 start), Day 00 - 31
0 [1-9]
| [1-2] 'd
| 3 [0-1]
) # (3 end)
(?:
[ ] # space
(?:
( # (4 start), Hour 00 - 23
0 'd
| 1 'd
| 2 [0-3]
) # (4 end)
(?:
: # :
(?:
( # (5 start), Minutes 00 - 59
0 'd
| [1-5] [0-9]
) # (5 end)
|
( [0-5] ) # (6)
)?
)?
|
( [0-2] ) # (7)
)?
)?
|
( [0-3] ) # (8)
)?
)?
|
( [01] ) # (9)
)?
)?
|
( # (10 start)
19 'd?
|
20 [0-2]?
|
[12]
) # (10 end)
)
只有在此时唯一可能的选择下，才可以添加字符。一个例子是YYYY-MM-DD HH24:mm格式的正则表达式：可以添加-，:和(空格(。这是相应的正则表达式(+省略以使其更具可读性，它比问题中的更正严格，一些非法日期仍然可能是可能的，例如 2 月 31 日(：
^[0-9]{4}-(?:0[1-9]|1[0-2])-(?:0[1-9]|[12][0-9]|3[01]) (?:[01][0-9]|2[0-3]):[0-5][0-9]$
对于固定长度的输入，您可以使用@DineshDevkota的解决方案添加文字并使用正则表达式验证整个文本。我认为这是最干净，最简单的解决方案。您还可以捕获年，月和日以数学方式验证日期。此外，像"日期不在未来"或"过去最多 100 年"这样的规则只能在 JS 中验证，而不仅仅是正则表达式。
唯一想到可以自动添加字符的附加模式：
- 文字后面的
A+，例如 onA添加一个(?:foo){2,5} - 一般出现次数最少，例如在
foofoo添加时[fo]{2,5}不要与不能添加字符的(?:foo){1,3}bar混淆 - 变量部分最大长度之后的文字，例如在文本
foo|bar之后bar添加foofoofoo，
然后不可能。 - 添加余数，例如
ar键入oo时添加b，在键入^[a-z]+?(?:foo|bar)$时添加f(也可以在 3 所示的模式中使用(。 但这不适用于foo|flo|flu|food|fish因为我们不知道用户何时计划结束文本，并且它可能会变得非常复杂(sh只能在CC_29后添加fi(。
如 3. 和 4. 那些可以添加字符的附加情况，一旦存在长度可变的部分，其用途就非常有限。您必须解析正则表达式，将其拆分为文字和正则表达式部分。然后，您必须解析/分析正则表达式部分，以合并上面提到的可以添加字符的其他情况。如果你问我，真的不值得麻烦。(不能在电话模式中添加任何字符。
- jQuery中是否内置了任何字符串格式化函数
- Javascript，访问一个主要对象模块模式中的每个对象
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 试图在引导模式内动态生成图表，得到offsetWidth错误
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 如何缩短MongoDB ObjectId并在Mongoose模式中使用它
- D3.js模式不适用于弧形或圆环图
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- 模块模式和这个
- 带有let的JS/EECMAScript6私有字段的模式
- 我是否可以检测到javascript正在被卸载(作为调试模式）
- 执行动态模式弹出
- 注意:wp_enqueue_script调用不正确.在 Wordpress 调试模式下
- 使用模式格式化Number类型输入中的值
- 如何在谷歌可视化中组合数字和模式格式化程序
- 弹出格式化的模式对话框，并在用户确认时转发
- 格式化电话号码以匹配特定模式
- 格式化特定模式的数组编号
- JavaScript RegExp 自动格式化模式
