在JavaScript中学习REGEX的基础知识
#javascript #编程 #教程 #regex

在JavaScript中,可以使用正则表达式(REGEX)来匹配字符串或部分字符串。要创建正则表达式,您可以使用正则构造函数或文字符号(/dattery/flags)。

在YouTube上查看此内容

使用REGEXP构造函数

let pattern = new RegExp("hello");
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

使用文字符号

let pattern = /hello/;
let input = "hello world";
let result = pattern.test(input); // true
console.log(result);

除了test()方法外,您还可以使用其他方法,例如exec()match()search()replace()来使用正则表达式。

使用match()方法

let pattern = /\d+/g;
let input = "I have 5 apples and 2 oranges.";
let result = input.match(pattern); // ["5", "2"]
console.log(result);

正则标志

您还可以使用标志来修改正则表达式的行为。一些公共标志包括g(全局),i(不敏感)和m(Multiline)。

这是使用i标志的示例:

let pattern = /hello/i;
let input = "Hello World";
let result = pattern.test(input); // true
console.log(result);

在此示例中,i标志使正则表达式不敏感,因此与您匹配。

模式及其的意思

我的第三个示例中的模式/\d+/g是什么意思?

正则表达式/\d+/g由三个部分组成:前斜线(/),图案\d+和flag g

  • 前部砍伐/定义了正则表达式的开始和结尾。
  • 图案\d+是一个与一个或多个数字匹配的字符集。 \d速记字符是为任何数字设置的(0-9),并且+量词指定必须存在一个或多个上述元素。因此,它将匹配一个或多个数字。
  • Flag g代表Global,这意味着它将找到所有比赛,而不是在第一场比赛之后停下来。没有此标志,正则表达式只会返回第一场比赛。

因此,正则表达式/\d+/g匹配一个或多个数字,并返回输入字符串中该匹配的所有出现。

在第三个示例代码中,它将匹配输入字符串中的所有数字。

使用表达式的字符串正则呢?

在JavaScript中,您还可以使用带有字符串方法的正则表达式,例如match()search()replace()split()。这些方法允许您使用正则表达式的模式匹配功能以更强大的方式使用字符串。

匹配()方法

let input = "Hello World";
let result = input.match(/world/i); // ['World', index: 6, input: 'Hello World', groups: undefined]
console.log(result);

在此示例中,match()方法搜索输入字符串,以查看模式世界的第一次出现,对病例不敏感。它返回包含匹配字符串的数组。

替换()方法

let input = "Hello World";
let result = input.replace(/world/i, "javascript"); // "Hello javascript"
console.log(result);

在此示例中,replace()方法搜索了输入字符串,以查找模式世界的第一次出现,并用“ javascript” 。。

代替它

搜索()方法

let input = "Hello World";
let result = input.search(/world/i); // 6
console.log(result);

在此示例中,search()方法搜索输入字符串,以查找模式世界的第一次出现,对病例不敏感。它返回匹配字符串的第一个字符的索引。

split()方法

let input = "Hello World";
let result = input.split(/\s+/); // ["Hello", "World"]
console.log(result);

在此示例中,split()方法将输入字符串分配到一个子字符串中,使用模式\s+(一个或多个whitespaces)作为分隔器。

您还可以将正则表达式对象传递给这些方法,而不是模式的字符串表示。例如,您可以在第三个示例中引用它的完成方式。

从字符串获取域变量

如果您要创建自己的单页应用程序路由器,此正则是非常有帮助的。您可能已经在我的其他教程甚至在我的其他视频中看到了它。

要使用正则表达式从字符串中获取域,您可以使用match()方法以及捕获URL域部分的正则表达式模式。这是一个可以做到这一点的示例:

let input = "https://thedevdrawer.com/path?query=value#hashtag";
let pattern = /^(?:https?:\/\/)?(?:[^@\/\n]+@)?(?:www\.)?([^:\/?\n]+)/im;
let result = input.match(pattern);
console.log(result[0]); // https://thedevdrawer.com
console.log(result[1]); // thedevdrawer.com

在此示例中,正则表达模式如下:

  • ^匹配字符串的开始
  • (?:https?:\/\/)?匹配可选的“ http://” “ https://” 协议,?量词使此组可选
  • (?:[^@\/\n]+@)?匹配可选的用户名和“@” 符号,该符号通常在URL中的域之前。 ?量词使该组可选
  • (?:www\.)?匹配可选的www.子域,?量词使该组可选
  • ([^:\/?\n]+)匹配一个或多个不是“:” “/” “?” 的字符,或 newline em>,并捕获域名。
  • /im是旗帜,i for case-nocentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimentimente7
  • m

match()方法搜索输入字符串中正则表达式模式的第一匹配,并返回包含匹配的字符串和任何捕获的组的数组。在这种情况下,该域将在返回数组的第一组(result[1])中捕获。

在此示例中,输入为“ https://thedevdrawer.com/path?query=value#hashtag”,输出将是index 0和index 1的“ https://thedevdrawer.com”。

获取查询和哈希

要使用正则表达式从URL获取查询和哈希,您可以使用Match()方法以及每个部分的单独正则表达式模式。这是一个可以做到这一点的示例:

let queryPattern = /\?([^#]*)/
let hasOnlyPattern = /#(.*)/
let query = input.match(queryPattern)[1]
let hash = input.match(hasOnlyPattern)[1]
console.log(query)
console.log(hash)

在此示例中,我们使用两个正则表达模式:

  • /\?([^#]*)/使用[^#]*匹配除'#'符号以外的任何字符,并在问号之后捕获所有内容,直到'#'#'符号(如果有)。
  • /#(.*)/匹配哈希符号,后跟零或更多字符.*,并在哈希之后捕获所有内容。 .*周围的()括号创建一个捕获组,使我们只提取哈希片段。

match()方法搜索输入字符串中正则表达式模式的第一匹配,并返回包含匹配的字符串和任何捕获的组的数组。在这种情况下,我们在索引1(数组中的第二个项目)中提取捕获的组,以获取查询字符串和哈希片段。

在此示例中,输入为“ https://thedevdrawer.com/path?query=value#hashtag”,输出将为:

查询:“ query = value”
哈希:“主题标签”

获取查询值

要使用正则表达式从查询字符串获取值,您可以修改正则表达式模式以仅捕获键值对的值部分。这是一个可以做到这一点的示例:

let queryOnlyPattern = /(?:[?&])(query)=([^&#]+)/
let match = input.match(queryOnlyPattern)[2]
console.log(match)

在此示例中,正则表达模式如下:

  • (?:[?&])匹配启动键值对但不会捕获的问题标记或and的字符。
  • (query)在组中捕获键“ query”
  • =([^&#]+)匹配平等的标志,并在其之后捕获所有内容,直到下一个Ampersand或Hash符号为止。 [^&#]+周围的括号()创建一个捕获组,使我们仅提取键值对的值部分。

match()方法搜索输入字符串中正则表达式模式的第一匹配,并返回包含匹配的字符串和任何捕获的组的数组。在这种情况下,我们在索引2(数组中的第三个项目)中提取捕获的组,以获取“查询”键的值。

在此示例中,输入为“ https://thedevdrawer.com/path?query=value#hashtag”,输出将为:
价值:“价值”

注意:请记住,此正则模式旨在匹配特定的URL格式,并且可能不适用于所有类型的URL或查询/哈希字符串。它可能需要调整或其他模式才能匹配其他格式。

希望,这可以帮助您了解JavaScript中的正则表达式,以防您对我以前使用它们的一些视频有任何疑问。如果您有任何疑问,请随时在下面发表评论。