Look at the required regular expressions and recursion

1, the recursion

Recursive function: A function can call itself internally

function func() {
  func()
}
func()
Copy the code

Recursion is prone to stack overflow. The above is a typical stack overflow, so we must add an exit conditionreturn

Var num = 1 function func() {console.log(' print ${num} times') if (num === 10) {return} num++ func()} func()Copy the code

Examples of recursion:

• 1, use recursion to find the factorial of 1 ~ n

function func(n) { // 1 * 2 * 3 * ... n if (n === 1) return 1; return n * func(n - 1) } func(5) // 120Copy the code

• 2, // Fibonacci sequence: the sum of the first two terms equals the value of the third term: 1, 1, 2, 3, 5, 8, 13, 21, 34…

// The user enters a number n, The rabbit sequence value function of the number corresponding to fb (n) {if (n = = = 1 | | n = = = 2) return 1 return fb (n - 1) + fb (n - 2)} fb / / 34 (9)Copy the code

• 3. Return the corresponding data object according to the ID

const arr = [ { id: 1, name: 'Jerry', friends: [ { id: 11, name: 'Lise' }, { id: 12, name: 'Tom' } ] }, { id: 2, name: 'xiaowang' } ]; const arr = [ { id: 1, name: 'Jerry', friends: [ { id: 11, name: 'Lise' }, { id: 12, name: 'Tom' } ] }, { id: 2, name: 'xiaowang' } ]; function getId(data, id) { var o = {} data.forEach(function (value) { if (value.id === id) { o = value return value } else if (value.friends?.length > 0) { o = getId(value.friends, id) } }) return o } console.log(getId(arr, 12)) // {id: Function getId(arr, id) {let queue = []; arr.forEach(item => { queue.push(item) }) while(queue.length > 0) { const value = queue.shift(); if(value.id === id) return value; if(value.friends && value.friends.length > 0) { value.friends.forEach(item => queue.push(item)); } } } console.log(getId(arr, 12)) // {id: 12, name: 'Tom'}Copy the code

2. Deep and light copy

• 1. Shallow copy copies only one layer, deeper object level copies only references
• 2. Deep copy copies multiple layers of data at each level

Shallow copy

const obj = { name: 'Jerry', age: 18, friends: { name: 'Lise' } }; Var o = {} for (var I in obj) { Obj [I] attribute o[I] = obj[I]} or Object.assign(o, O.friends. name = 'Tom' console.log(o) console.log(obj)Copy the code

Deep copy

const obj = { name: 'Jerry', age: 18, friends: { name: 'Lise' }, colors: ['red', 'green', 'blue'] }; Function deepCopy(newObj, oldObj) {for(var I in oldObj) { If (item instanceof Array) {newObj[I] = [] deepCopy(newObj[I], const item = oldObj[I] // 2 NewObj [I] = {} deepCopy(newObj[I], item)} else {// 4, NewObj [I] = item}}} deepCopy(o, obj)Copy the code

3. Regular expressions

Regular expressions: Patterns used to match combinations of characters in strings. In JS, regular expressions are also objects.

This is usually used to detect and replace text that matches a pattern, such as validation forms: user name forms can only be typed with letters, numbers, or underscores.

It is also used to filter sensitive words in the content of a page (substitution), or to extract a specific part of a string that we want, etc

3.1. Create regular expressions

• Create a regular expression:
  • 1, the use ofRegExpObject to create

  Const rg = new RegExp(/ expression /)Copy the code

  • 2. Create regular expressions using literals

  Const rg = / expression /Copy the code

• Testing regular expressionstest

Method of the test() re object that checks whether a string conforms to the specification and returns true or false

const rg =  /123/
rg.test(123) // true
rg.test(456) // false
Copy the code

• Composition of regulars

A re can be composed of simple characters, such as/ABC /, or a combination of simple and special characters, such as /ab*c/. Special characters are metacharacters, special characters that have special meaning in the re, such as ^, $, and +

For special symbols, see MDN regular expressions

Regular test tool: tool.oschina.net/regex

3.2. Special characters in re

• 3.2.1 boundary operator

The boundary character (position character) in the re is used to indicate the position of the string. There are two main characters: ^ and $

• ^ Matches the text at the beginning of the line
• $matches the text at the end of the line

// true console.log(rg.test(' ABC ')) // true console.log(rg.test('abcd')) // Log (rg.test('aabc')) // true const reg = /^ ABC // / console.log(reg.test(' ABC ')) // true console.log(reg.test('abcd')) // true console.log(reg.test('aabc')) // false console.log(reg.test('abdc')) // false Const reg1 = /^ ABC $/ // Exactly matches console.log(reg1.test(' ABC ')) // true console.log(reg1.test('abcd')) // false console.log(reg1.test('aabc')) // falseCopy the code

• 3.2.2 Character Classes: []

Indicates that you have a list of characters to choose from, and you only need to match one of them

Const reg = /[ABC]/ // Return true console.log(reg.test('alia')) // true const reg1 = /^[ABC]$ Log (reg1.test('alia')) // false console.log(reg1.test('a')) // true console.log(reg1.test('b')) // true console.log(reg1.test('bc')) // false console.log(reg1.test('c')) // true console.log(reg1.test('cc')) // false console.log(reg1.test('abc')) // falseCopy the code

• 3.3.3 [-] Range character in square brackets –

Const reg = /^[a-z]$/ // Any of the 26 letters returns true console.log(reg.test('alia')) // false console.log(reg.test('a')) // true console.log(reg.test('A')) // falseCopy the code

• 3.3.4 Character Combinations

// String combination const reg1 = /^[A-za-z]$/ // // any of 26 letters returns true console.log(reg1.test('alia')) // false The console. The log (reg1. Test (' a ')) / / true on the console. The log (reg1. Test (' a ')) / / true / / such as: reg = / ^ [a zA - Z0 - _ - 9] $/Copy the code

• 3.4.5 [^] The ^ in square brackets indicates the inverse

const reg = /^[^abc]$/
console.log(reg.test('a'))  // false
Copy the code

• 3.4.6 quantifier operator

Used to set the number of occurrences of a pattern

// + >= 1 const reg1 = /^a+$/ console.log(reg1.test(”)) // false console.log(reg1.test(‘a’)) // true console.log(reg1.test(‘b’)) // false console.log(reg1.test(‘aaa’)) // true

/ /? 1 || 0 const reg2 = /^a? $/ console.log(reg2.test(”)) // true console.log(reg2.test(‘a’)) // true console.log(reg2.test(‘b’)) // false console.log(reg2.test(‘aaa’)) // false

// {3} repeat 3 times const reg3 = /^a{3}$/ console.log(reg3.test(”)) // false console.log(reg3.test(‘a’)) // false console.log(reg3.test(‘b’)) // false console.log(reg3.test(‘aaa’)) // true

// {3,} >= 3 const reg4 = /^a{3,}/ console.log(reg4.test(”)) // false console.log(reg4.test(‘a’)) // false console.log(reg4.test(‘b’)) // false console.log(reg4.test(‘aaa’)) // true console.log(reg4.test(‘aaaaa’)) // true The console. The log (reg4. Test (‘ aaabc)) / / false console. The log (‘ — — — — — — — — — — – ‘) / / {3, 8} > = 3 && < = 8 const reg5 = {3, 8} / / ^ a console.log(reg5.test(”)) // false console.log(reg5.test(‘a’)) // false console.log(reg5.test(‘b’)) // false console.log(reg5.test(‘aaa’)) // true console.log(reg5.test(‘aaaaa’)) // true console.log(reg5.test(‘aaabc’)) // false console.log(reg5.test(‘aaaaaaaa’)) // true

- 3.4.7
Copy the code

Var reg = /^[a-za-z0-9_ -]$var reg = /^[a-za-z0-9_ -]$var reg = /^[a-za-z0-9_ -]$ console.log(reg.test(‘a’)) // true console.log(reg.test(‘ab’)) // false console.log(reg.test(1)) // true console.log(reg.test(’11’)) // false console.log(reg.test(‘aa’)) // false

#### 4. User name verification: If the user name is valid, the message "The user name is valid and the color is changed to green. If the user name is invalid, the message" the user name is invalid and the color is changed to redCopy the code

const name = document.querySelector(‘.name’); const span = document.querySelector(‘span’); Var reg = /^[a-za-z0-9_ -]{6,16}$/ name.onblur = function () {if (reg.test(this.value)) {span. ClassName = ‘green’ Sp.innerhtml = ‘user name valid’} else {sp.className = ‘red’ sp.innerhtml = ‘user name invalid’}}

#### 5, parenthesis summary -1, quantifier curly brace, indicating number of repetitions -2, parenthesis in character set, matching any character in square brackets -3, parenthesis, indicating priorityCopy the code

/ / brackets [], character set, match any character in square brackets const reg = / ^ [ABC] $/ / / a | b | | | c can be

// curly braces {}, quantifier, Const reg1 = /^[ABC]{3}$/ console.log(reg1.test(‘aaa’)) // true console.log(reg1.test(‘abcabcabc’)) // false

Const reg2 = /^ ABC {3}$/ // it just repeats C three times abccc console.log(reg2.test(‘aaa’)) // false console.log(reg2.test(‘abcabcabc’)) // false console.log(reg2.test(‘bbb’)) // false console.log(reg2.test(‘ccc’)) // false console.log(reg2.test(‘abccc’)) // true console.log(reg2.test(‘aabccc’)) // false

// The parentheses denote priority const reg3 = /^(ABC){3}$/ / the parentheses denote ABC to repeat console.log(reg3.test(‘aaa’)) // false console.log(reg3.test(‘abcabcabc’)) // true console.log(reg3.test(‘abccc’)) // false

# # # # 6, can test your online writing regular right [] (https://c.runoob.com/front-end/854/) (https://c.runoob.com/front-end/854/) will also have some of the commonly used regular:! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0537bdbbe392427ea7b62d3be3f873c0~tplv-k3u1fbpfcp-zoom-1.image) #### 7, Predefined classes Refers to some common patterns of shorthand | | predefined class that | | -- - | -- - | | | \ d match any number between 0 and 9, equivalent to [0-9] | | \ | d match all 0-9 characters, Equivalent to [^ 0-9] | | | \ w match any letters, Numbers, and the underline, equivalent to [A Za - z0-9 _] | | | \ w except all letters, Numbers, and underscore characters, Equivalent to [^ A - Za - z0-9 _] | | \ s | matching Spaces (including line breaks, tabs, Spaces), equivalent to [\ t \ r \ n \ n \] f | | \ s | matching non whitespace characters, the equivalent of \ r \ n \ [^ \ t v \] f | instances:Copy the code

// Verification of landline number: national landline number in two formats: 010-12345678 or 0530-1234567 / / const reg = / ^ \ d {3} – \ d {8} | \ d {4} – \ d {7} / / / or expressed in ∣ / / in the regular shorthand constreg = / \ d3, 4 – \ d7, 8 / / / or in regular use | said / / short const reg = / ^ \ d {3, 4} – \ d {7, 8} / / / or expressed in ∣ / / in the regular shorthand constreg = / \ d3, 4 – \ d7, 8 / console log (reg. Test (‘ demons the shadows’)) / / false console.log(reg.test(‘3829889’)) // false console.log(reg.test(‘3829-889’)) // false console.log(reg.test(‘022-31231321’)) // true

#### 8, replace replaces the replace() method to replace a string, either a string or a reCopy the code

Replace (/ STR /, replacement) // The first argument: the replaced string or re // The second argument: the replaced string // The return value is a new replaced string

Copy the code

const str = ‘JerryLise’ const newStr = str.replace(‘Jerry’, ‘xiaowang’) const newStr = str.replace(/Jerry/, ‘xiaowang’) console.log(newStr) // xiaowangLise

Example:Copy the code

const text = document.querySelector(‘textarea’) const btn = document.querySelector(‘button’) const div = Document.queryselector (‘div’) btn.onclick = function () {div.innerhtml = text.value.replace(/ nether /, ‘**’)}

! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c2c955229a8f4bf1952491785ff8d82a~tplv-k3u1fbpfcp-zoom-1.image) Replace can replace only the first string that meets the criteria, so we can use 'regular expression parameters' #### 9, regular expression parametersCopy the code

/ expression /[switch] // switch, also known as the modifier, according to what pattern matching, there are three values: // 1, g: global matching // 2, I: ignore case // 3, gi: global matching + ignore case

Examples above:Copy the code

Div. InnerHTML = text. The value. The replace (/ pussy cat | super/g, “* *”)

! [](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3e2cdc4d3c2d47c6a65717897e433ead~tplv-k3u1fbpfcp-zoom-1.image)Copy the code