JS Regular Expressions Learning Notes 2

Posted by HughbertD on Fri, 19 Jul 2019 04:11:51 +0200

Phase II

This part is the second part of the learning rule, Click Part I Look at the first part.

This part of the study includes:

  1. Grouping
  2. Assertion
  3. Matching patterns (greed and laziness)

Grouping

We can match a character many times with quantifiers, but if we want to match multiple characters many times, we need to use grouping, such as the following example

// A character that matches letters and numbers three times in a row
let str = "a1b2c3d4";
let reg = /([a-z]\d){3}/

str.replace(reg,"x");

// Rearrangement of characters by grouping
let str = "2019-09-10";
let reg = /^(\d{4})-(\d{2})-(\d{2})/
str.replace(reg,"$2/$3/$1")
// result "09/10/2019"

// Match IP v4 address
let reg = /^((2[0-4]\d|25[0-5]|[0-1]?\d\d?)\.){3}2[0-4]\d|25[0-5]|[0-1]?\d\d?/;
// The format of IP address is xxx. xxx. xxx. xxx. xxx. The four-digit character of three digits and one point matches three times, plus three characters. The combination is the IP address.
// By grouping, we match the grouped content three times.

// You can match grouped content in a regular by inverting references
let reg = /(\w{3}) is \1/;  

reg.test('kid is kid') // true
reg.test('dik is dik') // true
reg.test('kid is dik') // false
reg.test('dik is kid') // false

//\ 1 The content of the reverse reference is the same as that of the grouping.

Characteristic

  • Matching rules enclosed in ()
  • 1 represents a reverse reference, referring to the content of the first subexpression
  • 2 represents a reverse reference, referring to the content of the second subexpression
  • $0 matches the entire string
  • The content of the first grouping matched by $1
  • The content of the second grouping matched by $2

Assertion

Assertions are somewhat like ^$b to specify a location that should satisfy certain conditions (assertions). Usually assertions are used to find something before or after something (excluding themselves).

Code Explain
?=exp Match the position before exp
?<=exp Match the position behind exp
?!exp It's not the exp position that matches the heel.
?<!exp Match the location that is not exp before

DEMO

// ?=exp
let reg = /\b\w+(?=ing\b)/
let str = I'm singing while you're dancing.
// Match the front part of the word ending in ing

// ?<=exp
let reg = /(?<=\bre)\w+\b/; 
// Match the second half of the word at the beginning of re
let str = reading a book;

Matching pattern

  • Greedy model
  • Lazy mode

When regular expressions contain qualifiers that can accept repetition, the usual behavior is to match as many characters as possible. For example, the following:

let reg = /a*b/;
let str = "aabab";
let result = str.replace(reg,"X");
// All str strings above will be replaced by a character X. This is called the greedy matching pattern.
// result = "X";

But sometimes, we want to match as few characters as possible. Just add a question mark after the quantifier qualifier?

let reg = /a*?b/;
let str = "aabab";
let result = str.replace(reg,"X");
// All str strings above will be replaced by a character X. This is called the greedy matching pattern.
// result = "Xab";
Code Explain
*? row 1 col 2
+? row 2 col 2
?? row 2 col 2
{n,m}? row 2 col 2
+? row 2 col 2
+? row 2 col 2

Think more, practice more, then check the results, repeat the process, in this process will progress little by little.

Exercises

First download a regular expression test tool: address

Our exercises can be tested with this tool.

  1. Match the right phone
  2. Match the right mail
  3. Matching IP Address (IPV4)
  4. Matching URL s
  5. Match the ID number (the ID card has 18 digits, and the last digit can be character X)
  6. Matched integers
  7. Matched decimal
  8. Matching Chinese
  9. Match the date in XX xx-xx-xx format (or xxxx/xx/xx)
  10. Remove the protocol header of the jpg file of the http protocol
var imgs = [
      'http://img.host.com/images/fds.jpg',
    'https://img.host.com/images/fjlj.jpg',
    'http://img.host.com/images/djalsdf.png',
    'https://img.host.com/images/adsjfl.png',
    'http://img.host.com/image/jasdlf.jpg'
];
  1. Getting parameters in url
const _url = "http://img.host.com/images/fds.jpg?name=mmcai&age=28"
  1. Replace lowercase values with uppercase values in strings
//Given string
const str = '958317640';
//Expected results
const newStr = "Ninety-five-eight-three-one-seventy-six-four"
  1. Change the number expressed by scientific counting from 10000000000 to 10.000.000
  2. Give a hyphen string such as get-element-by-id to be converted to hump form
  3. Divide numbers into commas every three
  4. Matching fixed telephone 000-12345678
  5. Match the numeric characters in the following strings and output the array
//Original string
const str = "d3gfhf72gh254bhku289fgdhdy675gfh"

// Expected results
const result = [3,72,254,289,675];
  1. Check passwords - Enter only 6-20 bits of letters, numbers, underscores
  2. Matching Chinese Characters

Practice answers given later, you can also Baidu to find Ha, but the results are not necessarily unique, there are several ways to write, as long as the results can be achieved through the regular checking tool.

Reference material:

Topics: Javascript