JavaScript正则表达式
什么是正则表达式？
正则表达式（英语：Regular Expression，RegExp是正则表达式的缩写。）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。RegExp对象用于存储检索模式。正则表达式主要用来验证客户端的输入数据，可以节约大量的服务器端的系统资源，并且提供更好的用户体验。而String和RegExp都定义了使用正则表达式进行强大的模式匹配和文本检索与替换的函数。正则表达式可以：
1.测试字符串的某个模式
例如，可以对一个输入字符串进行测试，看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
2.替换文本
可以在文档中使用一个正则表达式来标识特定文字，然后可以全部将其删除，或者替换
为别的文字。
3.根据模式匹配从字符串中提取一个子字符串
可以用来在文本或输入字段中查找特定文字。
正则表达式语法：/正则表达式主体/修饰符(可选)
一个正则表达式就是由普通字符（例如字符a到z）以及特殊字符（称为元字符）组成的文字模式。该模式描述在查找文字主体时待匹配的一个或多个字符串。正则表达式作为一个模板，将某个字符模式与所搜索的字符串进行匹配。
简写 var re=http://; //只写两斜杠，浏览器会认为是注释，所以尽量不要给他为空，注意两斜杠之间不要有引号
全称 var re=new RegExp(); //Reg是正则的简写，Exp是表达式的简写
大部分情况用简写，只有一种情况用全称写法：正则需要传参的时候
注：全称写法用到\时，需要两个\，否则是转义字符
正则表达式的使用，可以通过简单的办法来实现强大的功能。下面先给出一个简单的示例：
- ^ 为匹配输入字符串的开始位置。
- [0-9]+匹配多个数字， [0-9] 匹配单个数字，+ 匹配一个或者多个。
- abc$匹配字母 abc 并以 abc 结尾，$ 为匹配输入字符串的结束位置。
我们在写用户注册表单时，只允许用户名包含字符、数字、下划线和连接字符(-)，并设置用户名的长度，我们就可以使用以下正则表达式来设定。
正则表达式中常用符号
正则表达式中的方括号用于查找某个范围内的字符。
正则表达式中方括号的应用
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
正则表达式中常用元字符的含义
| 表达式 | 描述 |
|---|---|
| . | 匹配除换行符以外的任意字符 |
| \w | 匹配字母或数字或下划线 |
| \s | 匹配任意的空白符 |
| \d | 匹配数字 |
| \b | 匹配单词的开始或结束 |
| ^ | 匹配字符串的开始 |
| $ | 匹配字符串的结束 |
正则表达式中常用限定符的含义
| 表达式 | 描述 |
|---|---|
| * | 重复零次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复零次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
正则表达式中常用反义词的含义
| 表达式 | 描述 |
|---|---|
| \W | 匹配任意不是字母，数字，下划线，汉字的字符 |
| \S | 匹配任意不是空白符的字符 |
| \D | 匹配任意非数字的字符 |
| \B | 匹配不是单词开头或结束的位置 |
| [^x] | 匹配除了x以外的任意字符 |
| [^aeiou] | 匹配除了aeiou这几个字母以外的任意字符 |
字符转义：如果想查找元字符本身的话，比如查找.,或者*,就出现了问题：没办法指定它们，因为它们会被解释成别的意思。这时就得使用\来取消这些字符的特殊意义。因此，应该使用.和*。当然，要查找\本身，也得用\， 例如：unibetter.com匹配unibetter.com，C:\Windows匹配C:\Windows。
分组：要想重复单个字符，直接在字符后面加上限定符就行了；想要重复多个字符，可以用小括号来指定子表达式(也叫做分组)，然后就可以指定这个子表达式的重复次数了。
JavaScript eval() 函数
定义和用法
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。
语法
eval(string)
| 参数 | 描述 |
|---|---|
| string | 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。 |
返回值
通过计算 string 得到的值（如果有的话）。
JavaScript replace() 方法
定义和用法
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
语法
stringObject.replace(regexp/substr,replacement)
| 参数 | 描述 |
|---|---|
| regexp/substr | 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意，如果该值是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp 对象。 |
| replacement | 必需。一个字符串值。规定了替换文本或生成替换文本的函数。 |
返回值
一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
使用 replace 替换匹配到的数据
var pattern = /gift/ig;
var str = 'This is a Gift order!，That is a Gift order too';
alert(str.replace(pattern, 'simple')); //将 Gift 替换成了 simple
本案例中：
input.value=input.value.replace(/.$/,''); //正则表达式实现回退功能
JavaScript substring() 方法
定义和用法
substring() 方法用于提取字符串中介于两个指定下标之间的字符。
语法
stringObject.substring(start,stop)
| 参数 | 描述 |
|---|---|
| start | 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。 |
| stop | 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。 |
返回值
一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop减 start。
说明
substring() 方法返回的子串包括 start 处的字符，但不包括 stop 处的字符。
如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。
提示和注释
重要事项：与 slice() 和 substr() 方法不同的是，substring() 不接受负的参数。
随机数 random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。
语法：
Math.random();
注意：返回一个大于或等于 0 但小于 1 的符号为正的数字值。
我们取得介于 0 到 1 之间的一个随机数，代码如下：
<script type="text/javascript">
document.write(Math.random());
</script>
运行结果：
0.190305486195328
注意:因为是随机数，所以每次运行结果不一样，但是0 ~ 1的数值。
获得0 ~ 10之间的随机数，代码如下:
<script type="text/javascript">
document.write((Math.random())*10);
</script>
运行结果：
8.72153625893887
向下取整floor()
floor() 方法可对一个数进行向下取整。
语法:
Math.floor(x)
参数说明：
注意：返回的是小于或等于x，并且与 x 最接近的整数。
我们将在不同的数字上使用 floor() 方法，代码如下:
<script type="text/javascript">
document.write(Math.floor(0.8)+ "<br>")
document.write(Math.floor(6.3)+ "<br>")
document.write(Math.floor(5)+ "<br>")
document.write(Math.floor(3.5)+ "<br>")
document.write(Math.floor(-5.1)+ "<br>")
document.write(Math.floor(-5.9))
</script>
运行结果：
0
6
5
3
-6
-6
JavaScript push() 方法
定义和用法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法
arrayObject.push(newelement1,newelement2,....,newelementX)
| 参数 | 描述 |
|---|---|
| newelement1 | 必需。要添加到数组的第一个元素。 |
| newelement2 | 可选。要添加到数组的第二个元素。 |
| newelementX | 可选。可添加多个元素。 |
返回值
把指定的值添加到数组后的新长度。
说明
push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
提示和注释
注释：该方法会改变数组的长度。
提示：要想数组的开头添加一个或多个元素，请使用 unshift() 方法。
实例
在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度：
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)
</script>
输出：
George,John,Thomas
4
George,John,Thomas,James
JavaScript 定时器
在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。 定时器类型： 一次性定时器：仅在指定的延迟时间之后触发一次。 间隔性触发定时器：每隔一定的时间间隔就触发一次。 定时器方法：
setTimeout()定时器
setTimeout()定时器，在载入后延迟指定时间后,去执行一次表达式,仅执行一次。
语法:
setTimeout(代码,延迟时间);
参数说明：
- 要调用的函数或要执行的代码串。
- 延时时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms)。
当我们打开网页3秒后，在弹出一个提示框，代码如下:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
setTimeout("alert('Hello!')", 3000 );
</script>
</head>
<body>
</body>
</html>
当按钮start被点击时，setTimeout()调用函数，在5秒后弹出一个提示框。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function tinfo(){
var t=setTimeout("alert('Hello!')",5000);
}
</script>
</head>
<body>
<form>
<input type="button" value="start" onClick="tinfo()">
</form>
</body>
</html>
要创建一个运行于无穷循环中的计数器，我们需要编写一个函数来调用其自身。在下面的代码，当按钮被点击后，输入域便从0开始计数。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0;
function numCount(){
document.getElementById('txt').value=num;
num=num+1;
setTimeout("numCount()",1000);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt" />
<input type="button" value="Start" onClick="numCount()" />
</form>
</body>
</html>
取消定时器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止定时器。
语法:
clearTimeout(id_of_setTimeout)
参数说明: id_of_setTimeout：由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
下面的例子和上节的无穷循环的例子相似。唯一不同是，现在我们添加了一个 “Stop” 按钮来停止这个定时器：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
var num=0,i;
function timedCount(){
document.getElementById('txt').value=num;
num=num+1;
i=setTimeout(timedCount,1000);
}
setTimeout(timedCount,1000);
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="txt">
<input type="button" value="Stop" onClick="stopCount()">
</form>
</body>
</html>
动态改变元素样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
基本属性表（property）:
注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。
看看下面的代码:
改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：
<p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script>
结果:
改变元素的可见性 ：
上述案例增加代码：mychar.style.display="none";//改变元素的可见性，隐藏元素，设为block变为显示元素
网页中经常会看到显示和隐藏的效果，可以通过display属性来设置。
语法：
Object.style.display = value
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
value取值:
