周末總結(jié)正則表達(dá)式(完整篇)
hi
又到周末，結(jié)果這周沒(méi)有電影去看，正好練練正則表達(dá)式吧，暖暖手
1、正則表達(dá)式-完結(jié)篇
---工具類(lèi)開(kāi)發(fā)---
<?php
/*
* PHP 正則表達(dá)式工具類(lèi)
* 描述：進(jìn)行正則表達(dá)式匹配，有常用的正則表達(dá)式以及允許用戶自定義正則表達(dá)式進(jìn)行匹配
*/
class regexTool{
//定義常用正則表達(dá)式，并用數(shù)組對(duì)的方式存儲(chǔ)
private $validate=array(
'require' => '/.+/',
'email' => '/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/',
'url' => '/^http(s?):\/\/(?:[A-za-z0-9-]+\.)+[A-za-z]{2,4}(?:[\/\?#][\/=\?%\-&~`@[\]\':+!\.#\w]*)?$/',
'currency' => '/^\d+(\.\d+)?$/',
'number' => '/^\d+$/',
'zip' => '/^\d{6}$/',
'integer' => '/^[-\+]?\d+$/',
'double' => '/^[-\+]?\d+(\.\d+)?$/',
'english' => '/^[A-Za-z]+$/',
'qq' => '/^\d{5,11}$/',
'mobile' => '/^1(3|4|5|7|8)\d{9}$/',
);
//定義其他屬性
private $returnMatchResult=false; //返回類(lèi)型判斷
private $fixMode=null; //修正模式
private $matches=array(); //存放匹配結(jié)果
private $isMatch=false;
//構(gòu)造函數(shù)，實(shí)例化后傳入默認(rèn)的兩個(gè)參數(shù)
public function __construct($returnMatchResult=false,$fixMode=null){
$this->returnMatchResult=$returnMatchResult;
$this->fixMode=$fixMode;
}
//判斷返回結(jié)果類(lèi)型，為匹配結(jié)果matches還是匹配成功與否isMatch，并調(diào)用返回方法
private function regex($pattern,$subject){
if(array_key_exists(strtolower($pattern), $this->validate))
$pattern=$this->validate[$pattern].$this->fixMode; //判斷后再連接上修正模式作為匹配的正則表達(dá)式
$this->returnMatchResult ?
preg_match_all($pattern, $subject,$this->matches):
$this->isMatch=preg_match($pattern, $subject)===1;
return $this->getRegexResult();
}
//返回方法
private function getRegexResult(){
if($this->returnMatchResult){
return $this->matches;
}else{
return $this->isMatch;
}
}
//允許用戶自定義切換返回類(lèi)型
public function toggleReturnType($bool=null){
if(empty($bool)){
$this->returnMatchResult=!$this->returnMatchResult;
}else{
$this->returnMatchResult=is_bool($bool) ? $bool : (bool)$bool;
}
}
//下面則是數(shù)據(jù)驗(yàn)證方法
public function setFixMode($fixMode) {
$this->fixMode = $fixMode;
}
public function noEmpty($str) {
return $this->regex('require', $str);
}
public function isEmail($email) {
return $this->regex('email', $email);
}
public function isMobile($mobile) {
return $this->regex('mobile', $mobile);
}
public function check($pattern, $subject) {
return $this->regex($pattern, $subject);
}
}
實(shí)例化進(jìn)行驗(yàn)證
<?php
/*
* PHP 正則表達(dá)式驗(yàn)證文件
*/
//包含類(lèi)定義文件
require_once 'regexTool.class.php';
$regex=new regexTool();
$regex->setFixMode('U'); //設(shè)定修正模式為懶惰模式U
$r=$regex->isEmail('asdfads@qq.com');
show($r);
//使用之前學(xué)過(guò)的show函數(shù)來(lái)進(jìn)行驗(yàn)證
/*
* Description:PHP 正則表達(dá)式函數(shù)
*
* @name:show
* @description:output debug
* @param $var:input data
* @return void
*
*/
function show($var=null){
if(empty($var)){
echo 'null';
}elseif(is_array($var)||is_object($var)){
//array,object
echo '<pre>';
print_r($var);
echo '</pre>';
}else{
//string,int,float...
echo $var;
}
}
---驗(yàn)證表單---
即使用方法之一
html寫(xiě)文件如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=">
<title>用戶注冊(cè)</title>
</head>
<body>
<form action="regCheck.php" method="post">
用戶名<INPUT type="text" name="username" id="username" value="" /><br/><br/>
email<INPUT type="text" name="email" id="email" value="" /><br/><br/>
手機(jī)號(hào)<INPUT type="text" name="mobile" id="mobile" value="" /><br/><br/>
<INPUT type="submit" value="注冊(cè)" />
</form>
</body>
</html>
相對(duì)應(yīng)的在regCheck.php中改
if(!$regex->noEmpty($_POST['username'])) exit('用戶名為空');
---仿（山寨版）smarty簡(jiǎn)易模板引擎---
--允許程序猿分前端后端分開(kāi)開(kāi)發(fā)
--模板引擎工作原理：獲取模板源文件，編譯模板，輸出給用戶（也就是聯(lián)系起前后端，做“接口”一樣）
--模式單元：總模式，即$pattern；子模式，即()中的東西，即一個(gè)自定義的原子，也成為模式單元
具體應(yīng)用中，preg_match_all會(huì)匹配到兩種模式
preg_match_all結(jié)果為二維數(shù)組，其中$matches[0][0]為總模式
其他為子模式
--
2、jQuery
---簡(jiǎn)介---
JQuery是繼prototype之后又一個(gè)優(yōu)秀的Javascript庫(kù)。它是輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。jQuery能夠使用戶的html頁(yè)面保持代碼和html內(nèi)容分離，也就是說(shuō)，不用再在html里面插入一堆js來(lái)調(diào)用命令了，只需要定義id即可。
jQuery是一個(gè)兼容多瀏覽器的javascript庫(kù)，核心理念是write less,do more(寫(xiě)得更少,做得更多)。jQuery在2006年1月由美國(guó)人John Resig在紐約的barcamp發(fā)布，吸引了來(lái)自世界各地的眾多JavaScript高手加入，由Dave Methvin率領(lǐng)團(tuán)隊(duì)進(jìn)行開(kāi)發(fā)。如今，jQuery已經(jīng)成為最流行的javascript庫(kù)，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中，有超過(guò)55%在使用jQuery。
jQuery是免費(fèi)、開(kāi)源的，使用MIT許可協(xié)議。jQuery的語(yǔ)法設(shè)計(jì)可以使開(kāi)發(fā)者更加便捷，例如操作文檔對(duì)象、選擇DOM元素、制作動(dòng)畫(huà)效果、事件處理、使用Ajax以及其他功能。除此以外，jQuery提供API讓開(kāi)發(fā)者編寫(xiě)插件。其模塊化的使用方式使開(kāi)發(fā)者可以很輕松的開(kāi)發(fā)出功能強(qiáng)大的靜態(tài)或動(dòng)態(tài)網(wǎng)頁(yè)。
jQuery，顧名思義，也就是JavaScript和查詢（Query），即是輔助JavaScript開(kāi)發(fā)的庫(kù)。（摘選自百度百科）
--環(huán)境搭建
下載1.9.0穩(wěn)定版本，保存在本地就好，然后再用javascript的時(shí)候包含進(jìn)就行了
<script src="
--初體驗(yàn)
jQuery就是js的函數(shù)封裝，形成庫(kù)（私以為其更利于對(duì)付對(duì)象）
相比于原JS，它一般來(lái)說(shuō)更簡(jiǎn)便
<!DOCTYPE html>
<html>
<head>
<title>#id選擇器</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>div的內(nèi)容</div>
<div>Hello world!</div>
<script type="text/javascript">
$(" div ").html("Hello iMooc!"); //填寫(xiě)相應(yīng)代碼
</script>
</body>
</html>
這里$()表示匹配一定字符內(nèi)的元素
---基礎(chǔ)選擇器---
--#id選擇器
<div id="divtest">div的內(nèi)容</div>
<div id="default"></div>
<script type="text/javascript">
$("#default").html($("#divtest").html());//在id號(hào)為“default”的元素中顯示id號(hào)為“divtest”元素的內(nèi)容。
</script>
基本使用方法是$("#id")
--element選擇器
根據(jù)元素的名稱(chēng)可以查找到該元素，并調(diào)用css()、attr()等方法設(shè)置對(duì)所取元素的操作。
--.class選擇器
根據(jù)類(lèi)的名稱(chēng)選擇元素，其他操作類(lèi)似
<div class="red">立正，向我這邊看齊</div>
<div class="green">我先歇歇腳</div>
<script type="text/javascript">
var $redHTML = $(".red").html();
$(".green").html($redHTML);
</script>
--*選擇器
選擇器中的參數(shù)就一個(gè)“*”，既沒(méi)有“#”號(hào)，也沒(méi)有“.”號(hào)。 由于該選擇器的特殊性，它常與其他元素組合使用，表示獲取其他元素中的全部子元素。
實(shí)踐證明，由于使用*選擇器獲取的是全部元素，因此，有些瀏覽器將會(huì)比較緩慢，這個(gè)選擇器也需要謹(jǐn)慎使用。
<form action="#">
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="Radio1" type="radio" />
<input id="Checkbox1" type="checkbox" />
</form>
<script type="text/javascript">
$("form *").attr("disabled", "true");
</script>
--sele1,sele2,seleN選擇器
有時(shí)需要精確的選擇任意多個(gè)指定的元素，類(lèi)似于從文具盒中挑選出多根自已喜歡的筆，就需要調(diào)用sele1,sele2,seleN選擇器，它的調(diào)用格式如下：
$(“sele1,sele2,seleN”)
其中參數(shù)sele1、sele2到seleN為有效選擇器，每個(gè)選擇器之間用“，”號(hào)隔開(kāi)，它們可以是之前提及的各種類(lèi)型選擇器，如$(“#id”)、$(“.class”)、$(“selector”)選擇器等。
<div class="red">選我吧！我是red</div>
<div class="green">選我吧！我是green</div>
<div class="blue">選我吧！我是blue</div>
<script type="text/javascript">
$(".red,.green").html("hi,我們的樣子很美哦!");
</script>
--ance desc選擇器
本節(jié)開(kāi)始，我們將介紹層次性選擇器。
在實(shí)際應(yīng)用開(kāi)發(fā)中，常常是多個(gè)元素嵌套在一起，形成復(fù)雜的層次關(guān)系，通過(guò)層次選擇器，可以快速定位某一層次的一個(gè)或多個(gè)元素，ance desc選擇器就是其中之一，它的調(diào)用格式如下：
$("ance desc")
其中ance desc是使用空格隔開(kāi)的兩個(gè)參數(shù)。ance參數(shù)（ancestor祖先的簡(jiǎn)寫(xiě)）表示父元素；desc參數(shù)（descendant后代的簡(jiǎn)寫(xiě)）表示后代元素，即包括子元素、孫元素等等。兩個(gè)參數(shù)都可以通過(guò)選擇器來(lái)獲取。比如家族姓氏“div”，家族幾代人里，都有名字里帶“span”的，就可以用這個(gè)ance desc選擇器把這幾個(gè)人給定位出來(lái)。
<div>碼農(nóng)家族
<p>
<label></label>
</p>
<label></label>
</div>
<script type="text/javascript">
$("div label").css("background-color","blue");
</script>
--parent>child選擇器
與上一節(jié)介紹的ance desc選擇器相比，parent > child選擇器的范圍要小些，它所選擇的目標(biāo)是子集元素，相當(dāng)于一個(gè)家庭中的子輩們，但不包括孫輩，它的調(diào)用格式如下：
$(“parent > child”)
child參數(shù)獲取的元素都是parent選擇器的子元素，它們之間通過(guò)“>”符號(hào)來(lái)表示一種層次關(guān)系。
<div>
碼農(nóng)家族
<p>
<label></label>
</p>
<label></label>
<label></label>
</div>
<label></label>
<script type="text/javascript">
$("div>label").css("border", "solid 5px red");
</script>
--prev+next選擇器
俗話說(shuō)“遠(yuǎn)親不如近鄰”，而通過(guò)prev + next選擇器就可以查找與“prev”元素緊鄰的下一個(gè)“next”元素，格式如下：
$(“prev + next”)
其中參數(shù)prev為任何有效的選擇器，參數(shù)“next”為另外一個(gè)有效選擇器，它們之間的“+”表示一種上下的層次關(guān)系，也就是說(shuō)，“prev”元素最緊鄰的下一個(gè)元素由“next”選擇器返回的并且只返回唯的一個(gè)元素。
<div>
碼農(nóng)家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>
<script type="text/javascript">
$("p+label").css("background-color","red");
</script>
注意，這里的next是要輸入下一個(gè)要找的分類(lèi)器標(biāo)識(shí)，不是直接輸入next
--prev~siblings選擇器
與上一節(jié)中介紹的prev + next層次選擇器相同，prev ~ siblings選擇器也是查找prev 元素之后的相鄰元素，但前者只獲取第一個(gè)相鄰的元素，而后者則獲取prev 元素后面全部相鄰的元素，它的調(diào)用格式如下：
$(“prev ~ siblings”)
其中參數(shù)prev與siblings兩者之間通過(guò)“~”符號(hào)形成一種層次相鄰的關(guān)系，表明siblings選擇器獲取的元素都是prev元素之后的同輩元素。
<div>
碼農(nóng)家族
<label></label>
<p></p>
<label></label>
<label></label>
</div>
<label></label>
<script type="text/javascript">
$("p~label").css("border", "solid 1px red");
$("p~label").html("我們都是p先生的粉絲");
</script>
---過(guò)濾性選擇器---
--:first/:last過(guò)濾選擇器
本章我們介紹過(guò)濾選擇器，該類(lèi)型的選擇器是根據(jù)某過(guò)濾規(guī)則進(jìn)行元素的匹配，書(shū)寫(xiě)時(shí)以“：”號(hào)開(kāi)頭,通常用于查找集合元素中的某一位置的單個(gè)元素。
在jQuery中，如果想得到一組相同標(biāo)簽元素中的第1個(gè)元素該怎樣做呢？
在下面的示例代碼中你可能注意到我們會(huì)使用
$(“l(fā)i:first”)
注意：書(shū)寫(xiě)時(shí)以“：”號(hào)開(kāi)頭。
<div>改變最后一行"蘋(píng)果"背景顏色：</div>
<ol>
<li>葡萄</li>
<li>香蕉</li>
<li>橘子</li>
<li>西瓜</li>
<li>蘋(píng)果</li>
</ol>
<script type="text/javascript">
$("li:last").css("background-color", "red");
</script>
--:eq(index)過(guò)濾選擇器
如果想從一組標(biāo)簽元素?cái)?shù)組中，靈活選擇任意的一個(gè)標(biāo)簽元素，我們可以使用
:eq(index)
其中參數(shù)index表示索引號(hào)（即：一個(gè)整數(shù)），它從0開(kāi)始，如果index的值為3，表示選擇的是第4個(gè)元素
<div>改變中間行"葡萄"背景顏色：</div>
<ol>
<li>橘子</li>
<li>香蕉</li>
<li>葡萄</li>
<li>蘋(píng)果</li>
<li>西瓜</li>
</ol>
<script type="text/javascript">
$("li:eq(2)").css("background-color", "#60F");
</script>
--:contains(text)過(guò)濾選擇器
與上一節(jié)介紹的:eq(index)選擇器按索引查找元素相比，有時(shí)候我們可能希望按照文本內(nèi)容來(lái)查找一個(gè)或多個(gè)元素，那么使用:contains(text)選擇器會(huì)更加方便， 它的功能是選擇包含指定字符串的全部元素，它通常與其他元素結(jié)合使用，獲取包含“text”字符串內(nèi)容的全部元素對(duì)象。其中參數(shù)text表示頁(yè)面中的文字。
<div>改變包含"jQuery"字符內(nèi)容的背景色：</div>
<ol>
<li>強(qiáng)大的"jQuery"</li>
<li>"javascript"也很實(shí)用</li>
<li>"jQuery"前端必學(xué)</li>
<li>"java"是一種開(kāi)發(fā)語(yǔ)言</li>
<li>前端利器——"jQuery"</li>
</ol>
<script type="text/javascript">
$("li:contains('jQuery')").css("background", "green");
</script>
--:has(selector)過(guò)濾選擇器
除了在上一小節(jié)介紹的使用包含的字符串內(nèi)容過(guò)濾元素之外，還可以使用包含的元素名稱(chēng)來(lái)過(guò)濾，:has(selector)過(guò)濾選擇器的功能是獲取選擇器中包含指定元素名稱(chēng)的全部元素，其中selector參數(shù)就是包含的元素名稱(chēng)，是被包含元素。
<div>改變包含"label"元素的背景色：</div>
<ol>
<li><p>我是P先生</p></li>
<li><label>L妹紙就是我</label></li>
<li><p>我也是P先生</p></li>
<li><label>我也是L妹紙哦</label></li>
<li><p>P先生就是我哦</p></li>
</ol>
<script type="text/javascript">
$("li:has('label')").css("background-color", "blue");
</script>
--:hidden過(guò)濾選擇器
:hidden過(guò)濾選擇器的功能是獲取全部不可見(jiàn)的元素，這些不可見(jiàn)的元素中包括type屬性值為hidden的元素。
<h3>顯示隱藏元素的內(nèi)容</h3>
<input id="hidstr" type="hidden" value="我已隱藏起來(lái)"/>
<div></div>
<script type="text/javascript">
var $strHTML = $("input:hidden").val();
$("div").html($strHTML);
</script>
--:visible過(guò)濾選擇器
與上一節(jié)的:hidden過(guò)濾選擇器相反，:visible過(guò)濾選擇器獲取的是全部可見(jiàn)的元素，也就是說(shuō)，只要不將元素的display屬性值設(shè)置為“none”，那么，都可以通過(guò)該選擇器獲取。
<h3>修改可見(jiàn)“水果”的背景色</h3>
<ul>
<li style="display:none">橘子</li>
<li style="display:block">香蕉</li>
<li style="display:">葡萄</li>
<li>蘋(píng)果</li>
<li style="display:none">西瓜</li>
</ul>
<script type="text/javascript">
$("li:visible").css("background-color","blue");
</script>
--
以上內(nèi)容就是關(guān)于周六總結(jié)正則表達(dá)式(完整篇)的全部?jī)?nèi)容，希望大家喜歡。
相關(guān)文章
本文內(nèi)容, 整理自網(wǎng)文Finer points of PHP regular expressions. 其分析過(guò)程剝繭抽絲, 絲絲入扣, 值得一讀. 該文系統(tǒng)地列出了PHP中正則表達(dá)式常見(jiàn)特性, 我只摘取其中遞歸部分翻譯整理出來(lái).2010-07-07
這篇文章主要介紹了linux 正則表達(dá)式的一些使用方法，需要的朋友可以參考下2013-11-11
今天在修過(guò)模版的時(shí)候，需要用到將br替換為換行符，一般\r\n就可以了，如果少些一個(gè)兼容性就出現(xiàn)問(wèn)題了2014-06-06
55分鐘學(xué)會(huì)正則表達(dá)式（來(lái)自Github）
正則表達(dá)式是一種查找以及字符串替換操作。正則表達(dá)式在文本編輯器中廣泛使用，比如正則表達(dá)式被用于文本的一些操作，這里雖然說(shuō)時(shí)間有點(diǎn)短，但經(jīng)過(guò)一段時(shí)期的聯(lián)系，每次正則可能功能更全，代碼量也更好，考慮的也會(huì)更周全2020-04-04
JS 正則表達(dá)式中小括號(hào)的應(yīng)用
在正則表達(dá)式中小括號(hào)的應(yīng)用種類(lèi)比較多，差別也很大2009-12-12
正則表達(dá)式，又稱(chēng)規(guī)則表達(dá)式。接下來(lái)通過(guò)本文給大家介紹正則表達(dá)式匹配IP的表達(dá)式，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧2016-12-12
這篇文章主要介紹了常見(jiàn)的正則表達(dá)式問(wèn)題,需要的朋友可以參考下2015-10-10
javascript中使用正則表達(dá)式進(jìn)行字符串驗(yàn)證示例
我寫(xiě)的一個(gè)表達(dá)式驗(yàn)證示例：功能如下：用戶名，不能為空;密碼6為數(shù)字;密碼確認(rèn)，兩次輸入密碼必須相同;身份證號(hào)碼必須是15位，或者是18位，最末尾也可以是X2013-05-05
正則表達(dá)式非常有用，查找、匹配、處理字符串、替換和轉(zhuǎn)換字符串，輸入輸出等。而且各種語(yǔ)言都支持，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
能說(shuō)明一下GETROWS的用法嗎？...2006-06-06