javascript正規表示式中的replace方法詳解_javascript技巧-js教程-PHP中文網

javascript正規表示式中的replace方法詳解_javascript技巧

WBOY

發布： 2016-05-16 16:03:14

原創

1207 人瀏覽過

前面的文章我已經介紹了正規的四個基本方法，當時也提到replace方法

我們來回顧一下replace方法的使用：
先定義一個正規物件：var re=/中間寫匹配的條件/;
replace（）：正規符合字串，若是符合成功，將符合成功的字串用新的字串來取代
語法：字串.replace(re,新的字串)；

舉個例子：網路中常會遇到，不文明的字會被*代替，我們來試試看：

<!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=/你妹|fuck|你大爷|萌萌/g;
  oTxtarea[0].value='我要看你妹，不行，你大爷，我要萌萌你妹，不行，你想想的太多了';
  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='转化不文明的语言'><br />
  <textarea rows='7' cols='20'>
  </textarea><br />
</body>
</html>

登入後複製

當然了，我們對上面的轉換效果不滿意，我想要實現的是，轉換了幾個字就顯示幾個*號

這時候我們就需要進行分析了，其實，replace(參數1，參數2)中的參數2可以是回呼函數，我們對程式進行改造一下，將第二個參數換成回呼函數，並且給這個回呼函數傳遞一個參數

<!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=/你妹|fuck|你大爷|萌萌/g;
  oTxtarea[0].value='我要看你妹，不行，你大爷，我要萌萌你妹，不行，你想想的太多了';
  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='转化不文明的语言'><br />
  <textarea rows='7' cols='20'>
  </textarea><br />
</body>
</html>

登入後複製

可以看出上面的結果很奇怪，第二個參數是回呼函數，但是顯示回呼函數中的參數時，卻都是成功匹配到的字串

那麼我們就可以針對這個參數中的每個結果做處理，幾個字就產生幾個*號

<!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=/你妹|fuck|你大爷|萌萌/g;
  oTxtarea[0].value='我要看你妹，不行，你大爷，我要萌萌你妹，不行，你想想的太多了';
  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='转化不文明的语言'><br />
  <textarea rows='7' cols='20'>
  </textarea><br />
</body>
</html>

登入後複製

透過上面的例子，是不是又對replace方法了解加深了一步。。。。。

以上所述就是本文的全部內容了，希望大家能夠喜歡。