JS正則表達式學習筆記2

Ajian 發布于2019-08-26 10:12 / 2187人閱讀

摘要：第二階段該部分內容是學習正則的第二篇內容，點擊第一部分查看第一部分的內容。

第二階段

該部分內容是學習正則的第二篇內容，點擊第一部分查看第一部分的內容。

這部分學習的內容包括：

分組

斷言

匹配模式（貪婪和懶惰）

分組

我們可以通過量詞匹配一個字符多次，但是如果我們想要匹配多個字符多次，就需要用到分組，比如下面一個例子

// 匹配字母和數字連續出現三次的字符
let str = "a1b2c3d4";
let reg = /([a-z]d){3}/

str.replace(reg,"x");

// 通過分組重新排列字符
let str = "2019-09-10";
let reg = /^(d{4})-(d{2})-(d{2})/
str.replace(reg,"$2/$3/$1")
// result "09/10/2019"

// 匹配IP v4 的地址
let reg = /^((2[0-4]d|25[0-5]|[0-1]?dd?).){3}2[0-4]d|25[0-5]|[0-1]?dd?/;
// IP地址的格式是xxx.xxx.xxx.xxx 3個數字一個點的四位字符，匹配3次，加上三位字符，組合就是ip地址
// 我們通過分組，把分組內容匹配三次

// 可以在正則中通過反向引用匹配分組的內容
let reg = /(w{3}) is 1/;  

reg.test("kid is kid") // true
reg.test("dik is dik") // true
reg.test("kid is dik") // false
reg.test("dik is kid") // false

//1 反向引用的內容和分組內容是一樣的

特點

用()括起來的匹配正則

1 表示反向引用，引用第一個子表達式的內容

2 表示反向引用，引用第二個子表達式的內容

$0 匹配整個字符串

$1 匹配到的第一個分組的內容

$2 匹配到的第二個分組的內容

斷言

斷言有點像^ $ b那樣用于指定一個位置，這個位置應該滿足一定的條件（即斷言）。通常使用斷言用來查找某些內容之前或之后的東西（不包括他們本身）；

代碼	說明
?=exp	匹配exp前面的位置
?<=exp	匹配exp后面的位置
?!exp	匹配后面跟的不是exp的位置
?	匹配前面不是exp的位置

DEMO

// ?=exp
let reg = /w+(?=ing)/
let str = I"m singing while you"re dancing.
// 匹配以ing結尾單詞的前面部分

// ?<=exp
let reg = /(?<=re)w+/; 
// 匹配re開頭單詞的后半部分
let str = reading a book;

匹配模式

貪婪模式

懶惰模式

當正則表達式中包含能接受重復的限定詞時，通常的行為是匹配盡可能多的字符。比如以下：

let reg = /a*b/;
let str = "aabab";
let result = str.replace(reg,"X");
// 以上str字符串會被全部替換為一個字符X。這被稱為貪婪匹配模式
// result = "X";

但有時候，我們希望匹配盡可能少的字符。只需要在量詞限定符的后面再加上一個問號?就行。

let reg = /a*?b/;
let str = "aabab";
let result = str.replace(reg,"X");
// 以上str字符串會被全部替換為一個字符X。這被稱為貪婪匹配模式
// result = "Xab";

代碼	說明
*?	row 1 col 2
+?	row 2 col 2
??	row 2 col 2
{n,m}?	row 2 col 2
+?	row 2 col 2
+?	row 2 col 2

多思考，多練習，然后校驗結果，反復這個過程，在這個過程當中就會一點一點的進步的。

練習題

首先下載一個正則表達式測試工具：地址

我們的練習都可以使用這個工具來進行測試；

匹配正確的電話

匹配正確的郵件

匹配IP地址(IPV4)

匹配URL

匹配身份證號碼（身份證有18位，最后一位可以是字符X）

匹配整數

匹配小數

匹配中文

匹配xxxx-xx-xx格式的日期（或者xxxx/xx/xx）

去掉http協議的jpg文件的協議頭

var imgs = [
      "http://img.host.com/images/fds.jpg",
    "https://img.host.com/images/fjlj.jpg",
    "http://img.host.com/images/djalsdf.png",
    "https://img.host.com/images/adsjfl.png",
    "http://img.host.com/image/jasdlf.jpg"
];

獲取 url 中的參數

const _url = "http://img.host.com/images/fds.jpg?name=mmcai&age=28"

字符串中小寫數值替換為大寫

//給定字符串
const str = "958317640";
//期望結果
const newStr = "九五八三一七六四零"

把數字用科學計數法表達10000000000 變為10.000.000.000

給一個連字符串例如：get-element-by-id轉化成駝峰形式

分割數字每三個以一個逗號劃分

匹配固定電話000-12345678

匹配以下字符串當中的數值字符，并輸出數組

//原字符串
const str = "d3gfhf72gh254bhku289fgdhdy675gfh"

// 期望得到的結果
const result = [3,72,254,289,675];

校驗密碼——只能輸入6-20位字母、數字、下劃線

匹配漢字

練習答案晚點給出，大家寫完也可以百度查找哈，但結果不一定唯一，可以有好幾種寫法的，只要通過正則校驗工具校驗通過達到結果就可以哦~。

參考資料：

http://deerchao.net/tutorials...

https://www.imooc.com/video/1...

云服務器 GPU云服務器座機正則表達式 js js域名正則表達式 js類型正則表達式 js網址正則表達式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105776.html

js正則表達式學習筆記

摘要：說來慚愧，做前端快三年對于正則表達式的應用還是很淺薄，大家都知道正則的速度基本上是最快的，但就是懶得去記那些語法和規則，這次項目中多次用到了需要匹配替換的動作，終于下定決心去研究一下了。說來慚愧，做前端快三年對于正則表達式的應用還是很淺薄，大家都知道正則的速度基本上是最快的，但就是懶得去記那些語法和規則，這次項目中多次用到了需要匹配替換的動作，終于下定決心去研究一下了。實例化正則對...

Towers 2019-08-20 15:28 評論0 收藏0
js正則表達式學習筆記

摘要：分組小括號功能較多有三種功能，作用一，把單獨的項組合成子表達式。作用三，允許后面引用前面的表達式。如果這時的正則表達式是一個非全局的，那么和正則表達式方法拿到的結果相同。，也可以接受一個正則表達式作為參數。正則表達式創建字面量創建，a = /abc/gim;構造函數創建，a = new RegExp(abc,gim)正則表達式中的特殊字符，[...] 方括號中的任意字符[^...] ...

superPershing 2019-08-23 12:48 評論0 收藏0
JS正則表達式學習筆記1

摘要：正則表達式作為前端學習的一個知識點，是每個合格的前端開發都應該掌握它的用法。元字符一般情況下，正則表達式的一個字符對應字符串的一個字符。正則表達式作為前端學習的一個知識點，是每個合格的前端開發都應該掌握它的用法。正則表達式的學習確實不難，語法和應用也非常簡單，能夠快速入門，很輕松的就能寫出簡單的表達式來對字符串執行某些操作。網上也有標題黨說一杯咖啡的時間就能學會。能學會嗎？能！但要真...

wangdai 2019-08-26 10:12 評論0 收藏0