使用正則表達式怎么實現字符串每4位后自動加空格效果

這篇文章給大家介紹使用正則表達式怎么實現字符串每4位后自動加空格效果，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

創新互聯于2013年開始，是專業互聯網技術服務公司，擁有項目成都網站制作、網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元呼圖壁做網站,已為上家服務,為呼圖壁各地企業和個人服務,聯系電話:18982081108

方法一：監控輸入框的keyup事件，當value值的長度為4,8,12,16時，插入空格字符串“ ”（vue中代碼片段如下）

<input type="text" v-model="bankCard" @keyup="bankCardKeyup">
bankCardKeyup (e) {
  let self = this
  // 如果是刪除鍵，則不加空格，且刪去字符串末端空格
  if (e.keyCode === 8) {
  self.bankCard = self.bankCard.replace(/[\s\n\t]+$/g, "")
  return
  }
  self.bankCard = self.bankCard.replace(/[^0-9|' ']*/g, '')
  let value = self.bankCard.replace(/[^0-9]*/g, '')
  if (value.length > 4 && value.length <= 8) {
  self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, value.length)
  }
  else if (value.length > 8 && value.length <= 12) {
  self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, value.length)
  }
  else if (value.length > 12 && value.length <= 16) {
  self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12) + ' ' + value.slice(12, value.length)
  if (value.length === 16) {
   // 調用識別銀行卡函數

  }
  }
  else if (value.length > 16) {
  self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12)+ ' ' + value.slice(12, 16) + ' ' + value.slice(16, value.length)
  if (value.length === 19) {
   // 調用識別銀行卡函數

  }
  else if (value.length > 19) {
   self.bankCard = value.slice(0, 4) + ' ' + value.slice(4, 8) + ' ' + value.slice(8, 12)+ ' ' + value.slice(12, 16) + ' ' + value.slice(16, 19)
  }
  }
 },

方法二：最佳實踐 - - - 利用正則匹配，自動設置input框的value值（能在任意位置添加任意字符，且會自動刪除字符串末端空格）

<input type="text" v-model="bankCard" @keyup="bankCardKeyup">
bankCardKeyup () {
 let self = this
 self.bankCard = self.bankCard.replace(/\s/g,'').replace(/[^\d]/g,'').replace(/(\d{4})(?=\d)/g,'$1 ')
}

關于使用正則表達式怎么實現字符串每4位后自動加空格效果就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

網站欄目：使用正則表達式怎么實現字符串每4位后自動加空格效果
地址分享：http://m.kartarina.com/article46/pipheg.html

成都網站建設公司_創新互聯，為您提供、營銷型網站建設、網站排名、定制網站、用戶體驗、虛擬主機

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯