技術標籤：JS方法分享jsjavascriptvue.jshtml5

效果

效果如下，靚號部分會顯示紅色

實現思路

1、定義正則規則
2、遍歷手機號，生成一個由0和1組成的11位字串，1表示靚號，0不為靚號
3、在HTML中迴圈手機號，根據下標給數字新增類名light，即高亮

JS程式碼

getBeautifulPhone (phoneNum) {
  // 正則規則
  var regexArrs = [
    {
      regex: /(123|234|345|456|567|678|789|987|876|765|654|543|432|321){2}/,
      type: '雙順子'
 

    },
    {
      regex: /(\d)\1{2,}/,
      type: 'AAA'
    },
    {
      regex: /(\d{3,4})\1/,
      type: 'ABCDABCD'
    },
    {
      regex: /12345|23456|34567|45678|56789|98765|87654|76543|65342|54321|78910/,
      type: '事業靚號'
    },
    {
      regex: /(\d)\1(\d)\2/,
      type: 'AABB'
    },
    {
 

      regex: /(\d)(\d)\1\2/,
      type: 'ABAB'
    },
    {
      regex: /1234|2345|3456|4567|5678|6789|9876|8765|7654|6543|5432|4321/,
      type: '發達靚號'
    },
    {
      regex: /123|234|345|456|567|678|789|987|876|756|645|534|432|321/,
      type: '發達靚號'
    },
    {
      regex: /1314|520|521/,
      type:
 
 '天長地久'
    },
    {
      regex: /(?:168|369|68|69|89|96)$/,
      type: '發達靚號'
    },
    {
      regex: /(\d).*?\1.*?\1.*?\1.*?\1/,
      type: '發達靚號',
      replacer: (e, t) => {
        return e.split('').map((e) => {
          return e === t[1] ? 1 : 0
        }).join('')
      }
    }
  ]
  phoneNum = String(phoneNum)
  var phoneColors = '00000000000'
  var phoneType = ''
  for (var index = 0; index < regexArrs.length; index++) {
    var item = regexArrs[index]
    var regex = item.regex
    var type = item.type
    var replacer = item.replacer
    var isMatched = phoneNum.match(regex)
    if (isMatched) {
      if (replacer) {
        phoneColors = replacer(phoneNum, isMatched)
      } else {
        phoneColors = new Array(11).fill(0).map((num, i) => {
          return isMatched.index <= i && i < isMatched.index + isMatched[0].length ? 1 : 0
        }).join('')
      }
      phoneType = type
      break
    }
  }
  return { phoneNum, phoneColors, phoneType }
}
this.phoneInfo = this.getBeautifulPhone(17688888280)
// {phoneNum: '17688888280', phoneColors: '00011111000', phoneType: '發達靚號'}

HTML程式碼

<div class='phone'>
  // 高亮的新增類名light
  <span
	v-for="(num, i) in phoneInfo.phoneNums"
	:key="i"
	:class="{light: phoneInfo.phoneColors[i] == 1}">
    {{num}}
  </span>
</div>

CSS程式碼

.light{
  color: red;
}