【Ajax学习】正则

1 正则与字符串操作

1、基本语法

exec()函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值。否则返回null。

注意：一次只能匹配到一个符合条件的，如果想得到多个符合条件的，则要多次调用exec()函数。

2、分组

正则表达式中()包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下:

注意：案例中的{{}}为占位符，小括号可以将分组中的内容提取出来，不加()就只能匹配，不能提取

3、字符串的replace函数

这个函数后面经常用到。

replace(函数用于在字符串中用一些字符替换另一些字符，语法格式如下:

<script>
        var str = '<div>我是{{name}}</div>'//{{}}为占位符
        var pattern = /{{([a-zA-Z]+)}}/;

        var patternResult = pattern.exec(str);
        // console.log(result);
        str = str.replace(patternResult[0], patternResult[1]);
        console.log(str);

    </script>

4、多次replace

<script>
        var str = '<div>我是{{name}}今年{{age}}岁</div>'//{{}}为占位符
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;

        var patternResult = pattern.exec(str);
        // console.log(result);
        str = str.replace(patternResult[0], patternResult[1]);
        patternResult = pattern.exec(str);
        str = str.replace(patternResult[0], patternResult[1]);
        console.log(str);

    </script>

 

5、使用while循环replace

<script>
        var str = '<div>我是{{name}}今年{{age}}岁</div>'//{{}}为占位符
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;

        var patternResult = null;
        while(patternResult = pattern.exec(str)){
            str = str.replace(patternResult[0], patternResult[1]);
        }
        console.log(str);

    </script>

6、replace替换为真值

 var data = {name: 'zhangsan', age: 18};
        var str = '<div>我是{{name}}今年{{age}}岁</div>'//{{}}为占位符
        var pattern = /{{\s*([a-zA-Z]+)\s*}}/;

        var patternResult = null;
        while(patternResult = pattern.exec(str)){
            str = str.replace(patternResult[0], data[patternResult[1]]);
        }
        console.log(str);

注意：data[patternResult[1]] = data['name']

 

2 自己封装一个template函数

 function template(id, data){
            var str = document.getElementById(id).innerHTML;
            var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
            var patternResult = null;
            while(patternResult = pattern.exec(str)){
                str =  str.replace(patternResult[0], data[patternResult[1]]);
            }
            return str;
        }

使用：

<div id="user-box"></div>
    <!-- 定义一个模板结构 -->
    <script type="text/html" id="tpl-user">
        <div>姓名：{{name}}</div>
        <div>年龄：{{ age }}</div>
        <div>性别：{{  gender}}</div>
        <div>住址：{{address  }}</div>

    </script>
    <script>
        function template(id, data){
            var str = document.getElementById(id).innerHTML;
            var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
            var patternResult = null;
            while(patternResult = pattern.exec(str)){
                str =  str.replace(patternResult[0], data[patternResult[1]]);
            }
            return str;
        }
        /* 定义数据 */
        var data = {name: '张三', age: 20, gender: '男', address: '天津'};
        /* 预调用模板引擎 */
        var htmlStr = template('tpl-user', data);
        /* 渲染页面结构 */
        document.querySelector("#user-box").innerHTML = htmlStr;

    </script>