Chendi Wu

Appearance

常用正则 ​

收集开发中的一些常用正则

验证相关 ​

是否是手机号码 ​

javascript
{
  /**
   * @description 判断手机号码
   * @param {String|Number} tel
   * @returns {Boolean}
   */
  function isPhoneNum(tel) {
    return /^1[34578]\d{9}$/.test(tel)
  }

  /**
   * @description 判断是否为手机号 (百度)
   * @param  {String|Number} tel
   * @returns {Boolean}
   */
  function isPhoneNum(tel) {
    return /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/.test(
      tel
    )
  }

  /**
   * @description 手机号(严谨), 根据工信部2019年最新公布的手机号段
   * @param  {String|Number} tel
   * @returns {Boolean}
   */
  function isPhoneNum(tel) {
    return /^1((3[\d])|(4[5,6,7,9])|(5[0-3,5-9])|(6[5-7])|(7[0-8])|(8[\d])|(9[1,8,9]))\d{8}$/.test(
      tel
    )
  }
}

是否是邮箱地址 ​

javascript
{
  /**
   * @description 判断是否为邮箱地址
   * @param {String} email
   * @returns {Boolean}
   */
  function isEmail(email) {
    return /^([a-zA-Z0-9_\-])+@([a-zA-Z0-9_\-])+(\.[a-zA-Z0-9_\-])+$/.test(email)
  }
}

是否是身份证号码 ​

javascript
{
  /**
   * @description 验证身份证号码(身份证号码可能为15位或18位，15位为全数字，18位中前17位为数字，最后一位为数字或者X)
   * @param {String} idCard
   * @returns {Boolean}
   */
  function isIDCard(idCard) {
    return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(idCard)
  }

  /**
   * @description 验证身份证号码
   * @param {String} idCard
   * @returns {Boolean}
   */
  function isIDCard(idCard) {
    return /(^\d{8}(0\d|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/.test(
      idCard
    )
  }
}

日期是否合法 ​

javascript
{
  // 判断日期格式是否符合 '2017-05-11'的形式，简单判断，只判断格式
  var regx = /^\d{4}\-\d{1,2}\-\d{1,2}$/

  // 判断日期格式是否符合 '2017-05-11'的形式，严格判断（比较复杂）
  var regx =
    /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/
}

是否是 URL ​

javascript
{
  // URL正则
  var regx = /^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/

  // 合法uri
  function validateURL(textval) {
    const urlregex =
      /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
    return urlregex.test(textval)
  }

  // 操作URL查询参数
  const params = new URLSearchParams(location.search.replace(/\?/gi, '')) // location.search = "?name=yajun&sex=female"
  params.has('yajun') // true
  params.get('sex') // "female"
}

车牌号正则 ​

javascript
{
  // 车牌号正则
  var regx =
    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
}
{
  // 新能源车牌号
  var regx1 =
    /[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF][A-HJ-NP-Z0-9][0-9]{4}))$/

  // 非新能源车牌号
  var regx2 =
    /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/

  // 车牌号(新能源+非新能源)
  var regx3 =
    /^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-HJ-NP-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领 A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9 挂学警港澳]{1})$/
}

大小写字母 ​

javascript
{
  /* 小写字母*/
  function validateLowerCase(str) {
    const reg = /^[a-z]+$/
    return reg.test(str)
  }

  /* 大写字母*/
  function validateUpperCase(str) {
    const reg = /^[A-Z]+$/
    return reg.test(str)
  }

  /* 大小写字母*/
  function validatAlphabets(str) {
    const reg = /^[A-Za-z]+$/
    return reg.test(str)
  }
}

是否是驼峰命名 ​

ts
function convertSnakeToCamel(snakeCaseStr: string): string {
  return snakeCaseStr.replace(/(^|_)(\w)/g, (_match, _p1, p2) => p2.toUpperCase())
}

// 示例用法：
const snakeCaseStr1 = 'hello_world'
const snakeCaseStr2 = 'my_name_is_cd'

const camelCaseStr1 = convertSnakeToCamel(snakeCaseStr1)
console.log(camelCaseStr1)
// Output: "HelloWorld"

const camelCaseStr2 = convertSnakeToCamel(snakeCaseStr2)
console.log(camelCaseStr2)
// Output: "MyNameIsCd"

其他 ​

隐藏手机号中间 4 位 ​

ts
function hidePhoneNumber(phoneNumber: string): string {
  const regex = /^(\d{3})\d{4}(\d{4})$/
  return phoneNumber.replace(regex, '$1****$2')
}

// 示例用法：
const phoneNumber = '13612345678'
const hiddenPhoneNumber = hidePhoneNumber(phoneNumber)

console.log(hiddenPhoneNumber)
// Output: "136****5678"

帐号是否合法 ​

ts
function isValidAccount(account: string): boolean {
  const regex = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
  return regex.test(account)
}

// 示例用法：
const account1 = 'abc123' // 合法账号
const account2 = '_abc' // 不合法账号

console.log(isValidAccount(account1)) // Output: true
console.log(isValidAccount(account2)) // Output: false

去除首尾的'/' ​

javascript
{
  // 去除首尾的'/'
  var str = '/asdf//'
  str = str.replace(/^\/*|\/*$/g, '')
}

去除空格 - trim() ​

javascript
{
  String.prototype.trim = function () {
    return this.replace(/^\s+/, '').replace(/\s+$/, '')
  }
}

{
  // 正则实现trim()功能
  function myTrim(str) {
    let reg = /^\s+|\s+$/g
    return str.replace(reg, '')
  }
  let str = '    wcd    '
  console.log(myTrim(str)) // wcd
}

账号相关(用户名-密码) ​

javascript
{
  // 用户名正则
  var regx1 = /^[a-zA-Z0-9_-]{4,16}$/

  // 密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
  var regx2 = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/
}

过滤HTML标签 ​

javascript
{
  // 过滤HTML标签
  var str = '<p>dasdsa</p>nice <br> test</br>'
  var regx = /<[^<>]+>/g
  str = str.replace(regx, '')
}

生成随机HEX色值 ​

javascript
{
  // 生成随机HEX色值
  const RandomColor = () =>
    '#' +
    Math.floor(Math.random() * 0xffffff)
      .toString(16)
      .padEnd(6, '0')
  const color = RandomColor()
  // color => "#f03665"
}

生成星级评分 ​

javascript
{
  // 生成星级评分
  const StartScore = (rate) => '★★★★★☆☆☆☆☆'.slice(5 - rate, 10 - rate)
  const start = StartScore(3)
  // start => "★★★"
}

千位分隔符 ​

javascript
{
  /**
   * @description 千位分隔符(格式化金钱)
   * @param {String|Number} num
   * @returns {string}
   */
  function thousandNum(num) {
    var regx = /\d{1,3}(?=(\d{3})+$)/g
    return (num + '').replace(regx, '$&,') // $&表示与regx相匹配的字符串
  }

  /**
   * @description 千位分隔符(格式化金钱)
   * @param {String|Number} num
   * @returns {string}
   */
  function thousandNum(num) {
    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }
  // thousandNum(123456789) => "123,456,789"
}

判空 ​

javascript
{
  //  判断是否为空
  function validatenull(val) {
    if (typeof val === 'boolean') {
      return false
    }
    if (val instanceof Array) {
      if (val.length === 0) return true
    } else if (val instanceof Object) {
      if (JSON.stringify(val) === '{}') return true
    } else {
      if (
        val === 'null' ||
        val == null ||
        val === 'undefined' ||
        val === undefined ||
        val === ''
      )
        return true
      return false
    }
    return false
  }
}

Layout Switch

Adjust the layout style of VitePress to adapt to different reading needs and screens.

Expand all
The sidebar and content area occupy the entire width of the screen.
Expand sidebar with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Expand all with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Original width
The original layout width of VitePress

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.

Spotlight

Highlight the line where the mouse is currently hovering in the content to optimize for users who may have reading and focusing difficulties.

ONOn
Turn on Spotlight.
OFFOff
Turn off Spotlight.