记录学不会的正则

someText.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".").
replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'))
/**
*第一个参数为一个字符串时, 它其实做的是文本替换所以这里的'$#$'和正则表达式无关, 所以第一次
**/
解读:
someText
.replace(".", "$#$") //1. 把字符'.'替换成'$#$', 因为replace对于字符串只匹配一次, 所以只会替换第一个'.'
.replace(/\./g, "") //2. 把其余的字符'.'替换为空字符串(删除)
.replace("$#$", ".") //3. 把字符'$#$'替换回原来的'.'
.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'))
/*
4.
^ : 字符串开始;
(\-) : 第一组匹配, 匹配1个'-';
* : 重复匹配`-` 0-n个, 但不进入分组
(\d+) : 第二组匹配, 匹配1-n个数字;
\. : 随后匹配一个'.';
(\d\d) : 第三组匹配, 一个两位的数字;
.*$ : 后面匹配任意字符0-n个, 直到字符串结束.

替换的目标是: '(第一组匹配)(第二组匹配).(第三组匹配)'
*/

限制数字无负数带小数（指令版）

let decimalPoint = 2
let patternStr = ''
patternStr = /^(\-)*(\d+)\.(\d\d).*$/

import Vue from 'vue'
//正数小数
Vue.directive('change-num', {
  bind: (el, binding, vnode) => {
    let input = vnode.elm.children[0]
    input.addEventListener('compositionstart', () => {
      vnode.inputLocking = true
    })
    input.addEventListener('compositionend', () => {
      vnode.inputLocking = false
      input.dispatchEvent(new Event('input'))
    })
    input.addEventListener('input', () => {
      if (vnode.inputLocking) {
        return
      }
      let oldValue = input.value
      let newValue = input.value
      newValue = newValue.replace(/[^\d.]/g, '')
      newValue = newValue.replace(/^\./g, '')
      newValue = newValue
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
      newValue = newValue.replace(new RegExp(patternStr, 'g'), '$1$2.$3')
      if (newValue) {
        let arr = newValue.split('.')
        // 去掉开头多余的0
        newValue = Number(arr[0]) + (arr[1] === undefined ? '' : '.' + arr[1])
      }
      // 判断是否需要更新，避免进⼊死循环
      if (newValue !== oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 通知v-model更新
      }
    })
    // input 事件⽆法处理⼩数点后⾯全是零的情况因为⽆法确定⽤户输⼊的0是否真的应该清除，如3.02。放在blur中去处理
    input.addEventListener('blur', () => {
      let oldValue = input.value
      let newValue = input.value
      if (newValue) {
        newValue = Number(newValue).toString()
      }
      // 判断是否需要更新，避免进⼊死循环
      if (newValue !== oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 通知v-model更新
      }
    })
  }
})

 限制数字带负数带小数（指令版）

let decimalPoint = 2
let patternStr = ''
patternStr = /^(\-)*(\d+)\.(\d\d).*$/

import Vue from 'vue'
// 价格 正负数
Vue.directive('price-num', {
  bind: (el, binding, vnode) => {
    let input = vnode.elm.children[0]
    input.addEventListener('compositionstart', () => {
      vnode.inputLocking = true
    })
    input.addEventListener('compositionend', () => {
      vnode.inputLocking = false
      input.dispatchEvent(new Event('input'))
    })
    input.addEventListener('input', () => {
      if (vnode.inputLocking) {
        return
      }
      let oldValue = input.value
      let newValue = input.value
      let obj = input
      let t = obj.value.charAt(0)
      obj.value = obj.value
        .replace('.', '$#$') //把第一个字符'.'替换成'$#$'
        .replace(/\./g, '') //把其余的字符'.'替换为空
        .replace('$#$', '.') //把字符'$#$'替换回原来的'.'
        .replace(/[^\d.]/g, '') //只能输入数字和'.'
        .replace(/^\./g, '') //不能以'.'开头
      // .replace(/([0-9]+\.[0-9]{2})[0-9]*/, '$1') //只保留2位小数
      obj.value = obj.value.replace(new RegExp(patternStr, 'g'), '$1$2.$3') //只保留2位小数
      if (t == '-') {
        obj.value = '-' + obj.value
      }
      // 判断是否需要更新，避免进⼊死循环
      if (newValue !== oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 通知v-model更新
      }
    })
    // input 事件⽆法处理⼩数点后⾯全是零的情况因为⽆法确定⽤户输⼊的0是否真的应该清除，如3.02。放在blur中去处理
    input.addEventListener('blur', () => {
      let oldValue = input.value
      let newValue = input.value
      if (newValue) {
        newValue = Number(newValue).toString()
      }
      // 判断是否需要更新，避免进⼊死循环
      if (newValue !== oldValue) {
        input.value = newValue
        input.dispatchEvent(new Event('input')) // 通知v-model更新
      }
    })
  }
})

限制数字正整数（指令版）

import Vue from 'vue'
// 整数
Vue.directive('Int', {
  bind: function(el) {
    const input = el.getElementsByTagName('input')[0]
    input.onkeyup = function(e) {
      if (input.value.length === 1) {
        input.value = input.value.replace(/[^0-9]/g, '')
      } else {
        input.value = input.value.replace(/[^\d]/g, '')
      }
      trigger(input, 'input')
    }
    input.onblur = function(e) {
      if (input.value.length === 1) {
        input.value = input.value.replace(/[^0-9]/g, '')
      } else {
        input.value = input.value.replace(/[^\d]/g, '')
      }
      trigger(input, 'input')
    }
  }
})
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}