Regular expressions, a very old and powerful text processing tool, can quickly implement a very complex business logic with only a very short expression statement. Mastering regular expressions can greatly improve your development efficiency. Below is a list of 20 regular expressions that are often used in front-end development.

Regular expressions are often used to validate fields or arbitrary strings, as in this JavaScript code that validates the basic date format:

Var/reg = ^ (\ d {1, 4}) (- | \ /) (\ d {1, 2}) \ 2 $/ (\ d {1, 2});

var r=fieldValue.match(reg);

if(r==null)alert(‘Dateformaterror! ‘);

1. Verify the password strength

The password must contain a combination of uppercase and lowercase letters and numbers, and cannot contain special characters. The password must be between 8 and 10 characters in length.

^ (? =.*\d)(? =.*[a-z])(? =. * [a-z]). 8, 10 {} $

2. Verify Chinese

The string can only be Chinese.

^[\u4e00-\u9fa5]{0,}$

3. The value contains 26 letters, digits, and underscores (_)

^\w+$

4. Verify the E-mail address

As with passwords, here is a regular check for E-mail address compliance.

[\w!#$%&’*+/=?^_`{|}~-]+(? :\.[\w!#$%&’*+/=?^_`{|}~-]+)*@(? :[\w](? :[\w-]*[\w])? \.) +[\w](? :[\w-]*[\w])?

5. Verify the ID card number

The following is the regular verification of the ID number. 15 or 18.

15:

^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$

18:

^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$

6. Verification date

Date verification in “YYYY-MM-DD” format, including flat leap years.

^ (? : (? ! 0000) [0-9] {4} – (? : (? : 0 | [1-9] [0-2] 1) – (? : 0 [1-9] [0-9] | | 1 2 [0 to 8]) | (? : 0 [9] 13 – | [0-2] 1) – (? 30) : 29 | | (? : 0 [13578] 1 [02]) – 31) | | (? : [0-9] {2} (? : 0 [48] | [2468] [048] | [13579] [26]) | (? : 0 [48] | [2468] [048] | [13579] [26]) 00) – 02 – $29)

7. Check amount

Amount check, accurate to 2 decimal places.

1

^ [0-9] + (. [0-9] {2})? $

8. Check your phone number

The following is a regular expression for mobile phone numbers starting with 13, 15, and 18. (The first two digits can be extended according to the current domestic collection number)

1

^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

9. Check the VERSION of Internet Explorer

IE has not been completely replaced, many pages still need to do version compatibility, the following is the expression of THE IE version check.

1

^.*MSIE[5-8](? : \ [0-9] +)? (? ! .*Trident\/[5-9]\.0).*$

10. Verify IP address V4

IP4 regular statements.

1

\b(? : (? : 25 [0 to 5] | 2 [0 to 4] [0-9] | [01]? [0-9] [0-9]?) \.) {3} (? : 25 [0 to 5] | 2 [0 to 4] [0-9] | [01]? [0-9] [0-9]?) \b

11. Verify the IP-v6 address

IP6 regular statement.

1

(([0-9 a – fA – F] {1, 4} {7, 7}) [0-9 a – fA – F] {1, 4} | ([0-9 a – fA – F] {1, 4} {1, 7}) : | ([0-9 a – fA – F] {1, 4} {1, 6}) : [0-9 a – fA – F] {1, 4} | ([0-9 – fA – a F] {1, 4} {1, 5}) (: [0-9 a – fA – F] {1, 4}, {1, 2} | ([0-9] a – fA – F {1, 4} {1, 4}) (: [0-9 a – fA – F] {1, 4}, {1, 3} | ([0-9 a – fA – F] {1, 4} {1, 3}) (: [0-9 – a FA – F] {1, 4} {1, 4} | ([0-9 a – fA – F] {1, 4}} {1, 2) (: [0-9 a – fA – F] {1, 4}, {1, 5} | [0-9 a – fA – F] {1, 4} : ((: [0-9 a – fA – F] {1, 4}, {1, 6}) | : ((: [0-9 – a FA – F] {1, 4} {1, 7} | 🙂 | fe80: : [0-9 a – fA – F] {0, 4}) {0, 4} % [0-9 a zA – Z] {1} | : : (FFFF (: 0 {1, 4}) {0, 1} {0, 1} ((25) [0 to 5) | (2 [0 to 4] | 1 {0, 1} [0 9]) {0, 1} [0-9]) \.) {3} (25 [0 to 5) | (2 [0 to 4] | 1 {0, 1} [0-9]) {0, 1} [0-9]) | ([0-9 a – fA – F] {1, 4} {1, 4}) : ((25 [0 to 5) | (2 [0 to 4] | 1 {0, 1} [0-9]) {0, 1} [0-9]) \.) {3} (25 [0 to 5) | (2 | 1 [0-4] [0-9] {0, 1}) [0-9] {0, 1}))

12. Check the URL prefix

In application development, it is often necessary to distinguish between HTTPS and HTTP requests. The following expression can be used to extract a URL prefix and then determine logically.

1

2

3

4if(! s.match(/^[a-zA-Z]+:\/\//))

{

s=’http://’+s;

}

13. Extract URL links

The following expression filters out a URL from a piece of text.

1

^(f|ht){1}(tp|tps):\/\/([\w-]+\.) +[\w-]+(\/[\w-./?%&=]*)?

14. Verify file path and extension

Verify the path and extension of the Windows file (.txt in this example)

1

^([a-zA-Z]\:|\\)\\([^\\]+\\)*[^\/:*?”<>|]+\.txt(l)? $

15. Extracting ColorHexCodes

Sometimes you need to extract a color code from a web page, you can use the following expression.

1

^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$

16. Extract web images

If you want to extract all the image information in a web page, you can use the following expression.

1

\] * (SRC) * = * [\ ‘\’] {0, 1} ([^ \ \ ‘\ “>] *)

Extract page hyperlinks

Extract hyperlinks in HTML.

1

(]*)(href=”https? ((: \ \ /)? ! (? : (? :www\.) ? ‘.implode(‘|(? :www\.) ? ‘,$follow_list).’))[^”]+)”((? ! .*\brel=)[^>]*)(? : [^ >] *) >

18. Find CSS properties

You can search for matching CSS properties using the following expression.

1

^\s*[a-zA-Z\-]+\s*[:]{1}\s[a-zA-Z0-9\s.#]+[;] {1}

19. Extract comments

If you need to remove comments from HMTL, you can use the following expression.

1


20. Match the HTML tag

Tag attributes in HTML can be matched by the following expression.

1

< \ /? \w+((\s+\w+(\s*=\s*(? : “. *?” | ‘. *? ‘|[\^'”>\s]+))?) +\s*|\s*)\/? >

Syntax for regular expressions