javascript几个容易忘记知识点总结

js正则几个知识点总结

正则中有几个知识点笔者经常忘记，记录下。

知识点

模式匹配的用法(x)

模式匹配主要用来匹配某一类字符串并记住匹配项.

let str = 'xuxi is xuxi is'
let reg = /(xuxi) (is) \1 \2/g
reg.test(str)  // true    (1)
str.replace(reg, '$1 $2')  // xuxi is  (2)

解释: 其中括号被称为捕获括号, 模式中的 \1 和 \2 表示第一个和第二个被捕获括号匹配的子字符串，即 xuxi 和 is，匹配了原字符串中的后两个单词, 因此(1)中运行的结果为true. 当我们在字符串中使用replace时, 我们可以使用$1, $2这样的方式获取第n个匹配项,并用来替换字符串. 如(2)中的运行结果.

非捕获括号的模式匹配(?:x)

主要用来匹配某一类字符串但不记住匹配项.

let str = 'xuxixuxi'
let reg = /(?:xuxi){1,2}/g
reg.test(str)  // true    (1)

解释: 其中(?:)被称为非捕获括号, 我们可以使用它匹配一组字符但是并不记住该字符,一般用来判断某类字符是否存在于某字符串中.

先行断言x(?=y)

先行断言: 匹配’x’仅仅当’x’后面跟着’y’.

let str = '王者融化'
let reg = /王(?=者)/
reg.test(str)  // true    (1)

解释: /王(?=者)/会匹配到”王”仅当它后面跟着”者”.但是”者”不属于匹配结果的一部分.

后行断言(?<=y)x

后行断言: 匹配’x’仅当’x’前面是’y’.

let str = 'xuxiA'
let reg = /(?<=xuxi)A/
reg.test(str)  // true    (1)

解释: /(?<=xuxi)A/会匹配到A仅当它前面为xuxi.但是xuxi不属于匹配结果的一部分.

正向否定查找x(?!y)

正向否定查找: 仅仅当’x’后面不跟着’y’时匹配’x’.

let str = '3.1415'
let reg = /\d+(?!\.)/
reg.exec(str)  // [1415]   (1)

解释: 其中/\d+(?!.)/匹配一个或多个数字,当且仅当它后面没有小数点时, 所以(1)中执行后会匹配到1415而不是3.1415

反向否定查找(?<!y)x

反向否定查找: 仅仅当’x’前面不是’y’时匹配’x’.

let str = '3.1415'
let reg = /(?<!\.)\d+/
reg.exec(str)  // [3]    (1)

解释: /(?<!.)\d+/匹配一个数字,当且仅当前面字符不是.时,此时将匹配3.

字符集合和反向字符集合的用法 xyz / ^xyz

let str = 'abcd'
let reg1 = /[a-c]+/
let reg2 = /[^d]$/
reg1.test(str)  // true    (1)
reg2.test(str)  // false    (2)

解释: (1)中将返回true因为字符串中包含a-c中的字符, (2)中奖返回false, 因为字符串结尾为d, 但正则reg2需要匹配结尾不为d的字符串.

词边界和非单词边界匹配\b\B

\b 匹配一个词的边界。一个词的边界就是一个词不被另外一个“字”字符跟随的位置或者前面跟其他“字”字符的位置，例如在字母和空格之间。注意，匹配中不包括匹配的字边界。换句话说，一个匹配的词的边界的内容的长度是0。
\B 匹配一个非单词边界。匹配如下几种情况：(1)字符串第一个字符为非“字”字符 (2)字符串最后一个字符为非“字”字符 (3)两个单词字符之间 (4)两个非单词字符之间 (5)空字符串

let str = 'xuxi'
let reg1 = /xi\b/
let reg2 = /xu\B/
reg1.exec(str)  // [xi]    (1)
reg2.exec(str)  // [xu]    (2)

解释: (1)中匹配到了单词边界,即xi, 为该字符串的末尾.(2)中应为xu为非单词边界,所以会被其匹配到.

空白字符/非空白字符匹配\s\S

\s: 匹配一个空白字符，包括空格、制表符、换页符和换行符.
\S: 匹配一个非空白字符

let str = 'xuxi is'
let reg1 = /.*\s/g
let reg2 = /\S\w*/g
reg1.exec(str)  // [xuxi ]    (1)
reg2.exec(str)  // [xuxi]    (2)

解释: (1)和(2)中执行之后都将匹配xuxi, 一个是空白字符之前的匹配, 一个是非空白字符的匹配.

单字字符/非单字字符匹配\w/W

\w: 匹配一个单字字符（字母、数字或者下划线）。等价于 [A-Za-z0-9_]。
\W: 匹配一个非单字字符。等价于 [^A-Za-z0-9_]

贪婪模式和非贪婪模式

贪婪模式：正则表达式趋向于匹配最大长度。
非贪婪模式：正则表达式趋向于匹配最小长度，即一旦匹配到结果就结束。
默认是贪婪模式。
若 量词 后面添加 问号(?)，则是非贪婪模式。量词 包括以下4种：
{m, n}：匹配 m 到 n 个，包含 m、n。
{N} –> 匹配N次
{M, N} –> 匹配M到N次
{M,} –> 匹配至少M次
{,N} –> 匹配至多N次
*：匹配任意多个，包括0个。
+：匹配1到多个。
?：0或1个。

String str = "abcaxc";
Pattern p1 = "ab.*c";  # 贪婪模式，匹配结果是：abcaxc
Pattern p2 = "ab.*?c";  # 量词*后面添加?，是非贪婪模式，匹配结果：abc

常用案例

去除字符串内指定元素的标签

function trimTag(tagName, htmlStr) {
  let reg = new RegExp(`<${tagName}(\\s.*)*>(\\n|.)*<\\/${tagName}>`, "g")
  return htmlStr.replace(reg, '')
}

短横线命名转驼峰命名

// 短横线转驼峰命名, flag = 0为小驼峰, 1为大驼峰
function toCamelCase(str, flag = 0) {
  if(flag) {
    return str[0].toUpperCase() + str.slice(1).replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
  }else {
    return str.replace(/-(\w)/g, ($0, $1) => $1.toUpperCase())
  }
}

去除字符串中的空格符

function trimAll(str) {
  return str.replace(/\s*/g,"")
}

判断指定格式的数据输入合法性

function numCheck(str, specialNum) {
  if(str.indexOf(',') > -1) {
      return str.splite(',').every(item=>this.numCheck(item));
  } else {
      return str.split(specialNum).length === 2;
  }
}

去除url参数字符串中值为空的字段

// 去除url参数字符串中值为空的字段
const trimParmas = (parmaStr:string = '') => {
  return parmaStr.replace(/((\w*?)=&|(&\w*?=)$)/g, '')
}

将浏览器参数字符串转化为参数对象

function unParams(params = '?a=1&b=2&c=3') {
  let obj = {}
  params && params.replace(/((\w*)=([\.a-z0-9A-Z]*)?)?/g, (m,a,b,c) => {
    if(b || c) obj[b] = c
  })
  return obj
}

计算字符串字节数

/**
 * 计算字符串字节数
 * @param str
 * @desc 一个中文占2个字节, 一个英文占一个字节
 */
function computeStringByte(str) {
  let size = 0,
  strArr = str.split(''),
  reg = /[\u4e00-\u9fa5]/   // 判断是否为中文
  for(let i = strArr.length; i--; i>=0) {
    if(reg.test(strArr[i])) {
      size+= 2
    }else {
      size += 1
    }
  }
  return size
}

匹配是否包含中文字符

function hasCn(str) {
  let reg = /[\u4e00-\u9fa5]/g
  return reg.test(str)
}

实现搜索联想功能

function searchLink(keyword) {
  // 模拟后端返回数据
  let list = ['abc', 'ab', 'a', 'bcd', 'edf', 'abd'];
  let reg = new RegExp(keyword, 'i');
  return list.filter(item => reg.test(item))
}

总结

这里内容都比较简单，系统学习请点击这里学习