DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript正則表達式中的replace方法詳解
javascript正則表達式中的replace方法詳解
編輯:關於JavaScript     

前面的文章我已經介紹了正則的四個基本方法,當時也提到過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方法了解加深了一步。。。。。

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved