JS 正则表达式提取字符串

对于前端开发工程师来说，正则表达式是一个必须要掌握的工具，它可以让我们更加轻松、高效地处理字符串。在这篇文章中，我们将学习如何使用JS正则表达式来提取字符串。

基础知识

正则表达式是由字符和元字符组成的表达式，用于匹配文本中的字符模式。以下是一些基本的正则表达式构造：

字符集 []

方括号用于表示一个字符集，可以表示一组字符中的任何一个字符。例如：

// 匹配字符串中的任意一个元音字母
const pattern = /[aeiou]/
const testString = 'hello'
console.log(pattern.test(testString)) // true，因为 "e" 是元音字母

字符范围和排除字符范围

字符范围用于表示一组连续的字符。例如：

// 匹配 1 到 4 之间的任意一个数字
const pattern = /[1-4]/
const testString = '3'
console.log(pattern.test(testString)) // true

排除字符范围使用 ‘^’ 符号在方括号内表示不包含的字符。例如：

// 匹配不是元音字母的任意一个字符
const pattern = /[^aeiou]/
const testString = 'hello'
console.log(pattern.test(testString)) // false，因为 "o" 是元音字母

量词 {n,m}

量词表示前面的字符出现的次数。例如：

// 匹配出现两次到四次的数字
const pattern = /\d{2,4}/
const testString = '123456'
console.log(pattern.test(testString)) // true

通配符.

通配符表示单个字符。例如：

// 匹配任意数目的字符
const pattern = /./
const testString1 = 'hello'
console.log(pattern.test(testString1)) // true

const testString2 = ''
console.log(pattern.test(testString2)) // false

贪婪匹配和非贪婪匹配

默认情况下，正则表达式是贪婪匹配，即匹配尽可能多的字符。例如：

// 贪婪匹配
const pattern = /a.*c/
const testString = 'abcabc'
console.log(pattern.exec(testString)) // ["abcabc"]

非贪婪匹配使用 ‘?’ 符号来表示，即匹配尽可能少的字符。例如：

// 非贪婪匹配
const pattern = /a.*?c/
const testString = 'abcabc'
console.log(pattern.exec(testString)) // ["abc"]

实战演练

现在我们来看看如何用 JS 正则表达式来提取字符串。

提取URL中的参数

我们从一个常见的需求开始：提取URL中的参数。下面是一段示例代码：

const url = 'https://www.example.com/?name=john&age=30'

// 正则表达式
const pattern = /(?<=\?).+/

const result = pattern.exec(url)
const params = result[0].split('&')
const data = {}

for (let i = 0; i < params.length; i++) {
  const [key, value] = params[i].split('=')
  data[key] = value
}

console.log(data) // {name: "john", age: "30"}

提取HTML中的链接

我们再来看一个经典的例子，提取HTML中的链接。下面是一段示例代码：

const html = `
  <html>
    <body>
      <a href="https://www.example1.com">example1</a>
      <a href="https://www.example2.com">example2</a>
      <a href="https://www.example3.com">example3</a>
    </body>
  </html>
`

// 正则表达式
const pattern = /(?<=href=")(.+?)(?=")/g

const results = html.matchAll(pattern)
const links = []

for (const result of results) {
  links.push(result[0])
}

console.log(links) // ["https://www.example1.com", "https://www.example2.com", "https://www.example3.com"]

提取电子邮件地址

最后，我们来看一个提取电子邮件地址的例子。下面是一段示例代码：

const text = `My email address is john@example.com and my colleague's email is jane@example.com`

// 正则表达式
const pattern = /\b[\w-]+@[\w-]+\.[\w-]+\b/g

const results = text.match(pattern)
console.log(results) // ["john@example.com", "jane@example.com"]