Looking at the JavaScript framework design, I read that an “innerHTML” operation was not executing the code in the script tag, so I wanted to fix that operation. The implementation is simple. After executing innerHTML, we take out all the script tags and call eval() to retrieve the code characters (just consider the inline script tags), so the problem comes down to finding code characters. That’s what regular expressions do.

I am lazy, and not smart, on the matter, not understanding, not memory, so things read many times, also can not remember. I’m not going to change that, because I’m a firm believer in survival of the fittest, where the interesting stuff gets memorized and the boring stuff gets forgotten. Writing this article is to quickly reach the destination and save time when looking for information in the future.

Start with characters

Disclaimand: Forget about the Unicode character extensions in ES6.

Characters in JavaScript:

  • One can print
  • One is unprintable

You can print something like abcdefg,123456, numbers are characters, right? Yes. Can’t the numbers print? The character corresponds to a character code point value (charCode) ranging from 0 to a large number (4-digit hexadecimal: 0000-FFFF)

From String. FromCharCode (index) can be used to view the characters corresponding to a character code point

'a'.charCodeAt() / / 97
String.fromCharCode(97) // 'a'
Copy the code

The non-printable character also corresponds to a code point, so any character is designed in the computer system, not arbitrary.

var a = 123;
\u0061 / / 123
// Hexadecimal 0061 corresponds to the a character with code point 97
// the a character is declared as a variable, printing out the assigned value, 123
Copy the code

Not all characters can be variables, but all characters can be strings. Strings are the absolute first-class citizens of the computer world, because without characters there is nothing, and all the code is written in characters. With string nature is also a very important task, concrete may be: replace, add or delete, extraction of the characters Because the character is very much, more than ten thousand, developers need to up model to define the type of task: the characteristics of the characters in the beginning, ending the characteristics of the characters, the characters in the middle of the characteristics, could not contain certain characters… This is the beginning of regular expressions, which may be slightly different from language to language, but they solve the same problem at the same source, so they are used in a similar way.

Common modes or scenarios

== X, y, and z represent a character ==

  • The beginning and end of a character:/^x/,/x$/
  • Some possible characters form a set, and the hyphen can also specify the range of characters:[xyza-z]
  • A set that does not contain certain characters:[^xyz]
  • The character appears more than once:
    • Greed mode:/x? /,/x*/,/x+/,/x{n}/,/x{n,}/,/x{m,n}/
    • Non-greedy pattern matching:/ +? /== Only matches ==
    var reg = /^\d+? $/;
reg.test(12313131);// Return true because it is true
var reg2 = /\d+? /;
reg2.exec(12345);// Match '1' because it is not greedy
Copy the code
  • Subexpression:/(abc)/Capture groups and remember them,(? :abc)No capture, no memory
  • One of several characters (subexpression) :/x|y|z/
  • A character followed by a specific characterForward lookup:/x(? =y)/X followed by y, ==y does not match ==
  • A character cannot be followed by a specific characterReverse lookup /x(? ! y)/

Common methods

  • Verifies that a string conforms to a pattern: test
  • Extract all matches: match (==g flag ==)
  • Some substrings are captured and memorized for interpolation
  • Retrieves the indexes matched by a pattern: exec, search

Draw a mind map

Implement the small requirements in the introduction

function getScriptsFromString(string){
	let regexp = /<script[^>]*>([^<\/]*)<\/script>/g;
	let matches = [];
	let codes = [];
	let current = null
	while(current = regexp.exec(string)){
		matches.push(current[0]);
		codes.push(current[1]);
	}
	return {
		matches,
		codes 
	}
}
var string = `   `
let result = getScriptsFromString(string);
result.codes.forEach(item= > {
	eval(item);
})
Copy the code

The full text, welcome the person with lofty ideals to leave a message or discuss, hope to give advice!