javascript字串常用api使用匯總（二）

周皺發表於2021-09-10
JavaScript字串API

javascript字串常用api使用匯總（二）

本文講述所有能使用正則的字串api

  • search
  • replace
  • replaceAll
  • split
  • match

search 按正則搜尋字串

這個api使用很簡單，就是搜尋字串中符合規則的字元的開頭索引

  const rex = /\w+/
  const str = 'abc123321'
  console.log(str.search(rex)) // 3

當然也是可以用字串搜尋的，字串只能搜尋固定的，正則可以規定型別，自然是比較強大的

replace、replaceAll 字串按規則替換

  const rex = /\w+/
  const str = 'abc123321'
  console.log(str.replace(rex, '這是數字替換後的內容')) // abc這是數字替換後的內容

  // replaceAll使用需要注意的是，由於replaceAll是全域性替換的，故rex需要加上全域性修飾符
  const rex2 = /\w+/g
  const str2 = 'abc123ccb223'
  console.log(str2.replaceAll(rex2, '555')) // abc555ccb555

這兩個方法我在前面文章有介紹過比較詳細的用法，感興趣的可以去看看一文搞懂String的replace用法

split、match 按規則把字串分割

split是將字串分割成陣列

  const str = 'a,b,c,d,e,f,g'
  // 按照特定字元分割字串
  conosle.log(str.split(',')) // ['a', 'b', 'c', 'd', 'e', 'f', 'g']

  const str2 = 'a23b4213c5433d213'
  // 按照特定規則分割字串
  console.log(str.split(/\d+/)) // ['a', 'b', 'c', 'd', '']

match則跟split方法相反，是將按規則匹配的字串分成陣列

  const str2 = 'a23b4213c5433d213'
  // !注意 需要多個的一定要加全域性修飾符
  console.log(str2.match(/\d+/g)) // ['23', '4213', '5433', '213']

  console.log(str2.match(/\d+/)) // ['23', index: 1, input: 'a23b4213c5433d213', groups: undefined]

如果沒有全域性修飾符就會在陣列上加幾個屬性index匹配的字元在原字串的位置,input原字串,groups在正則設定的組成員，
這裡演示一下捕獲組

  const str1 = '16px'
  const str2 = '16rem'
  const str3 = '16rpx'
  const rex = /(?<num>[0-9]+)(?<unit>[a-z]+)/
  console.log(str1.match(rex).groups) // { num: '16', unit: 'px' }
  console.log(str2.match(rex).groups) // { num: '16', unit: 'rem' }
  console.log(str3.match(rex).groups) // { num: '16', unit: 'rpx' }
  // 這就是match方法的捕獲組的基本用法

相關文章