Details of the replace method in javascript regular expressions

  • 2020-06-01 08:10:34
  • OfStack

I've covered the four basic methods of regex in previous articles, and I mentioned the replace method at the time

Let's review 1 use of the replace method:
First, define a regular object: var re=/ middle write matching conditions /;
replace () : matches the string regularly. If the match is successful, replace the matched string with a new string
Syntax: string.replace(re, new string);

For example, it is not uncommon to see an uncivilized word replaced by * on the Internet. Let's try 1:


<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var oTxtarea=document.getElementsByTagName('textarea');
  var oInpt=document.getElementById('bt');
  var re=/ Your younger sister |fuck| You big ye | ' ' /g;
  oTxtarea[0].value=' I want to see your sister, no, your uncle, I want to cute your sister, no, you think too much ';
  oInpt.onclick=function(){  
    oTxtarea[1].value=oTxtarea[0].value.replace(re,'*');
  };  
};
</script>
<body>
  <textarea rows='7' cols='20'>
  </textarea><br />
  <input id='bt' type='button' value=' Convert to uncivilized language '><br />
  <textarea rows='7' cols='20'>
  </textarea><br />
</body>
</html>

Of course, we are not satisfied with the above conversion effect, what I want to achieve is that the conversion of a few words to show a few *

In fact, parameter 2 in replace(parameter 1, parameter 2) can be a callback function. We will modify the program 1, replace the second parameter with a callback function, and pass a parameter to the callback function


<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var oTxtarea=document.getElementsByTagName('textarea');
  var oInpt=document.getElementById('bt');
  var re=/ Your younger sister |fuck| You big ye | ' ' /g;
  oTxtarea[0].value=' I want to see your sister, no, your uncle, I want to cute your sister, no, you think too much ';
  oInpt.onclick=function(){  
    oTxtarea[1].value=oTxtarea[0].value.replace(re,function(obj){
        alert(obj);
        /*alert(obj.length);*/
    });
  };  
};
</script>
<body>
  <textarea rows='7' cols='20'>
  </textarea><br />
  <input id='bt' type='button' value=' Convert to uncivilized language '><br />
  <textarea rows='7' cols='20'>
  </textarea><br />
</body>
</html>

As you can see from the above result, the second parameter is a callback function, but when the parameters in the callback function are displayed, they are all successfully matched strings

We can then process each result in this parameter, producing a number of * signs in a few words


<!DOCTYPE>
<html>
<head>
  <meta charset='utf-8'> 
  <title></title>
</head>
<script type="text/javascript">
window.onload=function(){
  var oTxtarea=document.getElementsByTagName('textarea');
  var oInpt=document.getElementById('bt');
  var re=/ Your younger sister |fuck| You big ye | ' ' /g;
  oTxtarea[0].value=' I want to see your sister, no, your uncle, I want to cute your sister, no, you think too much ';
  oInpt.onclick=function(){  
    oTxtarea[1].value=oTxtarea[0].value.replace(re,function(obj){
        var a='';
        for (var i = 0; i < obj.length; i++) {
          a+='*';
        }
        return a;
    });
  };  
};
</script>
<body>
  <textarea rows='7' cols='20'>
  </textarea><br />
  <input id='bt' type='button' value=' Convert to uncivilized language '><br />
  <textarea rows='7' cols='20'>
  </textarea><br />
</body>
</html>

With the example above, have you learned one more step about the replace method...

That's all for this article, I hope you enjoy it.


Related articles: