正则表达式:匹配至少有一个非空白字符并且不超过指定长度

最近需要用到一个验证,规则为:至少有一个非空白字符并且不超过指定长度,想用正则表达式来处理,上网搜了一下,发现其他人也有和我一样的需求,并且有高手给了几个很精彩的解决方案,现将网上的解决方案整理一下,以备其他有相同需求的人参考。

chinmo 逆向思维解决方案

<script type="text/javascript">
/**
 * 至少有一个非空白字符并且不超过6个字符的正则表达式
 * 
 * 作者:chinmo
 * 整理:http://www.CodeBit.cn
 * 来源:http://topic.csdn.net/u/20090207/18/ffa003ed-ecd4-40e0-b81f-36aa1fe46d85.html#r_55136904
 */
var pattern = /^[s]{0,}$|^[ws]{7,}$/g;
var str = "";
var str1 = " ";
var str2 = "a";
var str3 = "abcdefgabcdefgabcdefgabcdefgg";
var str4 = " a ";

document.write(!pattern.test(str))
document.write(!pattern.test(str1))
document.write(!pattern.test(str2))
document.write(!pattern.test(str3))
document.write(!pattern.test(str4))
</script>

正则表达式规则分析:

  • ^[s]{0,}$ :整个字符串为空或者都是空白字符
  • ^[ws]{7,}$ : 整个字符串长度大于6

作者采用逆向思维,通过匹配不符合条件的情况,再通过取反(注意每个 document.write 中的感叹号)来实现要求达到的效果。

JK_10000 逆向思维解决方案简化版

<script type="text/javascript">
/**
 * 至少有一个非空白字符并且不超过6个字符的正则表达式
 * 
 * 作者:JK_10000
 * 整理:http://www.CodeBit.cn
 * 来源:http://topic.csdn.net/u/20090207/18/ffa003ed-ecd4-40e0-b81f-36aa1fe46d85.html#rt_55145516
 */
var pattern = /.{7}|^s*$/g;
var str = "";
var str1 = " ";
var str2 = "a";
var str3 = "www.CodeBit.cn";
var str4 = " a ";

document.write(!pattern.test(str))
document.write(!pattern.test(str1))
document.write(!pattern.test(str2))
document.write(!pattern.test(str3))
document.write(!pattern.test(str4))
</script>

正则表达式规则分析:

  • .{7} : 整个字符串长度大于6,注意:这里的 . 匹配任意字符
  • ^s*$ :整个字符串为空或者都是空白字符

JK_10000 正向思维解决方案

<script type="text/javascript">
/**
 * 至少有一个非空白字符并且不超过6个字符的正则表达式
 * 
 * 作者:JK_10000
 * 整理:http://www.CodeBit.cn
 * 来源:http://hi.baidu.com/jkisjk/blog/item/b54a7a3d1c7ce3c09f3d629b.html
 * 来源:http://topic.csdn.net/u/20090207/18/ffa003ed-ecd4-40e0-b81f-36aa1fe46d85.html#rt_55145611
 */
var pattern = /^(?!.{7}|^s*$)/g;
var str = "";
var str1 = " ";
var str2 = "a";
var str3 = "www.CodeBit.cn";
var str4 = " a ";

document.write(pattern.test(str))
document.write(pattern.test(str1))
document.write(pattern.test(str2))
document.write(pattern.test(str3))
document.write(pattern.test(str4))
</script>

正则表达式规则分析:

  • .{7} : 整个字符串长度大于6,注意:这里的 . 匹配任意字符
  • ^s*$ :整个字符串为空或者都是空白字符

作者使用了正则表达式的顺序否定环视 ,指明开始(^)后面不能有7个及以上字符,或者整个字符串为空(s 没有的情况下,^$表示内容为空),或者全部都是空白字符 (s*)。

不过,该正则表达式可以将环视条件中的 ^ 去掉,即 /^(?!.{7}|s*$)/g , 因为规则一开始就已经有了一个 ^ 。

<script type="text/javascript">
/**
 * 至少有一个非空白字符并且不超过6个字符的正则表达式
 * 
 * 作者:JK_10000
 * 整理:http://www.CodeBit.cn
 * 来源:http://hi.baidu.com/jkisjk/blog/item/b54a7a3d1c7ce3c09f3d629b.html
 * 来源:http://topic.csdn.net/u/20090207/18/ffa003ed-ecd4-40e0-b81f-36aa1fe46d85.html#rt_55145611
 */
var pattern = /^(?!.{7}|s*$)/g;
var str = "";
var str1 = " ";
var str2 = "a";
var str3 = "www.CodeBit.cn";
var str4 = " a ";

document.write(pattern.test(str))
document.write(pattern.test(str1))
document.write(pattern.test(str2))
document.write(pattern.test(str3))
document.write(pattern.test(str4))
</script>

wc 发布在 JK 博客评论中的方案

<script type="text/javascript">
/**
 * 至少有一个非空白字符并且不超过6个字符的正则表达式
 * 
 * 作者:wc
 * 整理:http://www.CodeBit.cn
 * 来源:http://hi.baidu.com/jkisjk/blog/item/b54a7a3d1c7ce3c09f3d629b.html
 */
var pattern = /^(?=.*?S)[sS]{0,6}$/g;
var str = "";
var str1 = " ";
var str2 = "a";
var str3 = "www.CodeBit.cn";
var str4 = " a ";

document.write(pattern.test(str))
document.write(pattern.test(str1))
document.write(pattern.test(str2))
document.write(pattern.test(str3))
document.write(pattern.test(str4))
</script>

正则表达式规则分析:

  • (?=.*?S) :肯定顺序环视,指定任意多个任意字符后面有个非空白字符
  • [sS]{0,6} : 6个以内的空白或者非空白字符

在 Javascript 中使用全局匹配修饰符 g 的时候要特别注意,可参考本站的另外一篇文章:Javascript 中使用 exec 进行正则表达式全局匹配时的注意事项

Javascript 中使用 exec 进行正则表达式全局匹配时的注意事项

在 Javascript 中使用 exec 进行正则表达式全局匹配时,有一个非常容易犯的错误,这是因为 exec() 在全局模式下的行为稍微有点复杂。本文就是介绍在使用 Javascript 中使用 exec 进行正则表达式全局匹配时的注意事项。

先看一下常见的用法:

 
<script type="text/javascript">
 
var pattern = /http://([^/s]+)/;
alert(pattern.exec('http://www.codebit.cn')); // http://www.codebit.cn,www.codebit.cn
alert(pattern.exec('http://YITU.org')); // http://YITU.org,YITU.org
 
// 也可以直接写成 /http://([^/]+)/.exec('http://www.codebit.cn');
 
</script>

接下来看一下全局模式下的诡异事件:

 
<script type="text/javascript">
 
var pattern = /http://([^/s]+)/g;   // 使用了 g 修饰符
alert(pattern.exec('http://www.codebit.cn')); // http://www.codebit.cn,www.codebit.cn
alert(pattern.exec('http://YITU.org')); // 并没有返回期望的 http://YITU.org,YITU.org ,而是返回了 null
 
</script>

第二个语句并没有返回期望的结果,而是返回了 null ,这是因为:


在全局模式下,当 exec() 找到了与表达式相匹配的文本时,在匹配后,它将把正则表达式对象的 lastIndex 属性设置为匹配文本的最后一个字符的下一个位置。这就是说,您可以通过反复调用 exec() 方法来遍历字符串中的所有匹配文本。当 exec() 再也找不到匹配的文本时,它将返回 null,并把 lastIndex 属性重置为 0。

下面是正常的全局模式下的匹配方式:

 
<script type="text/javascript">
 
var pattern = /http://([^/s]+)/g;
var str = "CodeBit.cn : http://www.codebit.cn | YITU.org : http://YITU.org"; 
var result;
while ((result = pattern.exec(str)) != null)  {
	alert("Result : " + result + "  LastIndex : " + pattern.lastIndex);
}
 
//Result : http://www.codebit.cn,www.codebit.cn  LastIndex : 34
//Result : http://YITU.org,YITU.org  LastIndex : 67
 
</script>

从上面的代码我们可以看到,之所以出现第二段代码中的问题,影响因素是 lastIndex ,所以我们可以通过将 lastIndex 手动置 0 的方式来解决这个问题。

 
<script type="text/javascript">
 
var pattern = /http://([^/s]+)/g;   // 使用了 g 修饰符
alert(pattern.exec('http://www.codebit.cn')); // http://www.codebit.cn,www.codebit.cn
pattern.lastIndex = 0;
alert(pattern.exec('http://YITU.org')); // http://YITU.org,YITU.org 
 
</script>

总结:

在全局模式下,如果在一个字符串中完成了一次模式匹配之后要开始检索新的字符串,就必须手动地把 lastIndex 属性重置为 0。

用 Javascript 实现只能输入数字的文本框

在制作表单(Form)的时候,我们通常会给表单元素添加一些输入规则,比如邮件地址、数字等,我们会在特定的时候执行验证,如果验证不通过,会给出一定的提示信息,本文介绍的是用 Javascript 实现只能输入数字的文本框:

用 Javascript 实现只能输入数字的文本框 – 示例

执行验证可以有以下几种方式:
1. 在输入的时候验证,这种验证有一定的特殊性,比如只能输入数字或者只能输入英文字符这样的规则才能应用,如果是 email 验证就不行。

2. 在输入完成时验证,即在 onblur 事件发生时验证。这个适用范围很广,基本上验证都可以使用。

3. 在提交表单时执行验证,即表单的 onsubmit 事件中执行验证。可以一次验证所有元素,适用范围最广。

三种方式第一种实时性最高,输入的时候就验证,第二种次之,在输入完成后验证,第三中最慢,必须在提交时验证,不过每种都有自己的好处和局限性,在应用中可以根据实际情况选用。

本文验证方式是只能输入数字,带有一定的特殊性,可以选用第一种:

 
<script type="text/javascript">
 
// 说明 : 用 Javascript 实现只能输入数字的文本框
// 整理 : CodeBit.cn ( http://www.CodeBit.cn )
 
function checkNumber(e)
{
	var key = window.event ? e.keyCode : e.which;
	var keychar = String.fromCharCode(key);
	var el = document.getElementById('test');
	var msg = document.getElementById('msg');
	reg = /d/;
	var result = reg.test(keychar);
	if(!result) 
	{
		el.className = "warn";
		msg.innerHTML = "只能输入数字";
		return false;
	}
	else
	{
		el.className = "";
		msg.innerHTML = "";
		return true;
	}
}
 
</script>
 
<div id="test">
	请输入数字:<input type="text" onkeypress="return checkNumber(event);" />
	<span id="msg"></span>
</div>

当我们在此元素中输入时,检测用户按键,如果不是数字键,就显示提示信息,实时性较强,当然,我们也可以采用另外两种方式。

在数值中加入千位分隔符的方法

为了方便阅读,我们通常会在一串长数字中加入“千位分隔符”,即将 1234567890.11 转换成 1,234,567,890.11 ,这样的任务交给正则表达式来处理再方便不过了,本文就介绍了这个问题的解决方法。

语法:

 
(?<=[0-9])(?=(?:[0-9]{3})+(?![0-9]))

使用范例:

 
<?php
 
// 说明:在数值中加入千位分隔符的方法
// 整理:CodeBit.cn ( http://www.CodeBit.cn )
 
$num = "1234567890.11";
 
$num = preg_replace('/(?<=[0-9])(?=(?:[0-9]{3})+(?![0-9]))/', ',', $num); 
 
echo $num;
 
?>