做學徒哪個網(wǎng)站好周口搜索引擎優(yōu)化
12.正則
概念:匹配有規(guī)律的字符串,匹配上則正確
1.正則的創(chuàng)建方式
構(gòu)造函數(shù)創(chuàng)建
// 修飾符 igm// i 忽視 ignore// g global 全球 全局// m 換行
var reg=new RegExp("匹配的內(nèi)容","修飾符")var str = "this is a Box";var reg = new RegExp("box", "igm");console.log(reg.test(str));//true
字面量的創(chuàng)造
var reg = /box/igm;console.log(reg.test("this is a Box"));//true
2.正則的方法
test()條件滿足,返回true,否則返回false
exec()條件滿足,返回數(shù)組,不滿足返回null
注意:參數(shù)為要匹配的字符串
3.字串符匹配正則的方法(4個)
- search()條件滿足返回下標,不滿足返回-1
- match()條件滿足返回數(shù)組,條件不滿足返回null
- split()切割,返回新的數(shù)組
- replace()替換.返回新的字符串
4.元字符
-
點(.) :代表除了換行以為的所有單個字符(一個點,表示一個字符)
-
星號(*):配合其他字符使用,可以讓其他字符出現(xiàn)任意多次
-
[]:表示字符可以出現(xiàn)的范圍
[a-z]*表示任意0到多個a-z的字母
-
(非字符):取反[0-9]可以有任意多個非0-9的字符
-
+:表示至少出現(xiàn)一次
5.元符號
- \w*::匹配任意多個數(shù)字字母下劃線 , \w : 等價于[a-zA-Z0-9_]
- \d*:\d 代表數(shù)字, 等價于 [0-9],\d* 表示任意多個數(shù)字
- \D:匹配非數(shù)字, 相當于[^0-9]
- \D{7,}: 匹配至少7個非數(shù)字, 相當于[^0-9]{7,}
6.錨元字符
- /^ 匹配開始,從頭開始匹配
- $/ 匹配結(jié)尾,從結(jié)尾開始匹配
- \s 匹配空格
- 使用或模式匹配: |, | 代表或者的意思, 匹配其中一種字符串
- 分組模式匹配: (), ()加上小括號, 將內(nèi)容進行分組, 可以作為一個整體進行多次匹配
案例
不可見區(qū)域的高度獲取(封裝一個getScroll方法) 固定導航欄案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {height: 2000px;}</style>
</head><body>11<br>11<script>//onscroll 滾動條事件 document.documentElement.scrollTop Left//<!DOCTYPE html>聲明頭使用document.documentElement.scrollTop//不帶DTD 使用document.body.scrollTop//ie9+ 使用window.pageYoffset//ie678// '獲取'不可見區(qū)域的兼容寫法function getScroll() {// 不管有沒有DTD都可以使用,如果不是ie9+.執(zhí)行falseif (window.pageYOffset != undefined) {return {left: window.pageXOffset,top: window.pageYOffset}// 帶有DTD} else if (document.compatMode === "CSS1Compat") {return {left: document.documentElement.scrollLeft,top: document.documentElement.scrollTop}}// 不帶DTD(聲明頭 <!DOCTYPE html>)return {left: document.body.scrollLeft,top: document.body.scrollTop}}document.onscroll = function () {console.log(document.compatMode);//帶有CSS1Compat,不帶DTD BackCompatvar obj = getScroll();console.log(obj);}</script>
</body></html>```