2019-10-17

JavaScript

11 分钟读完 (大约 1699 个字)

正则表达式

今天我们就来简单的复习一下 JavaScript 当中的正则表达式的一些内容，顺便记录记录，关于正则表达式，官网的说法是，正则表达式（regular expression）描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等

模式修饰符参数

如下

i - 忽略大小写
g - 全局匹配
m - 多行匹配
/hello/ - 两个反斜杠是正则表达式的字面量表示法

两个测试方法

test

1
2
3

const test = new RegExp('hello world', 'ig')

console.log(test.test('hello world'))  // true

exec

返回的是数组，有就返回数组的值，没有返回为 null

const test = new RegExp('hello world', 'ig')

console.log(test.exec('hello'))        // null

console.log(test.exec('hello world'))  // ['hello world', index: 0, input: 'hello world', groups: undefined]

四个正则表达式方法

match(pattern)

将所有匹配的字符串组合成数组返回

const pattern = /Box/ig
const str = 'This is a Box! The is a box!'

console.log(str.match(pattern))   // ['Box', 'box']

search(pattern)

返回字符串中 pattern 开始位置，『忽略全局匹配』

const pattern = /Box/ig
const str = 'This is a Box! The is a box!'

console.log(str.search(pattern))  // 10

replace(pattern)

替换匹配到的字符串

const pattern = /Box/ig
const str = 'This is a Box! The is a box!'

console.log(str.replace(pattern, 'Big box'))
// This is a Big box! The is a Big box!

split(pattern)

返回字符串指定 pattern 拆分数组

const pattern = /\s/ig
const str = 'This is a Box! The is a box!'

console.log(str.split(pattern))
// ['This', 'is', 'a', 'Box!', 'The', 'is', 'a', 'box!']

匹配模式

有下面这些匹配模式

+ - 其前导字符必须在目标对象中连续出现一次或多次
* - 其前导字符必须在目标对象中出现零次或连续多次
? - 其前导对象必须在目标对象中连续出现零次或一次

\s - 用于匹配单个空格符，包括 tab 键和换行符
\S - 用于匹配除单个空格符之外的所有字符
\d - 用于匹配从 0 到 9 的数字
\w - 用于匹配字母，数字或下划线字符
\W - 用于匹配所有与 \w 不匹配的字符
. - 用于匹配除换行符之外的所有字符

^ - 定位符，规定匹配模式必须出现在目标字符串的开头（强制首匹配）
$ - 定位符，规定匹配模式必须出现在目标对象的结尾（强制尾匹配，并且只匹配一个）
\b - 定位符，规定匹配模式必须出现在目标字符串的开头或结尾的两个边界之一
\B - 定位符，则规定匹配对象必须位于目标字符串的开头和结尾两个边界之内，即匹配对象既不能作为目标字符串的开头，也不能作为目标字符串的结尾

/[A-Z]/ - 与从 A 到 Z 范围内任何一个大写字母相匹配
/[a-z]/ - 与从 a 到 z 范围内任何一个小写字母相匹配
/[0-9]/ - 与从 0 到 9 范围内任何一个数字相匹配
/([a-z][A-Z][0-9])+/ - 与任何由字母和数字组成的字符串，如 aB0 等相匹配

下面是一个示例

const pattern = /^[a-z]oogle\d$/
const str = 'aoogle2'

console.log(pattern.test(str)) // true

另外还有一些需要注意的地方

可以使用 () 把字符串组合在一起，() 符号包含的内容必须同时出现在目标对象中
如果希望实现类似编程逻辑中的『或』运算，在多个不同的模式中任选一个进行匹配的话，可以使用管道符 |
- 比如 /to|too|2/，表示与目标对象中的 to、too 或 2 相匹配
还有一个较为常用的否定符 [^]，与之前的定位符 ^ 不同，否定符 [^] 规定目标对象中不能存在模式中所规定的字符串
- 比如 /[^A-C]/，表示将会与目标对象中除 A，B，和 C 之外的任何字符相匹配
- 一般来说，当 ^ 出现在 [] 内时就被视做否定运算符，而当 ^ 位于 [] 之外，或没有 [] 时，则应当被视做定位符

// 匹配或选择其中某个字符，不是相等，包含的意思
const pattern = /baidu|google|bing/
const str = 'baidu a google'

console.log(pattern.test(str))  // true

ES6 中正则表达式的扩展

在 ES5 当中，有下面两种情况

情况一

第一个参数是字符，第二个是修饰符

let regex = new RegExp('xyz', 'i')

console.log(regex.test('xyz123'))     // true
console.log(regex.test('xyZ123'))     // true

情况二

第一个参数是正则表达式，但是此时不接受第二个参数是一个修饰符，否则会报错

let regex2 = new RegExp(/xyz/i)       // 正确
let regex3 = new RegExp(/xyz/i, 'i')  // 错误，Uncaught TypeError: Cannot supply flags when constructing one RegExp 

console.log(regex2.test('xyz123'))    // true
console.log(regex2.test('xyZ123'))    // true

ES6 改变了此行为，第一个参数是正则表达式，第二个参数也可以在指定修饰符

1
2
3

let regex3 = new RegExp(/abc/ig, 'i')

console.log(regex3.flags)             // i

在以上示例中，原有正则对象的修饰符是 ig，它会被第二个参数 i 覆盖

常用正则表达式

短横变驼峰

var f = function (s) {
  return s.replace(/-\w/g, function (x) {
    console.log(x)
    return x.slice(1).toUpperCase()
  })
}

f('border-right-color')

千位分隔符

function commafy(num) {
  return num && num
    .toString()
    // 也可以使用 /\B(?=(\d{3})+$)/g
    .replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
      return $1 + ','
    })
}

commafy(1234567.90)

解析 URL

const getURLParameters = url =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => ((a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a),
    {}
  )

getURLParameters('https://www.baidu.com?id=123&name=zhangsan')

字符串大小写切换

function caseConvert(str) {
  return str.replace(/([a-z]*)([A-Z]*)/g, (m, s1, s2) => {
    return `${s1.toUpperCase()}${s2.toLowerCase()}`
  })
}

caseConvert('abcdefg')
caseConvert('ABCDEFG')

去空格

str.replace(/\s*/g, '')        //去除字符串内所有的空格
str.replace(/^\s*|\s*$/g, '')  //去除字符串内两头的空格
str.replace(/^\s*/, '')        //去除字符串内左侧的空格
str.replace(/(\s*$)/g, '')     //去除字符串内右侧的空格

去除所有的 html

1	var con = content.replace(/<[^>]+>/g,'')

提取括号中的数值

1	/$([^()]+)$/g.exec('add(18)')

匹配空行

^[\s]*\n

检查邮政编码

// 共六位数，第一位不能为 0
const pattern = /^[1-9]{1}[0-9]{5}$/
const str = '430000'

console.log(pattern.test(str))  // true

检查压缩包后缀名

// 文件名（字母_数字）.zip|gz|rar
const pattern = /^[\w]+\.(zip|gz|rar)$/
const str = 'a12_.zip'

console.log(pattern.test(str))  // true

替换标签

将模版字符串包裹的内容使用 <code> 标签包裹起来，但是需要注意防止 XSS，所以需要将 <script> 等标签过滤掉

content
  .replace(/&/g, "&amp;")
  .replace(/</g, "&lt;")
  .replace(/>/g, "&gt;")
  .replace(/"/g, "&quot;")
  .replace(/'/g, "&#039;")
  .replace(/`([\S\s]+?)`/g, '<code>$1</code>')

# JavaScript