javascript 正则案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript正则表达式</title>
<!--
注意因为正则只有非字符(没有非字符串),怎么办? 我们使用[\s\S]*?后面跟字符串起始字符来表达我们的需求
replace(testReg,"myWord") : 把 testReg匹配到的内容替换为myWord
正则以下字符有特殊意义: .^$\*?+()[]{}
预定义字符: \d, \D, \w, \W, \s, \S 等等
范围类: [a-z], [0-9] ...
边界字符: ^, $, \b(字符边界), \B(非字符边界)
注意全局匹配每次匹配后,脚标移动到匹配的后面,下次匹配会接着后面匹配.所以有个特殊现象,下面str10中有演示
注意.不会匹配回车换行,所以很少用点,而是用[\s\S]或[\w\W]来表示全部, [记住永远不要使用点这个玩意,要命]
懒惰(非贪婪)匹配会一致匹配到问号后面的字符为止,对提高性能有帮助
-->
<script type="text/javascript">
var str = "this is my friend"
// console.log(str.replace(/\bis\b/,"IS")) // \b表示字符边界
var str2 = "a1B2c3"
console.log(str2.replace(/[abc]/gi,"X")); // []表示one of(选择其1)
console.log(str2.replace(/[^abc]/gi,"X")); // ^表示取反
console.log(str2.replace(/[\d]/gi,"X")); // \d表示数字 \d\D\w\W\s\S.这些都是预定义字符,表示特殊意义
console.log(str2.replace(/[0-9]/gi,"X")); // 0-9,a-z,A-Z是范围类
var str3 = "@123@aga@"
console.log(str3.replace(/^@/, '牛')) //^@ 表示开头的@,字符串的首字符
console.log(str3.replace(/@$/, '牛')) //@$ 表示结尾的@,字符串的尾字符
var str4 = "http://www.baidu.com/1.jpg"
var str5 = "https://www.baidu.com/2.jpg"
var str6 = "http://www.baidu.com/2.png"
// 需求,把以http开头,且以.jpg结尾的协议头去掉
var reg = /^http:\/\/(.+\.jpg)$/
console.log(str4.replace(reg,'$1')) // 这里的 $1表示第一个()里的内容,注意需要使用引号
console.log(str5.replace(reg,'$1'))
console.log(str6.replace(reg,'$1'))
var str7 = '@123\r\n@456\r\n@789'
console.log(str7)
console.log(str7.replace(/^@/g, '圈'))
console.log(str7.replace(/^@/gm, '圈')) // m表示多行匹配,因为str7有换行符
console.log(/\d{3}/.test(str7)) //{数字} 表示出现的次数
console.log(/\d{4}/.test(str7))
console.log(/\d{2,14}/.test(str7)) //{a, b} 表示出现a到b次
console.log(/\d{5,14}/.test(str7))
console.log(/\d{2,}/.test(str7)) //{a,}缺b,表示出现a次以上
console.log(/\d{12,}/.test(str7))
var str8 = '@123442\r\n@4aga56\r\n@789gaga'
console.log('下面测试贪婪模式和非贪婪模式(贪婪模式默认,会匹配到最大次数) 注意与全局匹配g完全是不同概念')
console.log(str8.replace(/@\d{1,3}/gm, '花')) // 发现规律,它会以最多的次数匹配
console.log(str8.replace(/@\d{1,3}?/gm, '花')) // 在量词后面加? 非贪婪模式
var str9 = '1234567890'
console.log(str9.replace(/\d{3,6}?/g, 'x')) // 非贪婪匹配123,456,789, 最后剩下一个0
//注意量词作用与前面的那个字符,如果想要作用于多个字符,必须使用(),即分组
var str8 = "tom1tom2tom3tom4"
console.log(str8.replace(/(tom\d){2,3}/g, '2or3次'))
console.log(str8.replace(/tom1|tom2/g,'好'))
console.log('2018-11-23'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1')) // $1,$2,$3
console.log('2018-11-23'.replace(/(?:\d{4})-(\d{2})-(\d{2})/g,'$3')) //如果想忽略分组,需要在()中加上?:" 发现$3没有数据,$1,$2有数据
console.log('2018-11-23'.replace(/(?:\d{4})-(\d{2})-(\d{2})/g,'$2月$2日'))
//后顾(reg?=assert) 或(reg?!assert) 意思是先匹配reg,如果匹配的上,还看看它后面是否符合断言
var str9 = 'abc3abcdabc4'
console.log(str9.replace(/abc(?=\d)/g, 'X')) //结果X3abcdX4
console.log(str9.replace(/abc(?!\d)/g, 'X')) //结果abc3Xdabc4
var str10 = "Xabc4abc5abc"
var reg = /abc\d/g
console.log(reg.test(str10))
console.log(reg.test(str10))
console.log(reg.test(str10)) //发现前面两个是true,这个为false,原因是脚标lastIndex此时移动到abc5后面了,为了可以通过每次都重新生成reg来避免这种问题
console.log('重新生成正则表达式对象')
console.log(/abc\d/g.test(str10))
console.log(/abc\d/g.test(str10))
console.log(/abc\d/g.test(str10))
//search 返回匹配的index,忽略g
console.log(str10.search(reg))
//match 返回查到的结果
console.log(str10.match(/abc\d/)) //匹配到的结果文本以及index,group
console.log(str10.match(reg)) // 全局匹配只返回匹配到的结果数组,没有其他任何信息,分组也是无效的
//replace带函数的
console.log("啊,b,c,d".split(/,/))
//特殊要求,a0b1c2d3 -->a1b2c3d4 replace支持函数,function参数第一个为匹配的结果文本
const res = "a0b1c2d3".replace(/\d/g,function(match,index,origin){
return parseInt(match) + 1
})
console.log(res)
//下面是自由测试
var zsReg = /^\d+$/ //整数
var zzsReg = /^[1-9]\d*$/ //正整数
var fzsReg = /^-\d+$/ //负整数
var fdsReg = /^-?\d+(\.\d+)?$/ //浮点数
var zwReg = /^[\u4e00-\u9fa5]+$/ //中文
var emailReg = /^\w+@\w{1,10}\.com$/ //.com的邮箱
console.log(emailReg.test('1@163.com'))
var html = "<a href='www.baidu.com'>测试<a>"
var aTextReg = /<a[^>]+>([\s|\u4e00-\u9fa5]+)<a[\s]*>/ //中文不能用/w
console.log(html.match(aTextReg)[1]) //html.match(aTextReg)第1个元素为匹配到的文本,第二个为分组内容
</script>
</head>
<body >
<div id="myId">
<div style="float:right; width:500px; height: 1000px">
<div class="header">
这里头部div
<a href="http://www.qq.com">qq</a>
<a href="http://www.baidu.com">百度</a>
</div>
<div class="bottom">
这里是底部div
<span style="color:green;">
底部就底部
</span>
</div>
</div>
<script>
//alert(3)
</script>
<script type="text/javascript">
//alert(4)
</script>
</div>
</body>
<script type="text/javascript">
//演示过滤html和javascript,注意先过滤javascript
var html2 = document.getElementById("myId").innerHTML
//var scriptReg = /<script[^>]*>[^<]*<\/script[\s]*>/g
var scriptReg2 = /<script[\s\S]*>[\s\S]*<\/script[\s]*>/g //和注释掉的scriptReg效果相同
html2 = html2.replace(scriptReg2,'')
console.log(html2)
var htmlReg = /<[^>]+>/g
console.log(html2.replace(htmlReg,'').replace(/[\s]+/g,','))
//下面演示提取超级链接
var html3 = document.getElementById("myId").innerHTML
console.log(str8.replace(/@\d{1,3}?/gm, '花'))
var hrefReg = /href=\".+\"/g
var href = html3.match(hrefReg)
for (let i=0; i<href.length; i++) {
console.log(href[i].replace("href=\"", "").replace(/\"$/,""))
}
console.log("-------------")
</script>
</html>
无聊我就学英语
浙公网安备 33010602011771号