javascript正則表達式中的replace方法詳解
前面的文章我已經(jīng)介紹了正則的四個基本方法，當(dāng)時也提到過replace方法
我們來回顧一下replace方法的使用：
先定義一個正則對象：var re=/中間寫匹配的條件/;
replace（）：正則匹配字符串，若是匹配成功，將匹配成功的字符串用新的字符串來替換
語法：字符串.replace(re,新的字符串)；
舉個例子：網(wǎng)絡(luò)中經(jīng)常會遇到，不文明的詞會被*代替，我們來試一下：
<!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='轉(zhuǎn)化不文明的語言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>
當(dāng)然了，我們對上面的轉(zhuǎn)化效果不滿意，我想要實現(xiàn)的是，轉(zhuǎn)化了幾個字就顯示幾個*號
這時候我們就需要進行分析了，其實，replace(參數(shù)1，參數(shù)2)中的參數(shù)2可以是回調(diào)函數(shù)，我們對程序進行改造一下，將第二個參數(shù)換成回調(diào)函數(shù)，并且給這個回調(diào)函數(shù)傳遞一個參數(shù)
<!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='轉(zhuǎn)化不文明的語言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>
可以看出上面的結(jié)果很奇怪，第二個參數(shù)是回調(diào)函數(shù)，但是顯示回調(diào)函數(shù)中的參數(shù)時，卻都是成功匹配到的字符串
那么我們就可以針對這個參數(shù)中的每個結(jié)果做處理，幾個字就產(chǎn)生幾個*號
<!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='轉(zhuǎn)化不文明的語言'><br />
<textarea rows='7' cols='20'>
</textarea><br />
</body>
</html>
通過上面的例子，是不是又對replace方法了解加深了一步。。。。。
以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。
相關(guān)文章
javascript實現(xiàn)根據(jù)身份證號讀取相關(guān)信息
這篇文章主要介紹了javascript實現(xiàn)根據(jù)身份證號讀取相關(guān)信息,需要的朋友可以參考下2014-12-12
From表單組件具有數(shù)據(jù)收集、提交數(shù)據(jù)的功能,某種程度上說它就是一個容器,下面這篇文章主要給大家介紹了關(guān)于uniapp表單驗證的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了微信小程序鏈接傳參并跳轉(zhuǎn)新頁面的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-11-11
Javascript中查找不以XX字符結(jié)尾的單詞示例代碼
我在寫這篇文章之前花了2個多小時在弄正則表達式，下為大家介紹下具體的實現(xiàn)思路，感興趣的朋友可以參考下2013-10-10
JS簡單編號生成器實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡單編號生成器實現(xiàn)方法,涉及JavaScript針對表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)
這篇文章主要介紹了javascript實現(xiàn)獲取一個日期段內(nèi)每天不同的價格(計算入住總價格)的相關(guān)資料,需要的朋友可以參考下2018-02-02
操作元素定位元素，大家會想到使用js來實現(xiàn)，下面有個不錯的示例，大家可以看看2014-10-10
這篇文章主要為大家詳細介紹了Bootstrap創(chuàng)建可折疊組件的對應(yīng)方法，以實例為大家分享了Bootstrap折疊組件，感興趣的小伙伴們可以參考一下2016-02-02
