In daily development, we often encounter form validation, keyword search, character substitution, and interview and written tests may be used. Next, I would like to summarize my experience of front-end re

[a-z],[a-z], \w,\d,.,+,*,? , ^ and $

However, these may only be done like form verification or simple replacement, if you want to have a different style, what should you do? Don’t worry, watch my operation

If the back end returns me an array and a text string content, and the array is full of characters, he asks me to pull out the contents of the content that match the characters in the array, and then pull them out in order for him to play with, what do you do? Write some code. Let’s see

const array = ['Miss Ma'.'Rattail juice'.'Lightning whip'.'Inside Battle'.'Don't speak martial arts'];
const content = 'Others asked me what happened to ma teacher, young people don't speak martial arts, martial arts should not fight, hope two gay rat tail juice, reflect on'
// Create a new RegExp in js.
// Since we are dynamic here, I recommend using RegExp and eval as well
// RegExp supports two parameters, a regular reg and a modifier
// Modifiers: g global, m matches newline characters, and I is case insensitive
// Use match or exec to capture subgroups
// Subgroups are the keywords wrapped in parentheses. We find all the keywords in one line of code
let reg = new RegExp(` (${array.join('|')}) `.'gm');
// The captured keys are saved here
let matchStr = [];
matchStr = content.match(reg);
// exec implements eval
reg = eval(` / (${array.join('|')})/gm`);
let value;
matchStr.length = 0;
while (value = _reg.exec(content)[1]) matchStr.push(value[1]);
Copy the code

All of a sudden, the product requires me to replace these keywords in the content with red and put them on the page. How should I do this? If you want to play the string of Teacher Ma with 6, the re must be excellent

While the previous method was used to capture and extract keywords, we’ll use the replace method to bathe the content

document.body.innerHTML = content.replace(reg, '<span style="color:red">$1</span>'))
// You can also use $&, which represents the matched value, $1... Represents the matched subgroup
Copy the code

I think about the same, the work, this time the security said, the keyword is saved by the user, you see how to do. Carefully as I do, as this will make throats ma teacher, really should do some security measures, then we use regular turn the string down the code, no matter what industry transcoding is necessary, whether encoding, or Mosaic, what should we do, however, looked at the replace API, oh, the second parameter can also function, Js really brings us too much surprise, the following code demonstration

When the second argument to replace is a callback, the first parameter of the callback is the matching data
// The following parameters are the captured subgroups $1,$2... , we now replace the < and > symbols
document.body.innerHTML = document.body.innerHTML.replace(/ [< >] /.function (value){
    return { '<':'< '.'>':'> ' }[value];
})
Copy the code

Here we are simple with regular has realized the basic functions, we want regular, replace, subgroups capture, you can see that the author is well trained, if you can master the function, can improve the efficiency of development, to quantify our fishing in time, hope everybody small classmate mouse tail juice, a good reflection, thank you