正则表达式

@RegExp

Overview

功能强大；更多使用请访问 i hate regex

match

查找匹配的串并输出结果

> let re=/\d+/g;
undefined
> re
/\d+/g
> console.log('123 234 456'.match(re))
[ '123', '234', '456' ]

replace

替换匹配的串

[] 隐藏手机中间4位

隐藏前：52188881314

隐藏后：521****1314

let cell = document.querySelector('.cell0');
let reg = /^(\d{3})\d{4}(\d{4})$/
let res = cell.replace(reg, '$1****$2')

[] DD打车只显示手机后4位

隐藏前：52188881314

隐藏后：*******1314

let cell = '52188881314'
let reg = /^\d{7}(\d{4})$/
let res = cell.replace(reg, '*******$1')

/^\d{7}(\d{4})$/：用于匹配以7位数字开头，后跟4位数字的字符串。整个字符串长度为11位。
^ 表示字符串的开始。
\d{7} 匹配7位数字。
(\d{4}) 捕获组，匹配4位数字，并将其作为第一个捕获组 $1。
$ 表示字符串的结束

'*******$1'：****** 是直接替换的字符串，$1 是正则表达式中的第一个捕获组，即电话号码的后4位

[] 编辑结构 - 将每个非空白字符都套上1个<span>

let msg = 'hi,there.'
let res = msg.replace(/\S/g, '<span>$&</span>')

\S：匹配任何非空白字符。空白字符包括空格、制表符、换行符等

g：全局标志，表示在整个字符串中进行匹配，而不是在找到第一个匹配项后停止

$&：一个特殊的替换模式，用于表示整个匹配的子字符串

[] 编辑结构 - 瑞幸咖啡(高新万达店) 处理为高新万达店

Form

<form>自带校验属性 pattern；比事件处理中的校验优先级高；如果同时存在，事件处理的校验无效

<form @submit.prevent="submit">
  <input type="text" v-model="user.name" placeholder="6位数字" :pattern="reg" title="请输入6位数字">
  <p v-if="errorMsg" style="color: red;">{{ errorMsg }}</p>
  <button>submit</button>
</form>

const reg = /^\d{6}$/;
const errorMsg = ref('');
const user = ref({
  name: ''
})
const submit = () => {
  const value = user.value.name;

  if (!reg.test(value)) {
    errorMsg.value = '请输入正确的6位数字';
    return;
  }

  errorMsg.value = '';
  console.log('提交成功:', value);
};