1. 程式人生 > >JS高階(正則表示式)

JS高階(正則表示式)

本文參考自: 原文地址

正則表示式

第1章 什麼是正則表示式

1.1 概述

<body>
    <img src="1.png" alt="">
</body>
<script>
    var img = document.querySelector('img');
    img.onclick = function(){
        if(this.src.indexOf("1.png")>0){
            this.src="2.jpg";
        }else{
            this.src
="1.png";
      }   } </script>

以上程式碼中,在判斷時,用到了 標準庫中 sting 物件的indexOf()方法;用於確定一個字串在另一個字串中的位置,返回一個整數,表示匹配開始的位置。如果返回-1,就表示未匹配;

由此可以看出,indexOf的作用就是查詢字串;而在真實的專案開發中,字串的查詢操作,是非常普遍的;

比如,判斷密碼中是否有數字及字母、手機號是否為11為數字等等……要完成這些複雜的查詢操作,我們需要藉助另外的工具,這就是我們要學習的 正則表示式

正則表示式(regular expression)描述了一種字串匹配的模式,可以用來檢查一個串是否含有某種子串、

將匹配的子串做替換或者從某個串中取出符合某個條件的子串等。

每一門計算機程式語言,都支援正則表示式

正則表示式都能幫我們做什麼?

資料隱藏(188520 李先生)資料採集(資料爬蟲)資料過濾(論壇敏感詞過濾)資料驗證(表單驗證、手機號碼、郵箱地址...)

1.2 入門

驗證一個字串中是否有數字 8 ;

var t = 'sda43645dfgkl';
//定義一個正則
var reg = /8/;
//判斷字串是否符合表示式的定義
alert(reg.test(t)); //false

以上程式碼中,字串中沒有數字 8 ,因此檢測結果為 flase ;

var t = 'sda43645dfgkl'
;
//定義一個正則 var reg = /\d/; //判斷字串是否符合表示式的定義 alert(reg.test(t)); //true

\d 是 字元簇 ,表示0-9的數字; 後面講解什麼是 字元簇

第2章 在JavaScript中使用正則

2.1 建立正則物件

1:字面量寫法-以斜槓表示開始和結束; var regex = /xyz/;2:內建建構函式生成-通過例項化得到物件;var regex = new RegExp('xyz');

上面兩種寫法是等價的,都新建了一個內容為 xyz 的正則表示式物件。

var t = 'sda43645dfgkl';
var reg = /\d/; //字面量
var reg = new RegExp('\d'); //建構函式
console.log(reg.test(t));

考慮到書寫的便利和直觀,實際應用中,基本上都採用字面量的寫法。

2.2 正則物件的方法

test(str) :判斷字串中是否具有指定模式的子串,返回結果是一個布林型別的值;exec(str) :返回字串中指定模式的子串,一次只能獲取一個與之匹配的結果;

<body>
    <input type="text" id="inp">
    <input type="button" id="btu" value="匹配">
</body>
<script>
    var btu = document.querySelector('#btu');
    btu.onclick = function(){
        var t = document.querySelector('#inp').value;
        var reg = /\d\d\d/;
        console.log(reg.test(t));//返回是否匹配成功的布林值
        console.log(reg.exec(t));//返回匹配後的結果,匹配失敗返回null
    }
</script>

2.3 String物件的方法

search(reg) :與indexOf非常類似,返回指定模式的子串在字串首次出現的位置match(reg) :以陣列的形式返回指定模式的字串,可以返回所有匹配的結果replace(reg,'替換後的字元') :把指定模式的子串進行替換操作split(reg) :以指定模式分割字串,返回結果為陣列

<body>
    <input type="text" id="inp">
    <input type="button" id="btu" value="匹配">
</body>
<script>
    var btu = document.querySelector('#btu');
    btu.onclick = function(){
        var t = document.querySelector('#inp').value;
        var reg = /\d\d\d/;
        //返回第一次出現符合的字串的位置
        console.log(t.search(reg));
        //陣列形式返回符合規則的字串,使用g則返回全部匹配結果
        console.log(t.match(reg));
        //替換符合規則的字串,使用g則全部替換
        console.log(t.replace(reg,'***'));
        //以規則為分割標誌,分割整個字串,以陣列形式返回分割結果
        console.log(t.split(reg));
    }
</script>

第3章 幾個重要的概念

子表示式在正則表示式中,通過一對圓括號括起來的內容,我們就稱之為“子表示式”。如:var reg = /\d(\d)\d/gi;

捕獲在正則表示式中,子表示式匹配到相應的內容時,系統會自動捕獲這個行為,然後將子表示式匹配到的內容放入系統的快取區中。我們把這個過程就稱之為“捕獲”。


反向引用

在正則表示式中,我們可以使用\n(n>0,正整數,代表系統中的緩衝區編號)來獲取緩衝區中的內容,我們把這個過程就稱之為“反向引用”。


這些比較重要的概念,在什麼情況下可能被用到?

例:查詢連續的相同的四個數字,如:1111、6666

var str = 'gh2396666j98889';
// 1:子表示式匹配陣列
// 2:發生捕獲行為,把子表示式匹配的結果放入快取區
// 3:使用反向引用獲取快取中的結果進行匹配
var reg = /(\d)\1\1\1/;
console.log(str.match(reg));

練習

例1:查詢連續的四個數字,如:3569

答:var reg = /\d\d\d\d/gi;

例2:查詢數字,如:1221,3443答:var reg = /(\d)(\d)\2\1/gi;

例3:查詢字元,如:AABB,TTMM(提示:在正則表示式中,通過[A-Z]匹配A-Z中的任一字元)答:var reg = /([A-Z])\1( [A-Z])\2/g;

例4:查詢連續相同的四個數字或四個字元(提示:在正則表示式中,通過[0-9a-z])答:var reg = /([0-9a-z])\1\1\1/gi;

第4章 編寫正則表示式

4.1 正則表示式組成

正則表示式是由普通字元(例如字元 a 到 z)以及特殊字元(稱為元字元)組成的文字模式。正則表示式作為一個模板,將某個字元模式與所搜尋的字串進行匹配。

正則表示式三步走① 匹配符(查什麼)② 限定符(查多少)③ 定位符(從哪查)

4.2 匹配符(查什麼)

匹配符:字元匹配符用於匹配某個或某些字元;前面用到的 \d 就是匹配一個 0-9 的數字

在正則表示式中,通過一對中括號括起來的內容,我們就稱之為“字元簇”。字元簇代表的是一個範圍,但是匹配時,只能匹配某個範圍中固定的結果。

字元簇 含義
[a-z] 匹配字元a到字元z之間的任一字元
[A-Z] 匹配字元A到字元Z之間的任一字元
[0-9] 匹配數字0到9之間的任一數字
[0-9a-z] 匹配數字0到9或字元a到字元z之間的任一字元
[0-9a-zA-Z] 匹配數字0到9或字元a到字元z或字元A到字元Z之間的任一字元
[abcd] 匹配字元a或字元b或字元c或字元d
[1234] 匹配數字1或數字2或數字3或數字4

在字元簇中,通過一個^(脫字元)來表示取反的含義。

字元簇 含義
[^a-z] 匹配除字元a到字元z以外的任一字元
[^0-9] 匹配除數字0到9以外的任一字元
[^abcd] 匹配除a、b、c、d以外的任一字元

元字元 (常用)

字元簇 含義
\d 匹配一個數字字元,與使用[0-9]等價
\D 匹配一個非數字字元,還可以使 [^0-9]
\w 匹配包括下劃線的任何字母數字下劃線字元,還可以使用 [0-9a-zA-Z_]
\W 匹配任何非字母數字下劃線字元,還可以使用[^\w]
\s 匹配任何空白字元
\S 匹配任何非空白字元,還可以使用[^\s]
. 匹配除 "\n" (換行符) 之外的任何單個字元
[\u4e00-\u9fa5] 匹配中文 字元
var str = 'gh23.9h西688嶺8老4溼9';
var reg = /\w/;//匹配數字字母下劃線
console.log(str.match(reg));
var reg = /[4-8]/;//匹配4-8的數字
console.log(str.match(reg));
var reg = /./;//匹配除 "\n" 之外的任何單個字元
console.log(str.match(reg));
var reg = /./;//匹配除 "\n" 之外的任何單個字元
console.log(str.match(reg));
var reg = /[\u4e00-\u9fa5]/; //匹配中文字元中的任一字元
console.log(str.match(reg));

4.3 限定符(查多少)

什麼是限定符?限定符可以指定正則表示式的一個給定字元必須要出現多少次才能滿足匹配。

* :匹配前面的子表示式零次或多次,0到多
+ :匹配前面的子表示式一次或多次,1到多
? :匹配前面的子表示式零次或一次,0或1
{n} :匹配確定的 n 次 
{n,} :至少匹配 n 次 
{n,m} :最少匹配 n 次且最多匹配 m 次 

對QQ號碼進行校驗要求5~11位,不能以0開頭,只能是數字

var str = '我的QQ20869921366666666666,nsd你的是6726832618嗎?';
var reg = /[1-9]\d{4,10}/g;
console.log(str.match(reg));


我們會發現以上程式碼執行結果中,預設優先配到 13 位,在對後面的進行匹配;

為什麼不是優先匹配 5 位後,在對後面的進行匹配呢?

因為在正則表示式中,預設情況下,能匹配多的就不匹配少的,我們把這種匹配模式就稱之為 貪婪匹配,也叫做 貪婪模式所有的正則表示式,預設情況下采用的都是貪婪匹配原則。

如果在限定符的後面新增一個問號?,那我們的貪婪匹配原則就會轉化為非貪婪匹配原則,優先匹配少的,也叫惰性匹配


            
           

相關推薦

JS高階表示式

本文參考自: 原文地址 正則表示式 第1章 什麼是正則表示式 1.1 概述 <body>    <img src="1.png" alt=""> </body> <script>    var img = docu

驗證URL連結和IP有效性的JS程式碼表示式

#js驗證一個URl字串是否有效 function isValidURL(url){ var urlRegExp=/^((https|http|ftp|rtsp|mms)?:\/\/)+[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+

從零開始的全棧工程師——js表示式

正則 就是一條規則 用來檢驗字串的格式 目標就是字串 只要是通過表單提交的資料 都是字串1.正則定義var reg = new RegExp( )var reg = /格式/ <--簡寫   2.正則的方法兩大功能:一個是匹配 匹配成功就是true 第二個是捕獲 如果有就拿出來test(

JS: RegExp表示式

RegExp語法(包含ES2018標準) 注意:本次所有程式碼都僅在Chrome 70中進行測試 正則表示式是什麼? 正則表示式是用於匹配字串中字元組合的模式。(mdn) 簡單來說,正則表示式是用來提取、捕獲文字(匹配字元)的。 建立: 字面量:let regex = / pattern / flag

js實驗-表單驗證表示式

<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <script src="./1.js"></s

js筆記表示式

//\b 單詞邊界 //\B 非單詞邊界 例5:     var reg = /\bcde\B/g;     str = "abc cdefgh"; //str.match(reg)  返回結果為"cde" //\t匹配的不是視覺上的縮排,而是內容上的\t 同理:\n 也是

Python爬蟲表示式

Python爬蟲(正則表示式) 最近接觸爬蟲比較多,下面我來展示一個剛爬取的成果,使用正則表示式的方法,希望對剛開始接觸爬蟲的小夥伴有所幫助,同時希望大佬們給予點評和指導 接下來,步入正題,使用正則表示式爬取資料是一種原始且有效的方法,正則表示式的作用即字元匹配,匹配出你想得到的

應該是目前最詳細的表示式語音視訊講解教程

(轉)應該是目前最詳細的(正則表示式)語音視訊講解教程 優酷線上地址: http://v.youku.com/v_show/id_XMzg2ODE4MTQ5Mg==.html?x&sharefrom=android&sharekey=a9c982b1c99597d3e1b

【知識積累】、深入Regex表示式

\:將下一個字元標記符、或一個向後引用、或一個八進位制轉義符。例如,“\\n”匹配\n。“\n”匹配換行符。序列“\\”匹配“\”而“\(”則匹配“(”。即相當於多種程式語言中都有的“轉義字元”的概念。 ^:匹配輸入字串的開始位置。如果設定了RegExp物件的Multiline屬性,^也匹配“\n

【知識積累】、瞭解Regex表示式

一、正則表示式簡介 一種可以用於模式匹配和替換的規範,由普通字元 + 特殊字元構成一個模板,用於對目標字串進行匹配、查詢、替換、判斷。 原始碼:JDK1.4中的java.util.regex下的Pattern和Matcher類。 二、常用語法 1、字元取值範圍 [abc]:表示可能是a

Python:re模組表示式

#!/usr/bin/env python # coding:UTF-8 """ @version: python3.x @author:曹新健 @contact: [email protected] @software: PyCharm @file: re模組簡介.py @time:

python之re模組表示式常用函式

1、compile() 編譯正則表示式模式,返回一個物件的模式。(可以把那些常用的正則表示式編譯成正則表示式物件,這樣可以提高一點效率。) 格式: re.compile(pattern,flags=0) pattern: 編譯時用的表示式字串。 flags 編譯標誌位,用於修改正

少說話多寫程式碼之Python學習064——標準模組表示式

Python中re模組包含的是對正則表示式的支援。正則表示式是一個很有趣,對處理字串作用比較大,我們可以花一點時間瞭解一下。 正則表示式是可以匹配文字片段的一組規則。最簡單的正則表示式就是一個字串,能匹配自身。比如字串a='迢遞嵩高下,歸來且閉關',可以匹配字串b='迢遞嵩高下,歸來且閉關'。

python re庫表示式入門

正則表示式(英文名稱:regular expression,regex,RE)是用來簡潔表達一組字串特徵的表示式。最主要應用在字串匹配中。 \d 數字:[0-9] \D 非數字: [^0-9] \s 空白字元:[ \t\n\x0B\f\r] \S 非空白字元:[^\s] \w 單詞字

shell之文字過濾表示式

當從一個檔案或命令輸出中抽取或過濾文字時,可以使用正則表示式(R E) ,正則表示式是一些特殊或不很特殊的字串模式的集合。 ^ 只只匹配行首 $ 只只匹配行尾 * 只一個單字元後緊跟*,匹配0個或多個此單字元 [ ] 只匹配[ ] 內字元。可以是一個單字元,也可以是字元序

shell指令碼學習筆記 表示式

         正則表示式一般有三個部分組成,他們分別是:字元類,數量限定符,位置限定符。規定一些特殊語法表示字元類、數 量限定符和位置關係,然後用這些特殊語法和普通字元一起表示一個模式,這就是正則

Java簡單註冊格式驗證表示式

一、用正則表示式寫的簡單的註冊驗證,具體要求如下: 使用者註冊驗證(使用者名稱,密碼,暱稱,中文名字,手機號,郵箱)所有資訊符合以下條件才允許註冊: 1.使用者名稱格式:由字母數字下劃線組成且開頭必須是字母,不能超過16位; 2.密碼格式:字母和數字構成,

JavaScript驗證手機號是否正確表示式

為了在使用者輸入時驗證手機號格式是否輸入正確的JS函式如下: function validatemobile(newname) { if (newname.length == 0) {

表單驗證表示式

表單驗證是為了使用者友好提示而設計的,當用戶填寫如身份證、IP、日期、電話等如果輸入錯誤的則會提示。 不多說看程式碼: public static class ValidationStrUtil { //驗證電話號碼 public static bool isTele

java 技巧 去除字串中的空格、回車、換行符、製表符表示式

import java.util.regex.Matcher; import java.util.regex.Pattern; public class StringUtils { public static String replaceBlank(String