则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的。

实例：

var patt = /runoob/i

实例解析：

/runoob/i 是一个正则表达式。

runoob 是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

search() 方法使用正则表达式

实例

使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：

varstr = "Visit Runoob!"; varn = str.search(/Runoob/i);

输出结果为：

6

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

实例

检索字符串中 "Runoob" 的子串：

varstr = "Visit Runoob!"; varn = str.search("Runoob");

replace() 方法使用正则表达式

实例

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

varstr = document.getElementById("demo").innerHTML; vartxt = str.replace(/microsoft/i,"Runoob");

结果输出为:

Visit Runoob!

replace() 方法使用字符串

replace() 方法将接收字符串作为参数：

varstr = document.getElementById("demo").innerHTML; vartxt = str.replace("Microsoft","Runoob");

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

正则表达式参数可用在以上方法中 (替代字符串参数)。

正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

正则表达式模式

方括号用于查找某个范围内的字符：

元字符是拥有特殊含义的字符：

量词:

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

实例

var patt = /e/;

patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

true

你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：

/e/.test("The best things in life are free!")

使用 exec()

e

oading动画在页面过度等经常会用到，我在工作中就写过很多有趣的loading加载动画，在这里，我就分享一个波浪效果的loading动画写法（在写动画前，可以先画个草稿或动画流程图，充分思考动画执行的过程，再编写代码事半功倍哦）。

一、首先看下效果图：

二、html代码很简单，就是一个外层div，加上几个运动的span（动画效果的只有span，外层div仅仅是为了方便span居中）：

<div class="loading">
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
</div>

三、css代码我们一步一步分析：

1、让loading居中显示，同时让它变成flex容器，这样span就能设置宽高。

.loading{display: flex; width: 100px; height: 50px; position: absolute; top:50%; left: 50%; transform: translate(-50px,-25px);}

2、分析下这10个span的动画过程：我们把动画从开始到结束分成100份，0%的时候高度几乎没有，位置靠左，高度由小变大，大概15%的时候，突然变很高，颜色很深，并且右移很多，然后依次变矮，变浅，左移，以此类推。通过这个分析，我们写起来就有方向了。

2、根据动画效果和刚才的分析，10个span平分loading的宽度，高度我们就写和loading一样的高度，然后利用scaleY将它缩小，初始深点的背景色，在动画结束时，我们将颜色设置的很浅（颜色过渡建议同色系深浅变化或者相邻色系变化，比较自然好看，不建议颜色过渡特别大）。同时设置translateX也向左平移10像素（数值可以自己调整）。设置animation的动画时间为1.5秒，动画播放次数为无限次，动画效果为先慢后快再慢。重点：10个span的动画是以此执行，这里我们利用css3的var变量（文章末尾我们再来简单了解下这个css3 var以及css3计算calc）来动态编写动画延时：

.loading span {
 width: 10px;
 height: 50px;
 background-color: #308dec;
 transform: scaleY(0.01) translateX(-10px);
 animation: load-ani 1.5s infinite ease-in-out;
 animation-delay: calc(var(--n) * 0.05s);
}

3、分别设置十个span的延时时间（后面分析var的时候再来讨论为什么这么写）

.loading span:nth-child(1) { --n: 1; }
.loading span:nth-child(2) { --n: 2; }
.loading span:nth-child(3) { --n: 3; }
.loading span:nth-child(4) { --n: 4; }
.loading span:nth-child(5) { --n: 5; }
.loading span:nth-child(6) { --n: 6; }
.loading span:nth-child(7) { --n: 7; }
.loading span:nth-child(8) { --n: 8; }
.loading span:nth-child(9) { --n: 9; }
.loading span:nth-child(10) { --n: 10; }

4、最后来写animate动画，有了前面详细的分析，这里就没什么好解释的了，高度从0.01倍过渡到1.2倍再过渡到初始的0.01倍，1.2倍是从15%开始的，所以才有了上面的“突然”的效果。至此loading动画就写完了。

@keyframes load-ani {
 0%, 100% {
 transform: scaleY(0.01) translateX(-10px);
 }
 15% {
 transform: scaleY(1.2) translateX(20px);
 }
 90%, 100% {
 background-color: #aed4fb;
 }
}

我们重点来分析下span动画依次执行的原理，先来说下css3 的 var 变量，先看下面的代码：

div{
	--green: #4CAF50;
	background-color: var(--green);
}

设置div的背景色为#4CAF50。这里的--green就是一个变量，变量名是green，值是“#4CAF50”，“--”是css3规定的变量的前缀，而var()里面放的是变量名，表示使用这个变量的值，当然，还有一些用法，如默认值等，这个关注IT学堂，我们将会在后面的文章中专门介绍css3 var的用法。

calc比var要出名，用过的人一定很多，它能进行css的一些计算，如加减乘除，需要注意的是，操作符左右要有空格，否则不起作用，如：

calc(10px + 10px) //20px
calc(10px+10px) //错误

理解了var和calc，就很简单了：calc(var(--n) * 0.05s) 其实就是拿变量n*0.05s，而n则在第三步对每个span都进行了设置，随着n的不断变大，延时时间也就依次变长。

好了，今天的教程就到这里了，不知道您有收获没。有疑问和建议的，可以在下方留言。关注IT学堂，每天都有干货哦！

HTML 页面中显示 XML 数据

在下面的实例中，我们打开一个 XML 文件（"cd_catalog.xml"），然后遍历每个 CD 元素，并显示HTML 表格中的 ARTIST 元素和 TITLE 元素的值：

实例

<html>

<body>

<script>

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.open("GET","cd_catalog.xml",false);

xmlhttp.send();

xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");

var x=xmlDoc.getElementsByTagName("CD");

for (i=0;i<x.length;i++)

{

document.write("<tr><td>");

document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);

document.write("</td><td>");

document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);

document.write("</td></tr>");

}

document.write("</table>");

</script>

</body>

</html>

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！