Home Web Front-end JS Tutorial Regular use cases and basic syntax

Regular use cases and basic syntax

Apr 16, 2018 pm 02:52 PM
Basic Case grammar

This time I will bring you the use cases and basic syntax of regular expressions. What are the precautions for using regular expressions and basic syntax? The following is a practical case, let's take a look.

Previous words

   

Regular expressions may be a bunch of incomprehensible characters in people’s minds, but it is these symbols that enable efficient operations on strings. As is often the case, the problem itself is not complicated, but the lack of regular expressions becomes a big problem. Regular expressions in JavaScript are very important knowledge. This article will introduce the basic syntax of regular expressions

Definition

Regular expression (Regular Expression) is a grammatical specification of a simple language. It is a powerful, convenient and efficient text processing tool. It is used in some methods to implement search, replacement and extraction operations for information in strings

Regular expressions in JavaScript are represented by RegExp objects. There are two ways of writing: one is literal writing; the other is

constructorwriting

Regular expressions are particularly useful for processing strings. There are many places where regular expressions can be used in JavaScript. This article summarizes the basic knowledge of regular expressions and the use of regular expressions in JavaScript.

The first part briefly lists the usage scenarios of regular expressions in JavaScript; the second part introduces the basic knowledge of regular expressions in detail and writes some examples for easy understanding.

The content of this article is my own summary after reading the regular expression writing method and the js regular expression chapter in the Rhino book, so the content may have omissions and imprecision. If there are any experts who pass by and find errors in the article, please correct them!

The use of regular expressions in Javascript

A regular expression can be thought of as a characteristic description of a character fragment, and its function is to find substrings that meet the conditions from a bunch of strings. For example, I define a regular expression in JavaScript:

var reg=/hello/  或者 var reg=new RegExp("hello")
Copy after login
Then this regular expression can be used to find hello from a bunch of strings this word. The result of the "find" action may be to find the position of the first hello, replace hello with another string, find all hellos, etc. Below is a list of functions that can use regular expressions in JavaScript, and a brief introduction to the functions of these functions. More complex usage will be introduced in the second part.

String.prototype.search method

Used to find the index of the first occurrence of a certain substring in the original string. If not, -1

"abchello".search(/hello/); // 3
Copy after login
is returned.

String.prototype.replace method

Used to replace substrings in strings

"abchello".replace(/hello/,"hi");  // "abchi"
Copy after login

String.prototype.split method

Used to split string

"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]
Copy after login

String.prototype.match method

Used to capture substrings in a string into an array. By default, only one result is captured into the array. When the regular expression has the "global capture" attribute (add parameter g when defining the regular expression), all results will be captured into the array.

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
Copy after login
The match method behaves differently whether the regular expression used as a match parameter has global attributes, which will be discussed later in the regular expression grouping.

RegExp.prototype.test method

Used to test whether a string contains a substring

/hello/.test("abchello"); // true
Copy after login

RegExp.prototype.exec method

Similar to the match method of strings, this method also captures strings that meet the conditions from the string into an array, but there are two differences.

1. The exec method can only capture one substring into an array at a time, regardless of whether the regular expression has global attributes

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"]
Copy after login

2. 正则表达式对象(也就是JavaScript中的RegExp对象)有一个lastIndex属性,用来表示下一次从哪个位置开始捕获,每一次执行exec方法后,lastIndex就会往后推,直到找不到匹配的字符返回null,然后又从头开始捕获。 这个属性可以用来遍历捕获字符串中的子串。

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0
Copy after login

正则表达式基础

元字符

 上面第一节以/hello/为例,但是实际应用中可能会遇到这样的需求: 匹配一串不确定的数字、匹配开始的位置、匹配结束的位置、匹配空白符。此时就可以用到元字符。

元字符:

//匹配数字: \d
"ad3ad2ad".match(/\d/g); // ["3", "2"]
//匹配除换行符以外的任意字符: .
"a\nb\rc".match(/./g); // ["a", "b", "c"]
//匹配字母或数字或下划线 : \w
"a5_ 汉字@!-=".match(/\w/g); // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g); //[" ", " ", ""] 第一个结果是\n,最后一个结果是\r
//匹配【单词开始或结束】的位置 : \b
"how are you".match(/\b\w/g); //["h", "a", "y"] 
// 匹配【字符串开始和结束】的位置: 开始 ^ 结束 $
"how are you".match(/^\w/g); // ["h"]
Copy after login

反义元字符,写法就是把上面的小写字母变成大写的,比如 , 匹配所有不是数字的字符: D

另外还有一些用来表示重复的元字符,会在下面的内容中介绍。

字符范围

在 [] 中使用符号 -  ,可以用来表示字符范围。如:

// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/ 
// unicode编码查询地址:
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根据上面的内容,我们可以找出汉字的Unicode编码范围是 \u4E00 到 \u9FA5,所以我们可以写一个正则表达式来判断一个字符串中是否有汉字
/[\u4E00-\u9FA5]/.test("测试"); // true
Copy after login

重复 & 贪婪与懒惰

首先来讲重复,当我们希望匹配一些重复的字符时,就需要用到一些和重复相关的正则表达式,写法如下

//重复n次 {n}
"test12".match(/test\d{3}/); // null
"test123".match(/test\d{3}/); // ["test123"]
//重复n次或更多次 {n,}
"test123".match(/test\d{3,}/); // ["test123"]
//重复n到m次
"test12".match(/test\d{3,5}/); // null
"test12345".match(/test\d{3,5}/); // ["test12345"]
"test12345678".match(/test\d{3,5}/); // ["test12345"]
// 匹配字符test后边跟着数字,数字重复0次或多次
"test".match(/test\d*/); // ["test"]
"test123".match(/test\d*/); // ["test123"]
//重复一次或多次
"test".match(/test\d+/) ; // null
"test1".match(/test\d*/); //["test1"]
//重复一次或0次
"test".match(/test\d?/) ; // null
"test1".match(/test\d?/); //["test1"]
Copy after login

从上面的结果可以看到,字符test后边跟着的数字可以重复0次或多次时,正则表达式捕获的子字符串会返回尽量多的数字,比如/testd*/匹配 test123 ,返回的是test123,而不是test或者test12。

正则表达式捕获字符串时,在满足条件的情况下捕获尽可能多的字符串,这就是所谓的“贪婪模式”。

对应的”懒惰模式“,就是在满足条件的情况下捕获尽可能少的字符串,使用懒惰模式的方法,就是在字符重复标识后面加上一个 "?",写法如下

// 数字重复3~5次,满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 数字重复1次或更多,满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/); // ["test1"]
Copy after login

字符转义

在正则表达式中元字符是有特殊的含义的,当我们要匹配元字符本身时,就需要用到字符转义,比如:

/./.test("."); // true

分组 & 分支条件

正则表达式可以用 " ()  " 来进行分组,具有分组的正则表达式除了正则表达式整体会匹配子字符串外,分组中的正则表达式片段也会匹配字符串。

分组按照嵌套关系和前后关系,每个分组会分配得到一个数字组号,在一些场景中可以用组号来使用分组。

在 replace、match、exec函数中,分组都能体现不同的功能。

replace函数中,第二个参数里边可以用 $+数字组号来指代第几个分组的内容,如:

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(/w+).js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (/w+)分组匹配的就是 /index ,

在第二个参数中为其添加上版本号

match函数中,当正则表达式有全局属性时,会捕获所有满足正则表达式的子字符串

"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]
Copy after login

但是当正则表达式没有全局属性,且正则表达式中有分组的时候,match函数只会返回整个正则表达式匹配的第一个结果,同时会将分组匹配到的字符串也放入结果数组中:

"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我们可以用match函数来分解url,获取协议、host、path、查询字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]
Copy after login

exec函数在正则表达式中有分组的情况下,表现和match函数很像,只是无论正则表达式是否有全局属性,exec函数都只返回一个结果,并捕获分组的结果

/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]
Copy after login

当正则表达式需要匹配几种类型的结果时,可以用到分支条件,例如

"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]
Copy after login

 注意,分支条件影响它两边的所有内容, 比如 hi|hello  匹配的是hi或者hello,而不是 hiello 或者 hhello

分组中的分支条件不会影响分组外的内容

"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]
Copy after login

后向引用

正则表达式的分组可以在其后边的语句中通过  +数字组号来引用

比如

// 匹配重复的单词
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]
Copy after login

断言

 (?:exp) , 用此方式定义的分组,正则表达式会匹配分组中的内容,但是不再给此分组分配组号,此分组在replace、match等函数中的作用也会消失,效果如下:

/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕获结果字符串和分组字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"
Copy after login

(?=exp) 这个分组用在正则表达式的后面,用来捕获exp前面的字符,分组中的内容不会被捕获,也不分配组号

/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]
Copy after login

(?!exp)  和前面的断言相反,用在正则表达式的后面,捕获后面不是exp的字符,同样不捕获分组的内容,也不分配组号

/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null
Copy after login

处理选项

javascript中正则表达式支持的正则表达式有三个,g、i、m,分别代表全局匹配、忽略大小写、多行模式。三种属性可以自由组合共存。

// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小写 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]
Copy after login

在默认的模式下,元字符 ^ 和 $ 分别匹配字符串的开头和结尾处,模式 m 改变了这俩元字符的定义,让他们匹配一行的开头和结尾

"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之间有换行符,匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ,改变^$的含义,让其匹配一行的开头
Copy after login

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



The above is the detailed content of Regular use cases and basic syntax. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to quickly turn your Python code into an API How to quickly turn your Python code into an API Apr 14, 2023 pm 06:28 PM

When it comes to API development, you may think of DjangoRESTFramework, Flask, and FastAPI. Yes, they can be used to write APIs. However, the framework shared today allows you to convert existing functions into APIs faster. It is Sanic . Introduction to Sanic Sanic[1] is a Python3.7+ web server and web framework designed to improve performance. It allows the use of the async/await syntax added in Python 3.5, which can effectively avoid blocking and improve response speed. Sanic is committed to providing a simple and fast way to create and launch

What are the syntax and structure characteristics of lambda expressions? What are the syntax and structure characteristics of lambda expressions? Apr 25, 2024 pm 01:12 PM

Lambda expression is an anonymous function without a name, and its syntax is: (parameter_list)->expression. They feature anonymity, diversity, currying, and closure. In practical applications, Lambda expressions can be used to define functions concisely, such as the summation function sum_lambda=lambdax,y:x+y, and apply the map() function to the list to perform the summation operation.

New type alias syntax in PHP8.0 New type alias syntax in PHP8.0 May 14, 2023 pm 02:21 PM

With the release of PHP 8.0, a new type alias syntax has been added, making it easier to use custom types. In this article, we'll take a closer look at this new syntax and its impact on developers. What is a type alias? In PHP, a type alias is essentially a variable that references the name of another type. This variable can be used like any other type and declared anywhere in the code. The main function of this syntax is to define custom aliases for commonly used types, making the code easier to read and understand.

Parent class calling syntax in PHP8.0 Parent class calling syntax in PHP8.0 May 14, 2023 pm 01:00 PM

PHP is a server-side scripting language widely used in Web development, and PHP8.0 version introduces a new parent class calling syntax to make object-oriented programming more convenient and concise. In PHP, we can create a parent class and one or more subclasses through inheritance. Subclasses can inherit the properties and methods of the parent class, and can modify or extend their functionality by overriding the methods of the parent class. In ordinary PHP inheritance, if we want to call the method of the parent class in the subclass, we need to use the parent keyword to refer to the parent

The connection and difference between Go language and JS The connection and difference between Go language and JS Mar 29, 2024 am 11:15 AM

The connection and difference between Go language and JS Go language (also known as Golang) and JavaScript (JS) are currently popular programming languages. They are related in some aspects and have obvious differences in other aspects. This article will explore the connections and differences between the Go language and JavaScript, and provide specific code examples to help readers better understand these two programming languages. Connection: Both Go language and JavaScript are cross-platform and can run on different operating systems.

Understand the basic units of C language Understand the basic units of C language Mar 21, 2024 pm 05:36 PM

C language is a programming language widely used in system programming and application software development. Its basic units mainly include variables, data types, operators, etc. When learning and understanding the basics of C language, mastering these basic units is particularly critical. This article will introduce the basic units of C language through specific code examples to help readers better understand. First, let's take a look at variables in C language. Variables are used to store data in C language. Each variable has its own data type and can store different types of data, such as integers and floating point.

The usage and syntax of exponentiation operation in C language The usage and syntax of exponentiation operation in C language Feb 18, 2024 pm 04:05 PM

Introduction to the syntax and usage of power operation in C language: In C language, power operation (poweroperation) is a common mathematical operation, which is used to calculate the power of a number. In C language, we can use standard library functions or custom functions to implement exponentiation operations. This article will introduce the syntax and usage of exponentiation operation in C language in detail, and provide specific code examples. 1. Use the pow() function in math.h. In C language, the pow() function is provided in the math.h standard library for executing

Learn the basic syntax of using CSS selectors Learn the basic syntax of using CSS selectors Jan 13, 2024 am 11:44 AM

To master basic CSS selector syntax, specific code examples are required. CSS selectors are a very important part of front-end development. They can be used to select and modify various elements of HTML documents. Mastering basic CSS selector syntax is crucial to writing efficient stylesheets. This article will introduce some common CSS selectors and corresponding code examples. Element selector The element selector is the most basic selector, which can select the corresponding element by its tag name. For example, to select all paragraphs (p elements), you can use

See all articles