正则表达式 RegExp

Overview

功能强大
在 / / 内定义正则表达式
更多信息，请访问 i hate regex

正则表达式元数据
item	desc
*	0个或多个
+	1个或多个
^	首/开始
$	尾/结束
g	全局标志，表示在整个字符串中进行匹配，而不是在找到第一个匹配项后停止
{}	重复次数
()	分组；使用$和数字表示第几个分组
\d	数字
\S	匹配任何非空白字符。空白字符包括空格、制表符、换行符等

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 = '52188881314';
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')

[] 移除空格

移除串前面的所有空格

str = str.replace(/^\s+/, '');

移除串后面的所有空格

str = str.replace(/\s+$/, '');

移除串前面、后面的所有空格 - 分俩次处理即可
为什么使用 + 而不使用 *

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

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

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

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

<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);
};

Overview

match

replace

Form