一：转义符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <!-- 1:转义字符 "\" 反斜杠会把自己后面跟的字符转义成文本 2:多行字符串 3:字符串换行符\n 4:缩进4个空格 \t --> <body> <script> var str="abcd\"edf"; console.log(str); var str1="abcd\\edf"; console.log(str1); var str2="abcd\nedf";//换行 console.log(str2); var str3="abcd\tedf"; console.log(str3); </script> </body> </html>系统规定字符串不能多行显示：
这样写直接报错
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> document.body.innerHTML=" <div></div> <span>123</span>"; </script> </body> </html>正确写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> document.body.innerHTML="<div></div><span>123</span>"; </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //方法一： //每行结束加个转义字符，会将后面文本形式的回车转义掉，不再是回车 document.body.innerHTML="\ <div></div>\ <span>123</span>\ "; //方法二：字符串连接，比较low document.body.innerHTML= " <div></div>"+ "<span>123</span>"; </script> </body> </html>
二：正则表达式 RegExp
1:正则表达式的作用：匹配特殊字符或有特殊搭配原则的字符的最佳选择
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 检验是否符合规则 --> email:<input type="text" value=""> <script> </script> </body> </html>
三：RegExp两种创建方式
1:直接量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //正则表达式创建方式 var reg=/abc/; //代表匹配字符串的规则是abc,测验表达式是否有自己规定的片段,这个字符串必须有abc,且是小写，并且要挨着 var str="abcd"; var str1="abec"; //正则表达式的属性 属性可单独 也可以写在一起，例如：var reg=/abcd/im; var reg=/abcd/i;//ignoreCase忽视大小写 var str2="ABCd";//成立 </script> </body> </html>
2：new RegExp();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //括号里第一参数里写规则 第二个参数写属性 var str="abcd"; var reg=new RegExp("abcd","i"); </script> </body> </html>推荐使用直接量
正则表达式的属性：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //三个属性 i忽视大小写 g全局匹配 m执行多行匹配 //g全局匹配实例 查找所有匹配，而非在找到第一个匹配后结束 //str.match方法是截取匹配合适的字符串片段 var reg = /ab/g; var str = "abababababab"; //^第一个 即使有全局匹配，但是^代表匹配第一个 var reg=/^a/g; var str1="abcdea"; var str2="abcde\na";//加换行符也还是只要一个a //m多行匹配 换行匹配 上述例子加上多行匹配之后，就是两个a了 var reg = /^a/gm; var str3 = "abcde\na"; </script> </body> </html>
reg.test();只判断是否匹配
str.match();把匹配的选出来
四：表达式
如何实现前面三位是数字，但不是固定的数字，是数字就行
一个[]代表一位 里面填的就是取值区间
例一：
var reg=/[1234567890][1234567890][1234567890]/; var str="1230u98723zpoicuyoiodfjh"
例二：
var reg=/[ab][cd][d]/; var str1="abcd";
例三：
//简便写法 var reg=/[0-9A-z]/;//从0-9，A-Z和a-z A的ASCII码是65 按照ASCII码排的非，或用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //^有两种用法 //放在表达式里面代表非 var reg=/[^a][^b]/g;//第一位不是a 第二位不是b var str="ab1cd"; //或 要拿小括号写 var reg=/(abc|bcd)[0-9]/g; </script> </body> </html>
五：元字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> // world \w===[0-9A-z_] 完全等于0-9 A-Z a-z 下划线 // \W===非w var reg = /\wcd2/g; var str = "b*cd2"; // \d===[0-9] // \D===非d var reg = /\d\d\d/; var str = "123"; //表达式里也可以写元字符 var reg = /[\w\d]/; // \s 空白字符 例如：空格，制表符，回车等等 // \S 非s // \b===单词边界 // \B===非单词边界 var str="abc ced fgh";//比如ac cd fh这六个就是单词边界 var reg=/\bcde/g;//c是单词边界 var reg=/\bcde\B/g; var str="abc cdesfgh"; //unicode编码 可以匹配汉字 汉字转换成unicode编码 var reg=/\u006a\u0073\u771f\u96be/; var str="js真难"; //汉字也可以有范围 unicode编码也可以写区间 var reg=/[\u3000-\ua000]/; var str="js真难"; // .===匹配一切 //以...结尾 var reg=/ed$/g;//连着e,以d结尾 var str="abcded"; //检验一个字符串首尾是否含有数字(首或尾) var reg=/^\d|\d$/;//首或尾 var str="123"; //检验首和尾是否都含有数字 var reg=/^\d[\s\S]*\d$/g;//[\s\S]*区间拉伸，区间含有的0-多个 var str="123abc123"; </script> </body> </html>
六：量词
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //n+ n可以出现1-无数次 //n* n 可以出现0-无数次 var reg=/\d*/g;//可以出现0-无数次 var str="abc"; var str1=str.match(reg);console.log(str1);//Array(4) [ "", "", "", "" ],因为都识别为空，所以就匹配到光标移动位，都是空 var reg=/\w+/g; var str="aaaaaaaa";//结果没有空，因为有匹配结果，正则表达式遵循贪婪匹配原则，能多则不少 //n? 0-1 var reg=/\w?/g; var str="aaaaaaaa"; //n{X} {x}个 var reg=/\w{3}/g;//每三个匹配 var str="aaaaaaa"; //n{x,y} {x,y} var reg=/\w{3,5}/g; var str="aaaaaaaaaaaaaaaaa"; //n{x,正无穷} var reg=/\w{2,}/g; var str="aaaaa"; </script> </body> </html>
七：RegExp对象方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> // exec reg.exec(); var reg=/ab/g;//加了g会一直匹配下去 var str="abababab"; console.log(reg.exec(str));//index代表匹配的位置 游标位置 console.log(reg.lastIndex);//游标位置通过找游标位置来进行匹配 console.log(reg.exec(str)); console.log(reg.exec(str)); //匹配4个连续一样的 var str="aaaabbbb"; var reg=/(\w)\1\1\1/g;//括号也是子表达式，括号会记住里面匹配的内容 \1是引用第一个子表达式匹配的内容 //匹配aabb的形式 var str="aabb"; var reg=/(\w)\1(\w)\2/g; </script> </body> </html>
八：支持正则表达式的String对象的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> //match匹配出符合正则表达式的字符 //search 返回匹配到的位置 匹配不到返回-1 var str = "edbaabb"; var reg = /(\w)\1(\w)\2/g; console.log(str.search(reg)); //replace 替换 var str = "aa"; console.log(str.replace("a", "b")) //ba,只换了第一个，用正则表达式并写上g就能全部替换 //把aabb的字符串都倒过来，变成bbaa var reg = /(\w)\1(\w)\2/g; var str = "aabb"; console.log(str.replace(reg, "$2$2$1$1")); //一个$代表一个子表达式 // var reg=/(\w)\1(\w)\2/g; var str = "aabb"; console.log(str.replace(reg, function ($, $1, $2) { //传参 第一个参数传的是正则表达式的结果，第二个参数是第一个子表达式匹配的内容，第三个参数是第二个子表达式匹配的内容,符号都可以，自己定 return $2 + $2 + $1 + $1 + $1 + "abc"; })); //如何将the-first-name变成theFirstName var reg=/-\w/g;//-f -g匹配到 var str="the-first-name"; console.log(str.replace(reg,function($,$1){//reg找了两次，function运行两次 return $1.toUpperCase(); })); //正向预查，正向断言 匹配任何其后紧接指定字符串n的字符串 var str="abaaaaa"; var reg=/a(?=b)/g;//匹配后面跟着b的a //非 匹配任何其后不紧接指定字符串n的字符串 var str="abaaaaa"; var reg=/a(?!b)/g; //去重 var str="aaaaaaaaabbbbcccc"; var reg=/(\w)\1*/g;//1*后向引用1个或者多个 console.log(str.replace(reg,"$1")); </script> </body> </html>
匹配符号：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> var str="aa?aaaa"; var reg=/\?/g; var str="aa//aaaa"; var reg=/\//g; </script> </body> </html>
1832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
