正則表達式


問答

  • \d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分別是什么?
  • \d :匹配一個數字,等價于[0-9].例如:/\d/或者/[0-9]/匹配"B2 is the nice."中的'2'
  • \w :匹配一個單字字符(字母、數字或者下劃線),等價于[A-Za-z0-9_]。例如, /\w/匹配"apple" 中的'a',"$5.28,"中的'5', "3D."中的 '3'
    *\s :匹配一個空白字符,包括空格、制表符、換頁符和換行符。例如, /\s\w*/匹配"foo bar."中的' bar'
  • [a-zA-Z0-9] :等價于\w,匹配一個單字字符(字母、數字或者下劃線)
  • \b:匹配一個詞的邊界,一個詞的邊界就是一個詞不被另外一個詞跟隨的位置或者不是另一個詞匯字符前邊的位置。注意,一個匹配的詞的邊界并不包含在匹配的內容中。換句話說,一個匹配的詞的邊界的內容的長度是0。
  • .:匹配除了換行符(\n)之外的任何單個字符。
  • *:匹配前一個表達式0次或多次。等價于 {0,}。
  • +:匹配前面一個表達式1次或者多次。等價于 {1,}。
  • ?:匹配前面一個表達式0次或者1次。等價于 {0,1}。
  • x{3} :匹配三位x字符
  • ^ :匹配輸入的開始。如果多行標志被設置為true,那么也匹配換行符后緊跟的位置。
  • $ :匹配輸入的結束。如果多行標示被設置為true,那么也匹配換行符前的位置。

  • 貪婪模式和非貪婪模式指什么?
  • 貪婪模式:
    就是在整個表達式匹配成功的前提下,盡可能多的匹配,也就是所謂的“貪婪”,通俗點講,就是看到想要的,有多少就撿多少,除非再也沒有想要的了。
  • 非貪婪模式:
    就是在整個表達式匹配成功的前提下,盡可能少的匹配,也就是所謂的“非貪婪”,通俗點講,就是找到一個想要的撿起來就行了,至于還有沒有沒撿的就不管了。

代碼題

  • 寫一個函數trim(str),去除字符串兩邊的空白字符
function trim(str) {
      var reg = /^\s+|\s*$/g; 
      return str = str.replace(reg,'')
}

  • 使用實現 addClass(el, cls)、hasClass(el, cls)、removeClass(el,cls),使用正則.ps: 視頻里問題糾正


function hasClass(el,cls) {
  var reg = /\s+|*\s/
  if (reg.test(el.className)) {
    return true
  }
  return false
}

function addClass(el,cls) {
  if (hasClass(el,cls)) {
    return false
  }
  el.className += " " + cls;
}

function removeClass(el,cls) {
  if (hasClass(el,cls)) {
    el.className.replace(cls,"")
  }
  return false
}


  • 寫一個函數isEmail(str),判斷用戶輸入的是不是郵箱
function isEmail(str){  
    var pat = /\S+@\S+\.\S+/;
    return pat.test(str)
}

  • 寫一個函數isPhoneNum(str),判斷用戶輸入的是不是手機號
function isPhoneNum(str){
    var pat = /^1[356789]\d{9}$/;
    return pat.test(str)

  • 寫一個函數isValidUsername(str),判斷用戶輸入的是不是合法的用戶名(長度6-20個字符,只能包括字母、數字、下劃線
function isValidUsername(str){
    var pat = /^\S\w{6,20}\S$/;
    return pat.test(str)
}


  • 寫一個函數isValidPassword(str), 判斷用戶輸入的是不是合法密碼(長度6-20個字符,包括大寫字母、小寫字母、數字、下劃線至少兩種)
function isValidPassword(str) {
  if (str.length<6||str.length>20) {
    return false //排除長度不合格的
  }else
  if (/[^a-zA-Z0-9_]/.test(str)) {
    return  false // 排除包含四種類型之外的字符
  }else
  if (/(^[a-z]+$)|(^[A-Z]+$)|(^[\d]+$)|(^[_]+$)/.test(str)){
    return false // 排除只有一種類型的情況
  }else
  return true
}

  • 寫一個正則表達式,得到如下字符串里所有的顏色(#121212)
var re = /#\w{6}/g
var subj = "color: #121212; background-color: #AA00ef; width: 12px; bad-colors: f#fddee #fd2 "
alert( subj.match(re) ) // #121212,#AA00ef

  • 下面代碼輸出什么? 為什么? 改寫代碼,讓其輸出hunger, world.
var str = 'hello "hunger" , hello "world"';
var pat = /".*"/g;
str.match(pat); 
結果

因為默認是貪婪模式,所以一次匹配會盡可能匹配多的字符,知道無法繼續匹配為止因此

var str = 'hello  "hunger" , hello "world"';
var pat =  /".*?"/g;    //改為非貪婪
str.match(pat);
//[""hunger"", ""world""]
  • 補全如下正則表達式,輸出字符串中的注釋內容. (可嘗試使用貪婪模式和非貪婪模式兩種方法)
    非貪婪模式
str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<.*\n*.*?>/g
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'

貪婪模式

str = '.. <!-- My -- comment \n test --> .. <!----> .. '
re = /<![^>]*>/g
str.match(re) // '<!-- My -- comment \n test -->', '<!---->'
  • 補全如下正則表達式
    非貪婪模式
var re = /<\w.*?>/g
var str = '<> <a href="/"> <input type="radio" checked><b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

貪婪模式

var re = /<[^>]+>/g
var str = '<> <a href="/"> <input type="radio" checked><b>'
str.match(re) // '<a href="/">', '<input type="radio" checked>', '<b>'

              本文版權歸作者饑人谷_Josh和饑人谷所有,轉載請注明來源
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 定義RegExp === Regular Expression :一種用來描述字符組合特征的匹配模式 作用替換/刪...
    jrg_memo閱讀 312評論 0 0
  • 問答 \d,\w,\s,[a-zA-Z0-9],\b,.,*,+,?,x{3},^$分別是什么?答:\d 查找數...
    饑人谷_桶飯閱讀 306評論 0 1
  • 正則表達式功能: 測試字符串的某個模式。例如對一個輸入字符串進行測試,看在該字符串是否存在一個電話號碼模式或一個信...
    DecadeHeart閱讀 618評論 0 1
  • 忘了從哪收集的資料了,放這兒,以備不時之需。 只能輸入數字:"^[0-9]*$"。 只能輸入n位的數字:"^\d{...
    study_monkey閱讀 1,424評論 0 7
  • WebGL從2012年開始接觸,后面因為開始專注前端其他方面的事情,慢慢地就把它給遺忘。最近前端開始又流行起繪畫制...
    我不是傳哥閱讀 4,133評論 1 22