You may encounter the need to replace the same keywords in a paragraph of text content and mark it in an ascending sequence. So, for example, I’m going to replace the “data” that matches in this text with “data I”, where I is the number, there are n data matches, and I is the incrementing marker variable from 1 to n.

Demand analysis

The substitution in the re can only be carried out according to the specified rules and parameters. To achieve the above requirements, the first step is to get all matched keywords, and the value of n can be obtained. Second, find a way to iterate over the set of keywords, and then add variable I to the result.

The solution

According to the above analysis, the key point is to be able to iterate through all matches when substituting with the re. The key here is the js replace method, which we normally use like this:

this.strings = 'sd342fl${key}sfs345k423gs${key}sd333333fk'
var reg = new RegExp((` (The ${"key"}) `), 'gm');
this.strings = this.strings.replace(reg, 'newcontent');
Copy the code

The second argument to the replace method above is a string, which could actually be a function, like this:

this.strings = 'sd342fl${key}sfs345k423gs${key}sd333333fk'
var reg = new RegExp((/\$\{(key)\}/), 'gm');
this.strings = this.strings.replace(reg, newcontent);
function newcontent() {
    console.table(arguments)
 return "ntr"; } Copy the code

If we look at the argument to the newContent function, we can see what the output looks like:

  • The first argument is the string matched to the re
  • The second argument is also the matched string, but is a substring, which is the submatch contained in the first one
  • The third argument is the index position of the original string for the first argument
  • The last argument is the string itself being matched

And most important the newcontent parameters could be executed twice, because the result of the match, there are two, that if there are n n times should be executed, which can meet the requirements of the front we mentioned: of all the keyword matching to traverse, and every time they perform this function, the return value is the outcome of matches to replace value.

In fact, at this point, the answer is already coming out, I will not analyze the following, directly to the code:

var i = 0;
    this.strings = 'sd342fl${key}sfs345k423gs${key}sd333333fk'

    function increase() {
        var nstr;
 if (arguments[0] != undefined) {  var re = /^key$/;  if (re.test(arguments[0]) { nstr = "key" + i;  if (i < 2) {  i++;  } else {  i = 0  }  }  }  return nstr;  }  var reg = new RegExp((`The ${"key"}`), 'gm');  this.strings = this.strings.replace(reg, increase); console.log(this.strings) Copy the code

The result is as follows:

If you look at the result, you can see that the key string has been incremented to key0 and key1, which is what we want.

Finally, this example is relatively simple. If you have a large number of strings to analyze, you can use the following line of code to analyze the number of keywords.

'sd342fl${key}sfs345k423gs${key}sd333333fk'.split(`The ${"key"}`)
Copy the code

Well, hydrology an end here, I hope to be useful to you! For more technical articles, please follow my public id bytecedent

This article is formatted using MDNICE