整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
則表達式（英語：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");
正則表達式修飾符
修飾符 可以在全局搜索中不區分大小寫:
正則表達式參數可用在以上方法中 (替代字符串參數)。
正則表達式使得搜索功能更加強大(如實例中不區分大小寫)。
| 修飾符 | 描述 |
|---|---|
| i | 執行對大小寫不敏感的匹配。 |
| g | 執行全局匹配（查找所有匹配而非在找到第一個匹配后停止）。 |
| m | 執行多行匹配。 |
正則表達式模式
方括號用于查找某個范圍內的字符：
| 表達式 | 描述 |
|---|---|
| [abc] | 查找方括號之間的任何字符。 |
| [0-9] | 查找任何從 0 至 9 的數字。 |
| (x|y) | 查找任何以 | 分隔的選項。 |
元字符是擁有特殊含義的字符：
| 元字符 | 描述 |
|---|---|
| \d | 查找數字。 |
| \s | 查找空白字符。 |
| \b | 匹配單詞邊界。 |
| \uxxxx | 查找以十六進制數 xxxx 規定的 Unicode 字符。 |
量詞:
| 量詞 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一個 n 的字符串。 |
| n* | 匹配任何包含零個或多個 n 的字符串。 |
| n? | 匹配任何包含零個或一個 n 的字符串。 |
使用 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動畫寫法（在寫動畫前，可以先畫個草稿或動畫流程圖，充分思考動畫執行的過程，再編寫代碼事半功倍哦）。
css3編寫的loading動畫
<div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
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，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
