作为程序员一定要保持良好的睡眠，才能好编程

  2. 首页
  3. Javascript

javascript如何正确的使用正则表达式

发布时间：2020-05-02

正则表达式如何使用？


1、如何声明一个正则表达式？


//声明正则表达式有两种方式：

//第一种：
var pattern=/[0-9]+/ig; //这样就声明了一个正则表达式

//第二种：
var pattern=new RegExp([0-9]+,"ig");

//以上就是两种创建的方法


2、如何去使用呢？


正则表达式的几种方法

pattern.test()    返回是否匹配成功

pattern.exec()  返回匹配成功后的这个数组

  

构造函数
1.new创建正则表达式

new RegExp(pattern, attributes)

2.直接量语法

/pattern/attributes
例如：
pattern=/[0-9]+/ig



配置参数

i 不区分大小写
g 全部匹配
m 匹配换行


 i  不区分大小写的匹配
 s  匹配任意字符,包括换行符在内
 U  表示非贪婪

 ?  表示0个或1个
 +  表示1个或多个
 *  表示0个或多个


\d 任意一个数字 [0-9]
\D 任意一个除了数字之外的字符 [^0-9]
\s 任意一个空间字符，空格，\r \n \t\f [\r\n\t\f ]
\S 任意非空白 [^\r\n\t\f ]
\w 任意一个字a-z A-Z 0-9 _ [a-zA-Z0-9_]
\W 任意一个非字 [^a-zA-Z0-9_]

{n}  n 是一个非负整数。匹配确定的 n 次。例如，'o{2}' 不能匹配 "Bob" 中的 'o'，但是能匹配 "food" 中的两个 o。
{n,}  n 是一个非负整数。至少匹配n 次。例如，'o{2,}' 不能匹配 "Bob" 中的 'o'，但能匹配 "foooood" 中的所有 o。'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。
{n,m}  m 和 n 均为非负整数，其中n <= m。最少匹配 n 次且最多匹配 m 次。例如，"o{1,3}" 将匹配 "fooooood" 中的前三个 o。'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。


var dataType={
   "any":/[\w\W]+/,     //任何数据
   "any6-16":/^[\w\W]{6,16}$/,  //6-16位的任何数据
   "n":/^\d+$/, //数字类型
   "n6-16":/^\d{6,16}$/, //数字类型 6-16位
   "s":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]+$/,   
   "s6-18":/^[\u4E00-\u9FA5\uf900-\ufa2d\w\.\s]{6,18}$/,
   "p":/^[0-9]{6}$/,//post 邮政编码
   "m":/^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}$/, //手机
   "e":/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,  //邮箱
   "url":/^(\w+:\/\/)?\w+(\.\w+)+.*$/   //url验证
}
var tipmsg={//默认提示文字;
  tit:"提示信息",
  w:{
   "*":"不能为空！",
   "*6-16":"请填写6到16位任意字符！",
   "n":"请填写数字！",
   "n6-16":"请填写6到16位数字！",
   "s":"不能输入特殊字符！",
   "s6-18":"请填写6到18位字符！",
   "p":"请填写邮政编码！",
   "m":"请填写手机号码！",
   "e":"邮箱地址格式不对！",
   "url":"请填写网址！"
  },
  def:"请填写正确信息！",
  undef:"datatype未定义！",
  reck:"两次输入的内容不一致！",
  r:"通过信息验证！",
  c:"正在检测信息…",
  s:"请{填写|选择}{0|信息}！",
  v:"所填信息没有经过验证，请稍后…",
  p:"正在提交数据…"
 }
 //使用方法：
 alert(dataType.s.test("中国"));

 







image.png



正则表达式的写法：

字面写法

image.png

正则表达式-对象写法

image.png




正则表达式示例代码：

let str = 'song';
let div = document.querySelector('div');

console.log(str.replace('s','S'));  //Song
console.log(str.replace(/\w/,'S')); //Song
console.log(str.replace(/\w/g,'S'));//SSSS
console.log(str.replace(/\w/g,search=>{
    console.log(search);
}));


image.png



匹配到的每一个字符都会去替换


let str = 'song';
let div = document.querySelector('div');

console.log(str.replace('s','S'));  //Song
console.log(str.replace(/\w/,'S')); //Song
console.log(str.replace(/\w/g,'S'));//SSSS
console.log(str.replace(/\w/g,search=>{
    return "哈哈"
}));

image.png




小案例

通过正则表达式将搜索的内容变成红色


image.png

image.png

image.png


代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码高亮显示</title>
</head>
<body>

<div class="content">
    xiaosongit.com
</div>

<script>


    let con = prompt("请输入要高亮的内容 支持正则表达式");
    console.log(con);

    let reg = new RegExp(con,'g');
    let div = document.querySelector('div');
    div.innerHTML = div.innerHTML.replace(reg, search => {
        return `<span style="color:red">${search}</span>`;
    });

</script>

</body>
</html>




边界符号


^ $


小案例


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>代码高亮显示</title>
</head>
<body>

<input name="username"/>
<span id="result"></span>


<script>

    // let input = document.querySelector('input[name="username"]').addEventListener("keyup", function () {
    //     console.log(this.value);
    // });

    let input = document.querySelector('input[name="username"]').addEventListener("keyup", function () {

        let flag = this.value.match(/^[\w]{3,6}$/i);
        if (flag) {
            document.querySelector('span#result').innerHTML = "成功";
        } else {
            // if(this.value.length>=3){
            //     document.querySelector('span#result').innerHTML="失败";
            // }
            document.querySelector('span#result').innerHTML = "失败";
        }


    });
</script>

</body>
</html>


image.png

image.png

image.png

image.png

image.png

image.png




匹配到空白


\s

匹配到空白，才返回真
console.log(/\s/.test("\nxiasong"));  //true
console.log(/\s/.test("xiaosong"));   //false


匹配里面的中文


image.png

/[^-\d:,]+/g 除了中括号里面的值，都要

image.png


其实中文是 4e00-9fa5

正则表达式为 /[u4e00-u9fa5]+/g

image.png



小案例 邮箱匹配

<script>

    let email1 = "574482856@qq.com";
    let email2 = "songjiabing@163.com";
    let email3 = "syz@126.com.cn";
    let email4 = "syz@126.";
    let email5 = "sysdf";

    let pattern = /^[\w_-]+@[\w]+\.[\w\.]+$/;

    console.log(pattern.test(email1));
    console.log(pattern.test(email2));
    console.log(pattern.test(email3));
    console.log(pattern.test(email4));
    console.log(pattern.test(email5));

</script>

image.png




点  \d \w .    包含除了换行符所有的字符


匹配模式 m  视为单行匹配


匹配任何字符  /[\d\D]+/       或者 [\s\S]   [\w\W]  匹配强度比 . 更加强大



模式修正符


image.png


g 全局匹配

i 不区分大小写

m 视为单行匹配


image.png



字符串的 replace 可以完成替换



image.png


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行匹配</title>
</head>
<body>

<input name="username"/>
<span id="result"></span>


<script>
    let str=`

    #1 js,200元 #
    #2 php,300元 #
    #3 python,300元 # python课程
    #4 node.js,180元 #

    `;

    //要求 找到字符中以 # 结尾的所有课程

    let pattern = /^\s*\#\d+\s+.+\s*\#$/gim;
    str.match(pattern).map(val=>{
        val = val.replace(/\s*#|#/g,"");
        console.log(val)
    });

</script>

</body>
</html>





排除匹配


let str="xiaosongit.com";

console.log(str.match(/[ao]/gi));  //查找到a o 里面的任何一项都返回  ["a", "o", "o", "o"]
console.log(str.match(/[^ao]/gi));  //查找到 除了 a o 里面的任何一项都返回 ["x", "i", "s", "n", "g", "i", "t", ".", "c", "m"]


let strHan="xiaosongit.com是一个博客站。"; //是一个博客站

console.log(strHan.match(/\p{sc=Han}+/gu));



原子组认识



image.png

let str = `
<h1>xiaosongit.com</h1>
<h2>小站</h2>
`;
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
console.log(str.replace(reg, `<p>$2</p>`));


    <p>xiaosongit.com</p>
    <p>小站</p>


image.png



批量替换

let str = `
<h1>xiaosongit.com</h1>
<h2>小站</h2>
`;
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
console.log(str.replace(reg, `<p>$2</p>`));

结果：
<p>xiaosongit.com</p>
<p>小站</p>



//正则 需要仔细，需要理解透彻 才能写出最规范的代码


let str = `
<h1>xiaosongit.com</h1>
<h2>小站</h2>
`;
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
let data = [];

while(res = reg.exec(str)){
    data.push(res);
}
console.log(data);

image.png


let str = `
<h1>xiaosongit.com</h1>
<h2>小站</h2>
`;
//拿到 h1=>xiaosongit.com h2=>小站
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
let data = [];

while(res = reg.exec(str)){
    data.push({"name":res[1],"value":res[2]});
}
console.log(data);


image.png




let str = `
<h1>xiaosongit.com</h1>
<h2>小站</h2>
`;
//拿到 h1=>xiaosongit.com h2=>小站
let reg = /<(h[1-6])>([\s\S]+)<\/\1>/gi;
let data = [];

while(res = reg.exec(str)){
    data.push({"name":res[1],"value":res[2]});
}
console.log(data);
console.log(JSON.stringify(data,null,2));


image.png




忽略原子组记录

?: 不记录到原子组中


let str = `
    http://www.xiaosongit.com
    https://admin.xiaosongit.com
    https://api.xiaosongit.com
`;
//匹配到里面所有的域名  除去http 和https 例如 www.xiaosongit.com  api.xiaosongit.com
let reg = /https?:\/\/(([\w]+)\.([\w]+)\.(com|org|cn|com.cn))/gis;
let data = [];
let res;
while(res =reg.exec(str)){
    console.log(res);
    data.push(res[1]);
}

console.dir(data);


image.png


现在我不想要 2/3/4 这里的数据，应该怎么去掉呢？


两种解决办法：

1、使用 ?: 的办法

let str = `
    http://www.xiaosongit.com
    https://admin.xiaosongit.com
    https://api.xiaosongit.com
`;
//匹配到里面所有的域名  除去http 和https 例如 www.xiaosongit.com  api.xiaosongit.com
let reg = /https?:\/\/(([\w]+)\.(?:[\w]+)\.(?:com|org|cn|com.cn))/gis;
let data = [];
let res;
while(res =reg.exec(str)){
    console.log(res);
    data.push(res[1]);
}

console.dir(data);

image.png


image.png


2、无用的匹配 可以不用括号包裹

let str = `
    http://www.xiaosongit.com
    https://admin.xiaosongit.com
    https://api.xiaosongit.com
`;
//匹配到里面所有的域名  除去http 和https 例如 www.xiaosongit.com  api.xiaosongit.com
// let reg = /https?:\/\/((?:[\w]+)\.(?:[\w]+)\.(?:com|org|cn|com.cn))/gis;
let reg = /https?:\/\/([\w]+\.[\w]+\.com|org|cn|com.cn)/gis;
let data = [];
let res;
while(res =reg.exec(str)){
    console.log(res);
    data.push(res[1]);
}

console.dir(data);

image.png




贪婪模式


? 0个或1个

{}



用户名验证


image.png




多个正则作用在一个事件上

image.png



禁止贪婪


？往少的一方面获取  不让它贪婪


let str="passsssssssssss"

/pas*?/ig


小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高亮显示</title>
</head>
<body>
<span>http://www.xiaosongit.com</span>
<span>https://admin.xiaosongit.com</span>
<span>https://api.xiaosongit.com</span>
</body>

<script>
    //1.将body中的span标签替换成h2
    //2.将h2中的内容改成红色
    //3.在原有标签中添加一个 `正则替换`
    const content = document.querySelector('body');
    let reg = /<span>([\s\S]+?)<\/span>/gi; // ?是取消贪婪模式重要的标志，不能删除
    content.innerHTML = content.innerHTML.replace(reg, (v, p1) => {
       return "<h2 style='color:red;'>正则替换 "+p1+"</h2>";
    });

</script>
</html>


image.png


image.png





全局匹配


image.png




match  search  



正则替换


$& 匹配到的值


$1 第一个括号中的值


$2


$`  匹配内容的前面


$' 匹配内容后面的内容



小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示</title>
</head>
<body>
<span>在线教育是一种高效的学习方式，大家都很喜欢在线教育</span>

</body>
<script>
    //要求 将span中的教育 加上一个连接
    let span = document.querySelector('span');
    let reg =/教育/g;
    span.innerHTML= span.innerHTML.replace(reg,`<a href='http://www.xiaosongit.com'>$&</a>`);
</script>
</html>



image.png









image.png



给原子组起一个别名    ?<con>  这就是给原子组起的名字  

image.png






给原子组起名小案例

<body>

    <a id="id" href="www.xiaosongit.com">小宋程序站点</a>
    <a style="" id" href="http://www.sina.com">新浪</a>
    <a href="http://www.163.com">网易</a>

</body>

image.png




断言



?<= 断言标识符


let reg = /(?<=\d{7})\d{4}/gi


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码高亮显示</title>
</head>
<body>
<span>13818612345</span>

</body>
<script>

    let span = document.querySelector('span');

    let reg = /(?<=\d{7})\d{4}/ig;

    span.innerHTML = span.innerHTML.replace(reg,v=>{
        console.log(v);
        return "*".repeat(4);
    });



</script>
</html>

image.png



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>显示</title>
</head>
<body>
<span>13818612345</span>

</body>
<script>

    let span = document.querySelector('span');

    let reg = /(?<=\d{7})\d{4}/ig;

    //这样的写法也是可以的
    span.innerHTML = span.innerHTML.replace(reg,function(v){
        console.log(v);
        return "*".repeat(4);
    });
    
    
    // span.innerHTML = span.innerHTML.replace(reg,v=>{
    //     console.log(v);
    //     return "*".repeat(4);
    // });



</script>
</html>


image.png



image.png

image.png


这样的写法也能满足。






















更多>> Javascript