We normally use split to split strings into arrays, but actually split can also use regular expressions as delimiter to split strings.

This looks like nothing, just use the re to match the delimiter, and then cut it. Actually, it’s not that simple. There’s a catch.

Regular expressions do the separator pit

  • Regular expressions do not use parentheses

    In this case, regular expressions as delimiters are no different from strings as delimiters. Here’s an example:

// Use the regular expression const STR ='1a1b1c';

console.log(str.split(/\d/));
// Array [""."a"."b"."c"]

console.log(str.split((1)));
// Array [""."a"."b"."c"]
Copy the code

  • Regular expressions use parentheses

    In this scenario, what is matched in the parentheses of the regular expression is included as an element in the output array. Here’s another example:

const str = '1a1b1c';
console.log(str.split((/(\d)/)));
// Array [""."1"."a"."1"."b"."1"."c"]
Copy the code

Note that the difference between this and the top is the extra parenthesis of the re. Here’s what the MDN says:

Splitting with a RegExp to include parts of the separator in the result

If separator is a regular expression that contains capturing parentheses (), matched results are included in the array.

Capturing parentheses Enables matching results to be included as delimiter in the output array.

This prompts us to customize our delimiter by parenthesizing the part of the re we want to use as the delimiter. Here’s another example:

const reg = /<%=([\s\S]+?) %>/g; const str ='# <%= utils.classify(name) %>';
  console.log(str.split(reg));
  // Array ["#"." utils.classify(name) ".""]
Copy the code

<%= utils.classify(name) %>, but the parentheses only contain [\s\ s]+? As a result, only utils.classify(name) is included in the array as a delimiter, while the rest of the re matches (<%= and %>) are ignored!

  • Regular expressions use groups + parentheses

Here’s an example:

const reg = /<%-([\s\S]+?) < % % > |#([\s\S]+?) %>|<%=([\s\S]+?) %>|<%([\s\S]+?) %>|$/g;
  const str = '# <%= utils.classify(name) %>';
  console.log(str.split(reg));
  // Array ["#", undefined, undefined, " utils.classify(name) ", undefined, ""]
Copy the code

This is part of the @angular/ CLI source code and matches certain syntax (escape, comment, interpolation, statement) in the template string. Careful students may have noticed that there is some undefined in the result, which corresponds to the groups in the re in terms of order and quantity. That’s right, when you use grouped regular expressions and enclose the groups with capture parentheses, undefined is included as a delimiter in the array when the contents of the parentheses don’t match any strings. Of course, when we remove the capture parentheses of a group, the corresponding undefined will not be included in the array.

So: what does this use do?

This is illustrated by the example: when you have a string with a particular syntax (like <%, <%=, <%-, %> in EJS) and you want to know the semantics of the elements cut out by an ordered regular grouping (normal character, escape, comment, Interpolation, statement)? . Then you can use this method to cut, cut out the result must be (group number + 1) integer multiple! This way, you can know exactly what the semantics of each element are, and then translate your templates at your leisure.

Ok, split function is introduced here, shortcomings and errors in the article, welcome criticism, thank you!

Please do not reprint without permission!