Regular expression, a very old and powerful text processing tool, can quickly realize a very complex business logic with only a very short expression statement. Mastering regular expressions can greatly improve your development efficiency.

Regular expressions are often used to verify fields or arbitrary strings, such as the following JavaScript code to verify 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('Date format error!');           

Here are 20 regular expressions that are often used in front-end development.

1 . Verify password strength

The strength of the password must be a combination of upper and lower case letters and numbers. Special characters cannot be used, and the length is between 8-10.

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

2. Verify Chinese

String can only be Chinese.

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

3. A string consisting of numbers, 26 English letters or underscores

^\\w+$

4. Verify E-Mail address

Like passwords, the following is a regular check statement for E-mail address compliance.

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

5. verify ID number.

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

15 bits:

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

18 bits:

^[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, taking into account flat leap years.

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

7. Verification amount

Amount verification, accurate to 2 decimal places.

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

8. Verify mobile phone number

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

^(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. Judge the IE version

IE has not been completely replaced yet. Many pages still need to be version compatible. The following is the expression for IE version check.

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

10. Verify IP-v4 address

IP4 regular statement.

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

11. Verify IP-v6 address

IP6 regular statement.

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

12. Check the prefix of the URL

In application development, it is often necessary to distinguish whether the request is HTTPS or HTTP. The prefix of a url can be taken out through the following expression and then judged logically.

if (!s.match(/^[a-zA-Z]+:\\/\\//))
{
    s = 'http://' + s;
}

13. Extract URL links

The following expression can filter out the URL in a piece of text.

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

14. File path and extension verification

Verify the file path and extension under windows (the. txt file in the following example)

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

15. Extract Color Hex Codes

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

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

16. Extract web page pictures

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

\\< *[img][^\\\\>]*[src] *= *[\\"\\']{0,1}([^\\"\\'\\ >]*)

17. Extract page hyperlinks

Extract hyperlinks in html.

(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\\/\\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^"]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>

18. Find CSS properties

Through the following expression, you can search for the matching CSS properties.

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

19. Extract notes

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

<!--(.*?)-->

20. Match HTML tags

The tag attributes in HTML can be matched by the following expression.

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

Syntax of regular expressions

The following is a very good regular expression Cheat Sheet, which can be used to quickly find relevant syntax.

If you feel helpful, please tell me more and let's make progress together!

Those interested in Java learning and Internet technology discussion can add groups, waiting for you: 736953707 QQ group