JavaScript基础 正则表达式 replace
2018-03-13 本文已影响0人
0说
字符串.replace( 正则 , 替换的内容)
将匹配到的内容替换
替换的内容可以是字符串，也可以是带return的函数
<script>
var str = '今天我很高兴因为我涨了10元的工资了';
console.log( str.replace( '10' , '1000' ) ) //匹配规则可以放在（）的第一位
</script>
image.png
<script>
var str = '今天我很高兴因为我涨了10元的工资了,我现在的工资是1010';
var reg = /\w+/g;
console.log( str.replace( reg , '1000' ) )
</script>
image.png
经典案例：
把明天 和 您好 对换
var str = '明天 您好'
var reg = /(明天)\s(您好)/g;
console.log( str.replace( reg , '$2 $1') )
/(明天)\s(您好)/g // \s规定有空格 整体就是匹配到上面str
$1 $2 对应上面的子集
把 $1 各 $2对换 就是上面子集对换
案例：脏话过虑
<div id="wrap">
<input class="txt" type="text" placeholder="请输入文字">
<input class="btn" type="button" value="发表">
<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 , '***' )//正则不会改变原数据，所以要重新赋值
if( val ){
var oLi = document.createElement( 'li' );
oLi.innerHTML = val;
oUl.appendChild( oLi );
oTxt.value = '';
oTxt.blur();
}
}
</script>
Animation.gif
return函数
var reg = /操*你妈|垃圾|鸡巴|干*你妈/g;
val = val.replace( reg , function ( ) {
console.log( arguments );
} ) //正则不会改变原数据，所以要重新赋值
image.png
var reg = /(操)*你妈|垃圾|鸡巴|干*你妈/g;
val = val.replace( reg , function ( ) {
console.log( arguments );
} ) //正则不会改变原数据，所以要重新赋值
image.png
有几个文字就有几个 * 号
<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 之外的任何单字符。要匹配 . ，请使用 \. 。
Animation.gif
.匹配除换行符 \n 之外的任何单字符。要匹配 . ，请使用 . 。
如果有匹配所有 [/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
补充
\1
var str = 'aaaabbbbbccccdddddeeeeffffgggg';
var reg = /(\w)\1+/g;
console.log( str.match(reg) )
image.png
原理是：(\1 \2 \3 \4 ....\9 必须匹配的必须子集搭配)
开始匹配时第一个a符合\w这里\1就锁定匹配所有的a 相当于/(a+)/g的规则
a都匹配完碰到b符合\w的 这里\1锁定匹配所有的a 相当于/b+/g的规则
var str = 'abbbbbbbb acccc';
var reg = /(\w)(\w)+/g;
console.log( str.match( reg ) )
image.png
\2就代表第二个子集匹配 (\w)\2
....
^不在[]里表示起始位置，匹配一个位置而不是一个字符
$结束位置，匹配的是一个位置而不是一个字符
案例：匹配是不是QQ号
<script>
/*
QQ号
非0开关的数字
5到11位置
纯数字
*/
var str = '12545',
reg = /^[1-9]\d{3,9}[0-9]$/; // ^表示必须以[1-9]数字开头 \d{3,9}中间取3到9 $必须以[0-9]
//也可以写成====》 /^[1-9]\d{4,10}$/ ^表示必须以[1-9]数字开头 \d{4,10}中间取4到10 $必须以\d结束
console.log( str.match( reg ) );
</script>
/^[1-9]\d{3,9}[0-9]$/ ^表示必须以[1-9]数字开头 \d{3,9}中间取3到9 $必须以[0-9]
/^[1-9]\d{4,10}$/ ^表示必须以[1-9]数字开头 \d{4,10}中间取4到10 $必须以\d结束
一些常用的正则规则
<script>
/*
QQ号
非0开关的数字 5到11位置 纯数字
手机号：
1开头 11位 纯数字
用户名：
字母开关不区分大小写 6到16位
密码：
~!@#$%^&*()+{}[]:"|',.?*-+/ 加上 \w
至少6位 最大16位
邮箱：
xxxxx@xxx.com
不能以0开头 _ 其他的\w 不区分大小写
身份证：
18位
不能以0开头
可能以x结束
*/
var str = '350212198812102532',
QQNum = /^[1-9]\d{4,10}$/, // ^表示必须以[1-9]数字开关 \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,
// 规定域名[a-z\-]{2,} 规定 .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]$/;
//规定年 (19\d{2}|20[01][0-8]) 规定月(0[1-9]|1[012]) 规定日 (0[1-9]|[12][0-9]|3[01])
url : /^(http|https):\/\/[\S]*$/,
console.log( str.match( IDCard ) );
</script>
