项目：正则表达式测试工具

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目：正则表达式测试工具</title>
    <style type="text/css">
        #regexp{
            width: 650px;
            margin: 100px auto;
            font-size: 14px;
        }
        .title{
            color: #777;
            font-size: 24px;
            text-align: center;
        }
        .textbox{
            width: 638px;
            height: 150px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 5px;
            resize: none;
        }
        #matchingBtn{
            border-radius: 5px;
            color: white;
            background-color: #1E90FF;
            padding: 2px 5px;
            cursor: pointer;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="regexp">
        <h1 class="title">正则表达式测试工具</h1>
        <textarea id="userText" class="textbox" placeholder="在此处输入待匹配的文字"></textarea>
        <p>
            正则表达式：
            <input type="text" id="userRegExp" class="textfield" placeholder="在此处输入正则表达式">
            <label><input type="checkbox" name="userModifier" value="i">忽略大小写</label>
            <label><input type="checkbox" name="userModifier" value="g">全局匹配</label>
            <label><input type="checkbox" name="userModifier" value="m">多行匹配</label>
            <input type="button" id="matchingBtn" value="测试匹配">
        </p>
        匹配结果：
        <textarea id="matchingResult" class="textbox" disabled="disabled"></textarea>
    </div>
</body>
<script type="text/javascript">
    // 此处定义全局变量
    var userText = document.getElementById('userText'),
        userRegExp = document.getElementById('userRegExp'),
        userModifier = document.getElementsByName('userModifier'),
        matchingBtn = document.getElementById('matchingBtn'),
        matchingResult = document.getElementById('matchingResult');
    var pattern,
        modifier = '';
    // 设置复选框点击操作
    for(var i=0;i<userModifier.length;i++){
        userModifier[i].onclick = function(){
            // 每次点击之前清空上次的干扰数据
            modifier='';
            for(var j=0;j<userModifier.length;j++){
                if (userModifier[j].checked) {
                    // 用字符串拼接把value连起来
                    modifier += userModifier[j].value;
                }
            }
        }
    }
    // 设置按钮点击事件
    matchingBtn.onclick = function(){
        // 判断文本框是否为空
        if (!userText.value) {
            alert('请输入待匹配文本！');
            userText.focus();
            return;
        }
        // 判断正则表达式是否为空
        if (!userRegExp.value) {
            alert('请输入正则表达式！');
            userRegExp.focus();
            return;
        }
        // 创建正则表达式
        pattern = new RegExp(userRegExp.value);
        matchingResult.value = pattern.exec(userText.value) || '没有匹配';
    }
</script>
</html>

review0608

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
</head>
<body>

</body>
<script type="text/javascript">
    // 基础部分
    var str = 'i love js';
    var userInput = 'love';
    var pattern = new RegExp(userInput,'i');
    console.log(pattern);
    console.log(typeof pattern);
    console.log(pattern.exec(str));

    // 进阶部分
    var str = '//我是注释';
    var pattern = /\/\//;
    console.log(str);
    console.log(pattern.exec(str));

    var str = '\\\\';
    var pattern = /\\\\/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'nba';
    var pattern = /n/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = '1.html\n2.css\n3.js';
    var pattern = /\n/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = '    js';
    var pattern = /\t/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'a\nb';
    var pattern = /\x61\x0a\x62/;// ASCII表中0a表示换行
    console.log(str);
    console.log(pattern.exec(str));

    var str = '    js';
    var pattern = /\u0009/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'Alex哈';
    var pattern = /哈/;// \u4e00-\u9fa5 表示中文范围
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'JavaScript';
    var pattern = /JS/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'JavaScript';
    var pattern = /[^JS]/;// 表示除了JS以外得
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'JavaScript';
    var pattern = /[c-d]/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'Alex哈';
    var pattern = /[\u4e00-\u9fa5]/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'JavaScript';
    var pattern = /[a-zA-Z0-9]/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = '\n';
    var pattern = /./;
    console.log(str);
    console.log(pattern.exec(str));// null

    // /[a-zA-Z0-9_]/ == /\w/
    // /[^a-zA-Z0-9_]/ == /\W/
    // /[0-9]/ == /\d/
    // /[^0-9]/ == /\D/
    // \s 制表符

    // ?  {0,1}  最多出现一次
    // +  {1,}  至少出现一次
    // *  {0,}  可有可无

    var str = '肯德基豪华午餐：￥15.5！';
    var pattern = /\d+\.?\d*/;
    console.log(str);
    console.log(pattern.exec(str));

    // 贪婪模式
    var str = 'aaab';
    var pattern = /a+/;
    console.log(str);
    console.log(pattern.exec(str));

    // 非贪婪模式 ?
    var str = 'aaab';
    var pattern = /a+?/;
    console.log(str);
    console.log(pattern.exec(str));

    // 这种情况 不再满足非贪婪模式
    var str = 'aaab';
    var pattern = /a+?b/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = '<td>a</td><td>b</td>';
    var pattern = /<td>.*<\/td>/; // 贪婪
    console.log(str);
    console.log(pattern.exec(str));

    var str = '<td>a</td><td>b</td>';
    var pattern = /<td>.*?<\/td>/; // 非贪婪
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'html js';
    var pattern = /html|css|js/;
    console.log(str);
    console.log(pattern.exec(str));

    var str = 'c java c++ html';
    var pattern = /java|c\+\+|c|html/;
    console.log(str);
    console.log(pattern.exec(str));
</script>
</html>

review0609

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式进阶2</title>
</head>
<body>

</body>
    <script type="text/javascript">
        // 正则表达式的选择，分组 引用 选择
        // /html|css|js/
        var str = 'css html js';
        var pattern=/html|css|js/;
        console.log(pattern.exec(str));

        var str = 'ab';
        var pattern=/a|ab/;
        console.log(pattern.exec(str));

        // 分组
        var str = 'abab';
        var pattern=/ab+/;
        console.log(pattern.exec(str));

        var str = 'abab';
        var pattern=/(ab)+/;
        console.log(pattern.exec(str));

        var str = 'abcd';
        var pattern=/(ab)c/;
        console.log(pattern.exec(str));//2个
        //第一个参数ab是一个分组  然后单独c  合起来   abc
        //第二个参数ab在括号中   所以也是一个单独的分组会被捕获

        var str = 'abcd';
        var pattern=/(?:ab)c/;//此时是非捕获状态
        console.log(pattern.exec(str));

        //平行括号
        var str = 'abcd';
        var pattern=/(ab)(c)/;
        console.log(pattern.exec(str));

        //嵌套括号
        var str = 'abcd';
        var pattern=/(a(b(c)))/;
        console.log(pattern.exec(str));

        //\1表示第一个分组  (ab)
        var str = 'ab cd ab';
        var pattern=/(ab) cd \1/;
        console.log(pattern.exec(str));

        var str = '<p><a>这是一段文字</a></p>';
        var pattern=/<([a-zA-Z]+)>(.*?)<\/\1>/;
        console.log(pattern.exec(str));

        //定位匹配;  ^  $
        var str = 'html js';
        var pattern=/^js/;
        console.log(pattern.exec(str));

        //尾匹配
        var str = 'html js css';
        var pattern=/js$/;
        console.log(pattern.exec(str));

        var str = '110119120';
        var pattern=/^\d+$/;
        console.log(pattern.exec(str));
        if (pattern.test(str)) {
            console.log('全是数字！');
        } else {
            console.log('不全是数字！');
        }

        var str = '11011912a0';
        var pattern=/\D/;
        console.log(pattern.exec(str));
        if (pattern.test(str)) {
            console.log('不全是数字！');
        } else {
            console.log('全是数字！');
        }

        // \b表示匹配的是单词的边界
        var str = 'js html';
        var pattern=/js\b/;
        console.log(pattern.exec(str));

        var str = '@@@js@@@';
        var pattern=/\bjs\b/;
        console.log(pattern.exec(str));

        //前瞻性匹配  ？=
        var str = 'javascript';
        var pattern=/java(?=script)/;
        console.log(pattern.exec(str));//java

        //负向前瞻性  ？！
        var str = 'javascript';
        var pattern=/java(?!script)/;
        console.log(pattern.exec(str));//null

        var str = 'javas';
        var pattern=/java(?!script)/;
        console.log(pattern.exec(str));//java

        // RegExp对象
        console.log(new RegExp('\\b'));
        // /\\/  --- >  匹配一个反斜杠
        console.log(new RegExp('\\\\'));

        //RegExp实例
        //不管是字面量方式还是构造函数方式
        //pattern都是正则的实例对象
        //实例对象上的方法叫做实例方法
        var pattern=/js/;
        var pattern=new RegExp('js');

        var str='jsjsjs';
        var pattern=/js/g;
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));

        var str = 'js js js';
        var pattern=/(j)s/g;
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));
        console.log(pattern.exec(str));

        var str='1.js 2.js 3.js';
        var pattern=/js/g;
        var total=0,
            match='',
            result;//接收exec匹配的数组
        while((result = pattern.exec(str))!=null){
            total++;
            match+='第'+total+'个匹配到的是：'+result[0]+',它的位置是：'+result.index+'\n';
        }
        match+='共找到：'+total+'处匹配\n';
        console.log(str);
        console.log(match);

        var str = 'js js js';
        var pattern=/js/g;
        console.log(pattern.test(str));
        console.log(pattern.test(str));
        console.log(pattern.test(str));
        console.log(pattern.test(str));
        console.log(pattern.test(str));

        var pattern=new RegExp('a\\nb');
        //toString是从Object继承过来的
        console.log(pattern.toString());
        //toLocaleString是从Object继承过来的
        console.log(pattern.toLocaleString());
        //valueof返回正则表达式本身
        console.log(pattern.valueOf()===pattern);

        // RegExp实例属性
        var str='js js js';
        var pattern = new RegExp('\\b','i');
        console.log(pattern.ignoreCase);
        console.log(pattern.global);
        console.log(pattern.multiline);
        //输出正则表达的字面量形式
        console.log(pattern.source);

        var str='js js js';
        var pattern = /js/g;
        console.log(pattern.lastIndex);
        pattern.test(str);
        console.log(pattern.lastIndex);
        pattern.test(str);
        console.log(pattern.lastIndex);
        pattern.test(str);
        console.log(pattern.lastIndex);
        pattern.test(str);
        console.log(pattern.lastIndex);
        pattern.test(str);
        console.log(pattern.lastIndex);
        pattern.test(str);

        //构造函数属性  --  有些浏览器实现不一样
        var str = 'js js js';
        var pattern=/(j)s/;
        pattern.exec(str);
        console.log(RegExp.input);
        console.log(RegExp.$_);//必须exec方法执行之后  才会输出待匹配的原字符串
        console.log(RegExp['$_']);
        console.log(RegExp.lastMatch);//js
        console.log(RegExp['$&']);//js    lastMatch的别名
        console.log(RegExp.leftContext);//空字符串   左边剩余的字符串
        console.log(RegExp['$`']);
        console.log(RegExp.rightContext);//右边剩余的字符串
        console.log(RegExp["$'"]);
        console.log(RegExp.lastParen);//j
        console.log(RegExp["$+"]);

        var str = 'js js js';
        var pattern=/(j)s/;
        pattern.exec(str);
        console.log(RegExp.$1);//j  表示捕获的的是第一个分组

        // String和正则表达式相关的方法 ---  search  match  split
        var str = 'html js';
        var pattern=/js/;
        console.log(str.search(pattern));//5

        var str = 'html js';
        var pattern=/js2/;
        console.log(str.search(pattern));//-1

        var str = 'html js js';
        var pattern=/js/g;
        console.log(str.search(pattern));//5

        var str = 'js js js';
        var pattern=/js/;
        console.log(str.match(pattern));

        var str = 'js js js';
        var pattern=/js2/;
        console.log(str.match(pattern));//null

        var str = 'js js js';
        var pattern=/(j)s/;
        console.log(str.match(pattern));

        var str = 'js js js';
        var pattern=/(j)s/g;
        console.log(str.match(pattern));

        var str = '1.js\n2.js\n3.js';
        var pattern=/js/mg;//多行和全局一般会一起使用
        console.log(str);
        console.log(str.match(pattern));

        var str = '1.js\n2.js\n3.js';
        var pattern=/js$/mg;//多行和^$配合使用
        console.log(str);
        console.log(str.match(pattern));

        var str = 'js1\njs2\njs3';
        var pattern=/^js/g;//多行和^$配合使用
        console.log(str);
        console.log(str.match(pattern));

        var str = 'js1\njs2\njs3';
        var pattern=/^js/mg;//多行和^$配合使用
        console.log(str);
        console.log(str.match(pattern));

        var str='html,css,js';
        console.log(str.split(','));

        var str='html,  css  ,  js';
        var pattern=/\s*,\s*/;
        console.log(str.split(pattern));

        var str='I love js js';
        console.log(str.replace('js','html'));

        var str='I love js js';
        var pattern=/js/g;
        console.log(str.replace(pattern,'html'));

        var str='2020-4-1';
        var pattern=/-/g;
        console.log(str.replace(pattern,'.'));

        var str='I love js';
        var pattern=/(js)/;
        document.write(str.replace(pattern,'<strong style="color:red;">$1</strong>'));

        // 常用正则表达式
        // 1.QQ 全是数字\d 首位不能为0[1-9] 最少5位（10000）{4,10} 目前最多11位？^$
        // /^[1-9]\d{4,10}$/


        // 2.昵称 中文、英文、数字以及下划线 2-18位
        // /^[\u4e00-\u9fa5a-zA-Z0-9_]{2,18}$/
        // /^[\u4e00-\u9fa5\w]{2,18}$/


        // 3.密码 6-16位 不能用空白字符  \s 区分大小写
        // /^\S{6,16}$/i


        // 4.去除字符串首尾得空白字符
        var str = '   Alex      ';  
        var pattern=/^\s*|\s*$/g; 
        console.log('|'+str.replace(pattern,'')+'|');
        // var pattern=/^\s*/;
        // var pattern=/\s*$/;
        // var pattern=/^\s*$/;//不可以

        var str = '   Alex      '; 
        var pattern1=/^\s*/;
        var pattern2=/\s*$/;
        console.log('|'+str.replace(pattern1,'').replace(pattern2,'')+'|');


        // 去除两边空格得方法
        function trim(str){
            return str.replace(/^\s*/,'').replace(/\s*$/,'');
        }
        var str = '   Alex      '; 
        console.log('|'+trim(str)+'|');

        // 5.转驼峰   colorBtnAge
        // css:background-color:red;
        // js:elem.style.backgroundColor='red';
        // jquery:$(elem).css('background-color','red');
        var str='background-color';
        var str='margin-left';
        var pattern=/-([a-z])/gi;
        console.log(str.replace(pattern,function(all,letter){
            return letter.toUpperCase();
        }));

        // 6.匹配HTML标签 
        var str='<p class="odd" id="odd">123</p>';
        var pattern=/<\/?[a-zA-Z0-9]+(\s+[a-zA-Z]+=".*")*>/g;
        console.log(str.match(pattern));
        //逆向思维
        var str='<p class="odd" id="odd">123</p>';
        var pattern=/<[^>]+>/g;
        console.log(str.match(pattern));
    </script>
</html>

Web 组件化结构开发

JavaScript正则表达式 -- 笔记

项目：正则表达式测试工具

review0608

review0609