字符串.replace( 正則 , 替換的內(nèi)容)
將匹配到的內(nèi)容替換
替換的內(nèi)容可以是字符串，也可以是帶return的函數(shù)
<script>
var str = '今天我很高興因?yàn)槲覞q了10元的工資了';
console.log( str.replace( '10' , '1000' ) ) //匹配規(guī)則可以放在（）的第一位
</script>
image.png
<script>
var str = '今天我很高興因?yàn)槲覞q了10元的工資了,我現(xiàn)在的工資是1010';
var reg = /\w+/g;
console.log( str.replace( reg , '1000' ) )
</script>
image.png
經(jīng)典案例：
把明天 和 您好 對(duì)換
var str = '明天 您好'
var reg = /(明天)\s(您好)/g;
console.log( str.replace( reg , '$2 $1') )
/(明天)\s(您好)/g // \s規(guī)定有空格 整體就是匹配到上面str
$1 $2 對(duì)應(yīng)上面的子集
把 $1 各 $2對(duì)換 就是上面子集對(duì)換
案例：臟話(huà)過(guò)慮
<div id="wrap">
<input class="txt" type="text" placeholder="請(qǐng)輸入文字">
<input class="btn" type="button" value="發(fā)表">
<ul>
<!--<li>1111222</li>-->
<!--<li>1111222</li>-->
</ul>
</div>
<script>
var oWrap = document.getElementById( 'wrap' ),
oTxt = oWrap.children[0],
oBtn = oWrap.children[1],
oUl = oWrap.children[2];
oTxt.onkeydown = function ( e ) {
e = e || window.event;
e.keyCode === 13 && fn();
}
oBtn.onclick = fn;
function fn( ) {
var val = oTxt.value;
var reg = /操*你媽|垃圾|雞巴|干*你媽/g;
val = val.replace( reg , '***' )//正則不會(huì)改變?cè)瓟?shù)據(jù)，所以要重新賦值
if( val ){
var oLi = document.createElement( 'li' );
oLi.innerHTML = val;
oUl.appendChild( oLi );
oTxt.value = '';
oTxt.blur();
}
}
</script>
Animation.gif
return函數(shù)
var reg = /操*你媽|垃圾|雞巴|干*你媽/g;
val = val.replace( reg , function ( ) {
console.log( arguments );
} ) //正則不會(huì)改變?cè)瓟?shù)據(jù)，所以要重新賦值
image.png
var reg = /(操)*你媽|垃圾|雞巴|干*你媽/g;
val = val.replace( reg , function ( ) {
console.log( arguments );
} ) //正則不會(huì)改變?cè)瓟?shù)據(jù)，所以要重新賦值
image.png
有幾個(gè)文字就有幾個(gè) * 號(hào)
<script>
var oWrap = document.getElementById( 'wrap' ),
oTxt = oWrap.children[0],
oBtn = oWrap.children[1],
oUl = oWrap.children[2];
oTxt.onkeydown = function ( e ) {
e = e || window.event;
e.keyCode === 13 && fn();
}
oBtn.onclick = fn;
function fn( ) {
var val = oTxt.value;
var reg = /操*你媽|垃圾|雞巴|干*你媽/g;
val = val.replace( reg , function ( ) {
var str = arguments[0];
var s = '';
for(var i=0 , length=str.length ; i<length ; i++ ){
s += '*';
}
return s;
} )
if( val ){
var oLi = document.createElement( 'li' );
oLi.innerHTML = val;
oUl.appendChild( oLi );
oTxt.value = '';
oTxt.blur();
}
}
</script>
Animation.gif
var reg = /操*你媽|垃圾|雞(\s,.)*巴|干*你媽/g; //雞\s*巴 匹配中間有空格
//.匹配除換行符 \n 之外的任何單字符。要匹配 . ，請(qǐng)使用 \. 。
Animation.gif
.匹配除換行符 \n 之外的任何單字符。要匹配 . ，請(qǐng)使用 . 。
如果有匹配所有 [/d/D]
var reg = /操*你媽|垃圾|雞(\s\.。)*巴|傻[\d\D]*逼|干*你媽/g;
val = val.replace( reg , function ( ) {
console.log( arguments )
var str = arguments[0];
var s = '';
for(var i=0 , length=str.length ; i<length ; i++ ){
s += '*';
}
return s;
} )
傻[\d\D]*逼 中間匹配所有字符 不合理
Animation.gif
var reg = /操*你媽|垃圾|雞[\s，]*巴|傻[\s\.。,，]*逼|干*你媽/g;
val = val.replace( reg , function ( ) {
console.log( arguments )
var str = arguments[0];
var s = '';
for(var i=0 , length=str.length ; i<length ; i++ ){
s += '*';
}
return s;
} )
Animation.gif
補(bǔ)充
\1
var str = 'aaaabbbbbccccdddddeeeeffffgggg';
var reg = /(\w)\1+/g;
console.log( str.match(reg) )
image.png
原理是：(\1 \2 \3 \4 ....\9 必須匹配的必須子集搭配)
開(kāi)始匹配時(shí)第一個(gè)a符合\w這里\1就鎖定匹配所有的a 相當(dāng)于/(a+)/g的規(guī)則
a都匹配完碰到b符合\w的 這里\1鎖定匹配所有的a 相當(dāng)于/b+/g的規(guī)則
var str = 'abbbbbbbb acccc';
var reg = /(\w)(\w)+/g;
console.log( str.match( reg ) )
image.png
\2就代表第二個(gè)子集匹配 (\w)\2
....
^不在[]里表示起始位置，匹配一個(gè)位置而不是一個(gè)字符
$結(jié)束位置，匹配的是一個(gè)位置而不是一個(gè)字符
案例：匹配是不是QQ號(hào)
<script>
/*
QQ號(hào)
非0開(kāi)關(guān)的數(shù)字
5到11位置
純數(shù)字
*/
var str = '12545',
reg = /^[1-9]\d{3,9}[0-9]$/; // ^表示必須以[1-9]數(shù)字開(kāi)頭 \d{3,9}中間取3到9 $必須以[0-9]
//也可以寫(xiě)成====》 /^[1-9]\d{4,10}$/ ^表示必須以[1-9]數(shù)字開(kāi)頭 \d{4,10}中間取4到10 $必須以\d結(jié)束
console.log( str.match( reg ) );
</script>
/^[1-9]\d{3,9}[0-9]$/ ^表示必須以[1-9]數(shù)字開(kāi)頭 \d{3,9}中間取3到9 $必須以[0-9]
/^[1-9]\d{4,10}$/ ^表示必須以[1-9]數(shù)字開(kāi)頭 \d{4,10}中間取4到10 $必須以\d結(jié)束
一些常用的正則規(guī)則
<script>
/*
QQ號(hào)
非0開(kāi)關(guān)的數(shù)字 5到11位置 純數(shù)字
手機(jī)號(hào)：
1開(kāi)頭 11位 純數(shù)字
用戶(hù)名：
字母開(kāi)關(guān)不區(qū)分大小寫(xiě) 6到16位
密碼：
~!@#$%^&*()+{}[]:"|',.?*-+/ 加上 \w
至少6位 最大16位
郵箱：
xxxxx@xxx.com
不能以0開(kāi)頭 _ 其他的\w 不區(qū)分大小寫(xiě)
身份證：
18位
不能以0開(kāi)頭
可能以x結(jié)束
*/
var str = '350212198812102532',
QQNum = /^[1-9]\d{4,10}$/, // ^表示必須以[1-9]數(shù)字開(kāi)關(guān) \d{3,9}中間取3到9 $必須以[0-9]
Tel = /^1[345678]\d{9}$/,
user = /^[a-z]\w{5,15}$/i,
psw = /^[~!@#$%^&*()+{}[\]:"|',.?*\-+/\w]{6,16}$/,
email = /^[1-9a-z]\w+@[0-9a-z\-]{2,}(\.[a-z]{2,}){1,2}$/i,
// 規(guī)定域名[a-z\-]{2,} 規(guī)定 .com \.[a-z]{2,} 可能是.com.cn (\.[a-z]{2,}){1,2}
IDCard = /^[1-9]\d{5}(19\d{2}|20[01][0-8])(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}[\dxX]$/;
//規(guī)定年 (19\d{2}|20[01][0-8]) 規(guī)定月(0[1-9]|1[012]) 規(guī)定日 (0[1-9]|[12][0-9]|3[01])
url : /^(http|https):\/\/[\S]*$/,
console.log( str.match( IDCard ) );
</script>
