Translator: Front-end wisdom

Original text: dev. To/emmawedekin…

Click “like” and then look, wechat search [Big Move the world] pay attention to this person without dACHang background, but with a positive attitude upward. In this paper, making github.com/qq449245884… Has been included, the article has been categorized, also organized a lot of my documentation, and tutorial materials.

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

Regular expressions or “regex” are used to match various parts of a string. Here’s my cheat sheet for creating regular expressions.

Matches a regular

Use the.test() method

let testString = "My test string";
let testRegex = /string/;
testRegex.test(testString);
Copy the code

Matching multiple patterns

Using the operating | symbols

const regex = /yes|no|maybe/;    
Copy the code

Ignore case

Use the I flag to indicate that case is ignored

const caseInsensitiveRegex = /ignore case/i;
const testString = 'We use the i flag to iGnOrE CasE';
caseInsensitiveRegex.test(testString); // true
Copy the code

Extracts the first match of the variable

Use the.match() method

const match = "Hello World!" .match(/hello/i); // "Hello"Copy the code

Extracts all matches in the array

Use the G flag

const testString = "Repeat repeat rePeAT";
const regexWithAllMatches = /Repeat/gi;
testString.match(regexWithAllMatches); // ["Repeat", "repeat", "rePeAT"]   
Copy the code

Match any character

Use wildcards as placeholders for any character

// To match "cat", "BAT", "fAT", "mat"
const regexWithWildcard = /.at/gi;
const testString = "cat BAT cupcake fAT mat dog";
const allMatchingWords = testString.match(regexWithWildcard); // ["cat", "BAT", "fAT", "mat"]    
Copy the code

Match a single character with multiple possibilities

  • With the character class, you can use it to define a set of characters to match

  • Put them in square brackets []

Const regexWithCharClass = /[CFM]at/g; // Match "cat" "fat" and "mat" but not "bat" const regexWithCharClass = /[CFM]at/g; const testString = "cat fat bat mat"; const allMatchingWords = testString.match(regexWithCharClass); // ["cat", "fat", "mat"]Copy the code

Matches letters in the alphabet

Use ranges within character set [A-z]

const regexWidthCharRange = /[a-e]at/;

const regexWithCharRange = /[a-e]at/;
const catString = "cat";
const batString = "bat";
const fatString = "fat";

regexWithCharRange.test(catString); // true
regexWithCharRange.test(batString); // true
regexWithCharRange.test(fatString); // false
Copy the code

Matches specific numbers and letters

You can also use hyphens to match numbers

const regexWithLetterAndNumberRange = /[a-z0-9]/ig;
const testString = "Emma19382";
testString.match(regexWithLetterAndNumberRange) // true
Copy the code

Matches a single unknown character

To match a set of characters that you do not want to have, use the negative character set ^

const allCharsNotVowels = /[^aeiou]/gi;
const allCharsNotVowelsOrNumbers = /[^aeiou0-9]/gi;
    
Copy the code

Matches characters that occur once or more in a line

Use the + flag

const oneOrMoreAsRegex = /a+/gi;
const oneOrMoreSsRegex = /s+/gi;
const cityInFlorida = "Tallahassee";

cityInFlorida.match(oneOrMoreAsRegex); // ['a', 'a', 'a'];
cityInFlorida.match(oneOrMoreSsRegex); // ['ss'];   
Copy the code

Matches characters that occur zero or more times in a row

Use the asterisk *

const zeroOrMoreOsRegex = /hi*/gi;
const normalHi = "hi";
const happyHi = "hiiiiii";
const twoHis = "hiihii";
const bye = "bye";

normalHi.match(zeroOrMoreOsRegex); // ["hi"]
happyHi.match(zeroOrMoreOsRegex); // ["hiiiiii"]
twoHis.match(zeroOrMoreOsRegex); // ["hii", "hii"]
bye.match(zeroOrMoreOsRegex); // null
Copy the code

Inertia match

  • The smallest part of a string that matches a given requirement
  • By default, regular expressions are greedy (matching the longest part of a string that satisfies a given requirement)
  • use?Prevent greedy mode (lazy matching)
const testString = "catastrophe"; const greedyRexex = /c[a-z]*t/gi; const lazyRegex = /c[a-z]*? t/gi; testString.match(greedyRexex); // ["catast"] testString.match(lazyRegex); // ["cat"]Copy the code

Matches the start string pattern

To test for character matches at the beginning of a string, use the caret ^, but enlarge the beginning, not the character set

const emmaAtFrontOfString = "Emma likes cats a lot.";
const emmaNotAtFrontOfString = "The cats Emma likes are fluffy.";
const startingStringRegex = /^Emma/;

startingStringRegex.test(emmaAtFrontOfString); // true
startingStringRegex.test(emmaNotAtFrontOfString); // false    
    
Copy the code

Matches the end string pattern

Use $to determine if the string ends with the specified character

const emmaAtBackOfString = "The cats do not like Emma";
const emmaNotAtBackOfString = "Emma loves the cats";
const startingStringRegex = /Emma$/;

startingStringRegex.test(emmaAtBackOfString); // true
startingStringRegex.test(emmaNotAtBackOfString); // false    
Copy the code

Matches all letters and numbers

Use the \word abbreviation

const longHand = /[A-Za-z0-9_]+/;
const shortHand = /\w+/;
const numbers = "42";
const myFavoriteColor = "magenta";

longHand.test(numbers); // true
shortHand.test(numbers); // true
longHand.test(myFavoriteColor); // true
shortHand.test(myFavoriteColor); // true
Copy the code

Match everything except letters and numbers

\W is used to show the antisense of \W

const noAlphaNumericCharRegex = /\W/gi; const weirdCharacters = "! _ $!!!!!" ; const alphaNumericCharacters = "ab283AD"; noAlphaNumericCharRegex.test(weirdCharacters); // true noAlphaNumericCharRegex.test(alphaNumericCharacters); // falseCopy the code

Match all numbers

You can use the character set [0-9], or use the abbreviation \d

const digitsRegex = /\d/g;
const stringWithDigits = "My cat eats $20.00 worth of food a week.";

stringWithDigits.match(digitsRegex); // ["2", "0", "0", "0"]
Copy the code

Matches all non-numbers

\D is used to show the antisense of \D

const nonDigitsRegex = /\D/g;
const stringWithLetters = "101 degrees";

stringWithLetters.match(nonDigitsRegex); // [" ", "d", "e", "g", "r", "e", "e", "s"]
Copy the code

Match the blank space

Use \s to match Spaces and carriage returns

const sentenceWithWhitespace = "I like cats!" var spaceRegex = /\s/g; whiteSpace.match(sentenceWithWhitespace); // [" ", ""]Copy the code

Match non-space

\S is used to show the antisense of \S

const sentenceWithWhitespace = "C a t"
const nonWhiteSpaceRegex = /\S/g;
sentenceWithWhitespace.match(nonWhiteSpaceRegex); // ["C", "a", "t"]
Copy the code

Number of matched characters

You can use {lower bound, upper bound} to specify a specific number of characters in a line

const regularHi = "hi"; const mediocreHi = "hiii"; const superExcitedHey = "heeeeyyyyy!!!" ; Const excitedRegex = {1, 4} / hi /; excitedRegex.test(regularHi); // true excitedRegex.test(mediocreHi); // true excitedRegex.test(superExcitedHey); //falseCopy the code

Number of characters that match the minimum number of characters

Use {lower bound,} to define the minimum number of characters required. The following example shows that the letter I must occur at least 2 times

const regularHi = "hi"; const mediocreHi = "hiii"; const superExcitedHey = "heeeeyyyyy!!!" ; const excitedRegex = /hi{2,}/; excitedRegex.test(regularHi); // false excitedRegex.test(mediocreHi); // true excitedRegex.test(superExcitedHey); //falseCopy the code

Matches the exact number of characters

Use {requiredCount} to specify the exact number of characters required

const regularHi = "hi";
const bestHi = "hii";
const mediocreHi = "hiii";
const excitedRegex = /hi{2}/;

excitedRegex.test(regularHi); // false
excitedRegex.test(bestHi); // true
excitedRegex.test(mediocreHi); //false
    
Copy the code

Matches 0 or 1 times

Use? Matches 0 or 1 times

const britishSpelling = "colour"; const americanSpelling = "Color"; const languageRegex = /colou? r/i; languageRegex.test(britishSpelling); // true languageRegex.test(americanSpelling); // trueCopy the code

Your likes are my motivation to keep sharing good things.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.