JavaScript课程——Day09（数组的迭代方式、正则）

// 数组.forEach(function (数组项, 数组下标, 数组本身) { });
// 作用：没有返回值，代表for循环数组
var arr = ['刘备', '关羽', '张飞'];
arr.forEach(function (item, index, array) {
    console.log(item, index, array);
});

// 数组.map(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，返回  每一项函数调用的结果组成的一个新数组
var arr = [1, 43, 2, 6];
var n = arr.map(function (item, index, array) {
    return item * 2;
});
console.log(n); // [2, 86, 4, 12]

// 数组.filter(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，返回  如果当前函数调用的结果为真，则将这一项的item放在一个数组中返回
var arr = [1, 43, 2, 6, 12];
var n = arr.filter(function (item) {
    return item > 5 && item < 20;
});
console.log(n); // [6, 12]

var arr = [
    { name: '李文涛', num: 86 },
    { name: '张新昊', num: 76 },
    { name: '黄锦标', num: 99 },
    { name: '刘传超', num: 34 },
    { name: '孙传恒', num: 56 },
    { name: '杜旭超', num: 78 }
];
var n = arr.filter(function (item) {
    return item.num >= 60 && item.num < 80
})
console.log(n);

// 数组.every(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，如果每一项都返回真，结果返回真
var arr = [1, 43, 2, 6, 12];
var n = arr.every(function (item) {
    return item > 0;
});
console.log(n);

// 数组.some(function (数组项, 数组下标, 数组本身) { });
// 作用：循环数组，只要有一项返回真，结果返回真
var arr = [1, 43, 2, 6, 12];
var n = arr.some(function (item) {
    return item > 20;
});
console.log(n);

// 1、字面量
// /检索字符/修饰符;
var re1 = /a/;
console.log(re1);
console.log(typeof re1); // 'object'


// 2、构造函数(如果有变量，就只能用构造函数方式创建)
// new RegExp('检索字符', '修饰符');
var re2 = new RegExp('a');
console.log(re2);

// ---------------------------
var a = 'abc';
var re3 = new RegExp(a);
console.log(re3);

// 全局匹配
// 正则默认只匹配成功一次，就不再匹配
// 如果要全部匹配，则加修饰符g
var str = '今天上课，明天上课，后天上课';

var re1 = /上课/;
// var re2 = /上课/g;
var re2 = new RegExp('上课', 'g');
console.log(str.replace(re1, '休息'));
console.log(str.replace(re2, '休息'));

// ---------------------------------------
// 不区分大小写
// 正则默认区分大小写
// 如果要不区分大小写，加修饰符i
var str = 'abCd';
var re1 = /abcd/;
var re2 = /abcd/i;
console.log(re1.test(str)); // false
console.log(re2.test(str)); // true

// 正则.test(字符串)
// 作用：检索字符串中是否包含正则要检索的内容，有则返回 true，没有则返回 false。

var str = 'hello world';
var re = /o/;
console.log(re.test(str)); // true

// 正则.exec(字符串);
// 作用：检索到正则表达式规定的内容会返回一个数组，检索不到则返回 null
// 同match

var str = 'hello world';
var re = /o/;
var re2 = /z/;

console.log(re.exec(str)); // ['o', ...]
console.log(re2.exec(str)); // null

// 字符串.match(正则);
// 正则去匹配字符串，如果匹配成功，就返回匹配成功的数组，如果匹配不成功，就返回null，跟exec方法一样

var str = 'haj123sdk54hask33dkhalsd879';
var re = /\d+/g;
console.log(str.match(re));

// 字符串.split(正则);
// 作用：按正则匹配的内容拆分成数组

// var str = 'hello web';
// var re = /\s/;
// console.log(str.split(re)); // [hello, web]

// -----------------------
var str = '2022-11-12 12:13:10'; // [2022,11,12,12,13,10]
var re = /\s|-|:/; // 以空格  或者以-  或者以:
console.log(str.split(re));

// 字符串.replace(正则, 新的字符串)
// 作用：替换正则匹配的字符串，返回的结果是替换以后的字符串，不影响原字符串
// replace的第二个参数可以是一个字符串，也可以是一个函数，函数的第一个参数就是正则匹配成功的整体，第二个参数就是正则的第一个小括号，以此类推

var str = '今天上课，明天上课，后天上课';
var re = /上课/g;
console.log(str.replace(re, '休息'));

// ---------------------------------------------------------------
// 手机号中间四位变星
var str = '13344445555'; // 133****9999
var re = /(\d{3})(\d{4})(\d{4})/; // 小括号是分组

// 方式一
var s = str.replace(re, '$1****$3');
console.log(s); // 133****5555

// 方式二
var s = str.replace(re, function ($0, $1, $2, $3) {
    // console.log($0, $1, $2, $3);
    return $1 + '****' + $3;
})
console.log(s); // 133****5555

// 字符串.search(正则);
// 返回正则匹配到的第一个字符串的位置，没有返回-1，类似于indexOf

var str = 'hello world';

var re = /o/;
console.log(str.search(re)); // 4
console.log(str.search(/z/)); // -1

\d    匹配数字
\D    匹配非数字
\w    匹配字母和数字及_
\W    匹配非字母和数字及_
\s    匹配空白字符、空格、制表符和换行符
\S    匹配非空白字符

{4,7}  : 最少出现4次，最多出现7次
{4,} : 最少出现4次，最多不限制
{4} : 正好出现4次
{1,} : 最少出现一次。简写为：+
{0,}  : 至少出现0次。简写为：*
{0,1}  : 出现0次或者1次。简写为：?
+和*的区别：+代表必须有，*代表可以没有。

var re = /\s|-|:/; // 以空格  或者以-  或者以:

var re = /(\d{3})(\d{4})(\d{4})/; // 小括号是分组

// .   除换行以外的任意字符
var str = 'hello web';
var re = /h.*o/; // 0个或多个任意字符
console.log(re.test(str));

// 真正的点用 : \.    
var str1 = 'abc.html';
var str2 = 'abcdhtml';
var re = /\.html/;
console.log(re.test(str1));
console.log(re.test(str2));

// 中括号：字符类
var str = 'adc';
var re = /a[abcd]c/; // [abcd]即a b c d中的任何一个字符即可
console.log(re.test(str));

var re = /[a-zA-Z0-9]/; // 大小写字母及数字
var re = /[a-d]/; // a-d

// -------------------------


// 中括号中的取反
var str = 'azc';
var re = /a[^abcd]c/; // 排除a b c d，其它任何字符均可
console.log(re.test(str));

<input type="text">
<button>判断</button>

<script>
    // 起始和结束
    // ^  行首匹配
    // $  行尾匹配

    var input = document.querySelector('input');
    var btn = document.querySelector('button');

    btn.onclick = function () {
        var v = input.value; // 字符串

        // // 判断手机号
        var re = /^1\d{10}$/;
        if (re.test(v)) {
            alert('是手机号')
        } else {
            alert('错误');
        }

        // 判断qq号
        var re = /^[1-9]\d{5,11}$/;
        if (re.test(v)) {
            alert('是QQ号')
        } else {
            alert('错误');
        }

    }
</script>

var str = '    吃饭，睡觉，打豆豆   ';

console.log('(' + str + ')');
console.log('(' + str.trim() + ')'); // IE8及以下不支持

// ----------------------------------
// 原理
var re = /^\s+|\s+$/g;
var s = str.replace(re, '');
console.log('(' + s + ')');

// -----------------------
// 封装函数
function trim(str) {
    var re = /^\s+|\s+$/g;
    return str.replace(re, '');
}
console.log('(' + trim(str) + ')');

// 中文
var str = '小朋ewfsa友dsfdsf你dsf是fdssfd否dsafds有fds很fdsfdf多fds问号';
var re = /[\u4e00-\u9fa5]/g;
console.log(str.match(re).join(''));

// 邮箱
var str = '2342423@qq.com';
var str = 'feew_fds@163.com';
var re = /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;

// 网址
var str = 'https://www.baidu.com';
var re = /^[a-zA-Z]+:\/\/[^\s]+$/;

// 身份证
var re = /^[1-9]\d{14}|[1-9]\d{17}|[1-9]\d{16}x$/;

// 座机
var re = /^0\d{2,3}-[1-9]\d{6,7}$/;

var str = '我就是我，来优就业学习，高薪就业，高效就业';

// 前瞻    : exp1(?=exp2)    查找 exp2 前面的 exp1
var re = /就(?=业)/g;     // 就业中的就
var s = str.replace(re, 'jiu');
console.log(s); // 我就是我，来优jiu业学习，高薪jiu业，高效jiu业

// 负前瞻   :  exp1(?!exp2)     查找后面不是 exp2 的 exp1
var re = /就(?!业)/;    // 不是就业中的就
var s = str.replace(re, 'jiu');
console.log(s); // 我jiu是我，来优就业学习，高薪就业，高效就业

var path1 = 'path/hello.html';
var path2 = 'path/nodata.html';
var path3 = 'path/index.html';

// 前瞻     : exp1(?=exp2)    查找 exp2 前面的 exp1
var re = /[a-z]+(?=\.html)/;
console.log(path1.match(re)[0]);
console.log(path2.match(re)[0]);
console.log(path3.match(re)[0]);

// 后顾     : (?<=exp2)exp1     查找 exp2 后面的 exp1
var re = /(?<=path\/)[a-z]+/;
console.log(path1.match(re)[0]);
console.log(path2.match(re)[0]);
console.log(path3.match(re)[0]);

var str = 'a,1,b,2,c,3'; // a=1,b=2,c=3

// 后顾     : (?<=exp2)exp1     查找 exp2 后面的 exp1
var re = /(?<=[a-z]),/g;
var s = str.replace(re, '=');
console.log(s);

// 负后顾     : (?<!exp2)exp1   查找前面不是 exp2 的 exp1
var re = /(?<!\d),/g;
var s = str.replace(re, '=');
console.log(s);