Home  >  Article  >  Web Front-end  >  A brief discussion on regular expressions on the front end

A brief discussion on regular expressions on the front end

青灯夜游
青灯夜游forward
2019-11-30 15:49:262094browse

A brief discussion on regular expressions on the front end

1. Overview

In JavaScript, use // You can create a regular expression object, of course you can also use new RegExp()

Commonly used methods related to regular expressions include match, test and replace.

Among them, match and replace are methods on strings, and test is a method on regular objects.

[Related course recommendations: JavaScript video tutorial]

Look at the specific illustrations below:

A brief discussion on regular expressions on the front end

2. Match single characters

  1. /reg/ can directly match specific strings reg. The square brackets

    []
  2. in
  3. ##/[arzy]/ means matching any single character in arzy The dash -

    in
  4. /[f-h]/ represents matching f to in alphabetical order Any single character in h

  5. ##/[1-3]/

    represents matching numbers 1 to 3

A brief discussion on regular expressions on the front end

3. Regular optionsThe regular object can also be followed by options,

JavaScript

Commonly used options in are:

  1. i

    - represents ignoring case

  2. m

    - Represents multi-line matching

  3. g

    - Represents global matching (can match multiple times)

A brief discussion on regular expressions on the front end

4. Boundary matching

  1. ^

    - represents the beginning of the matching string

  2. $

    - Represents the end of the matched string

A brief discussion on regular expressions on the front end

5. Character matching

    .
  1. - can match any character except newline characters
  2. \d
  3. - can match Any number
  4. \D
  5. - can match any non- number
  6. \s
  7. - matches any whitespace character
  8. \S
  9. - matches any non- whitespace character
  10. \n
  11. - matches newline
  12. \w
  13. - It is actually equivalent to [A-Za-z0-9_], which matches alphanumeric underscores

A brief discussion on regular expressions on the front end

6. Quantifier matching

    *
  1. - Match 0 or more times
  2. - Match 1 or more times
  3. ?
  4. - Match 0 or 1 times
  5. {3}
  6. - Match 3 times
  7. {2,4}
  8. - Matches 2, 3 or 4 times
  9. {2,}
  10. - Matches 2 or more times

A brief discussion on regular expressions on the front end

7. Grouping

()

Parentheses represent grouping in regular expressions, usually in The match method is used to return full matches plus multiple grouping results. If the g option is used, only full matches are returned. In parentheses you can use the pipe symbol

|

, which stands for or

A brief discussion on regular expressions on the front end

##8. Special characters

When matching special symbols, you need to add a backslash\

The special characters in JS are ^ $ \ . * ? () [] {} |

So if you need to match the asterisk *

, you need to write like this:

\*

A brief discussion on regular expressions on the front end

9. Take non-matching

match except a certain character Any characters need to be used in square brackets []

^So far ^

has two meanings:

If used at the beginning of a regular expression, it represents the beginning of the matching string
  1. If used inside square brackets
  2. []
  3. , it represents Matches other than this character

A brief discussion on regular expressions on the front end##10. End

The above only introduces the basic usage of regular expressions, which is basically enough for daily development. For more in-depth usage, such as Greedy and Lazy, Zero-width Assertion and Capture, interested friends can learn by themselves~

Regular rules are very Powerful, but cannot be abused. If you write a very complicated regular expression that only you can understand, a better approach is to implement it without using regular expressions~

Reference link

● Intro to Regex for Web Developers

This article comes from the js tutorial column, welcome to learn!

The above is the detailed content of A brief discussion on regular expressions on the front end. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:savokiss.com. If there is any infringement, please contact admin@php.cn delete