Bootstrap

js正则方法

1、数组的迭代方法

迭代：循环、遍历

IE8及以下不支持

  • forEach没有返回返回值
  • map、filter返回数组
  • every、some返回布尔值
1、forEach
// 数组.forEach(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组（没有返回值），代替for循环

var arr = ['a', 'b', 'c'];
arr.forEach(function (item, index, array) {
    console.log(item, index, array);
});
2、map
// 数组.map(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，返回每次函数调用的结果组成的一个新数组
var arr = [4, 2, 6];
var a = arr.map(function (item, index, array) {
    return item * 2;
});
console.log(a); // [8, 4, 12]
3、filter
// 数组.filter(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，返回每次函数调用的结果为true的项组成的一个新数组
var arr = [4, 8, 2, 6];
var a = arr.filter(function (item) {
    return item > 5;
});
console.log(a);
4、every
// 数组.every(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，如果每次函数调用结果都为true，则返回true
var arr = [4, 8, 2, 6];
var a = arr.every(function (item, index, array) {
    return item > 5;
});
console.log(a);
5、some
// 数组.some(function (item, index, array) { });
// 接收一个函数做为参数，该函数有三个参数，分别为数组项，下标，数组本身
// 作用：循环数组，函数调用只要有一个为true，则结果为true
var arr = [4, 8, 2, 6];
var a = arr.some(function (item, index, array) {
    return item > 10;
});
console.log(a);
6、find和findIndex
// 数组.find(function (item, index, array){});    
// 循环数组，调用函数，如果这个函数返回true，则把对应的item返回，否则返回undefined
// 返回的是满足条件的这一项

var arr = [3, 4, 3, 2, 3, 2, 3, 3];
var a = arr.find(function (item, index, array) {
    // console.log(item, index, array);
    return item === '3';
});
console.log(a);

// ---------------------------
var arr = [
    { name: 'zs', password: 1234 },
    { name: 'ls', password: 4545 },
    { name: 'ww', password: 77 },
    { name: '小王', password: 3333 },
    { name: '小李', password: 8998 }
];
var o = arr.find(function (item, index, array) {
    return item.name == 'ww' && item.password == 77
})
console.log(o);



// 数组.findIndex(function (item, index, array){}); 
// 调用函数，如果这个函数返回true，则把对应的item的下标返回，否则返回-1
// 返回的是满足条件的下标
var o = arr.findIndex(function (item, index, array) {
    return item.name == '小王' && item.password == 3333;
});
console.log(o);

正则

事先定义好的一些特殊字符，及这些特定字符的组合，组成一个‘规则字符串’，这个字符串就是正则。

正则是操作字符串的

RegExp：正则(regular) 表达式(expression)

写法

  • 字面量创建: /检索字符/修饰符;
  • 构造函数创建：new RegExp(‘检索字符’, ‘修饰符’);
// 1、字面量
// /检索字符/修饰符
var re = /abc/;
console.log(re); // /abc/
console.log(typeof re); // 'object'

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

// 2、构造函数(如果有变量，就必须用构造函数创建，不能用字面量创建)
// new RegExp('检索字符', '修饰符')
var re = new RegExp('abc');
console.log(re); // /abc/
console.log(typeof re); // 'object'


// -------------
// 使用变量
var ddd = 'abc';
var re = new RegExp(ddd);
console.log(re);

修饰符

var str = '今天上课，明天上课，后天上课';

// 正则默认只匹配成功一次，就会停止，如果想多次匹配，则加上标识符g
var re1 = /上课/;
var re2 = /上课/g; // 全局匹配
var re3 = new RegExp('上课', 'g');

console.log(str.replace(re1, '休息')); // 今天休息，明天上课，后天上课
console.log(str.replace(re2, '休息')); // 今天休息，明天休息，后天休息
console.log(str.replace(re3, '休息')); // 今天休息，明天休息，后天休息


// ---------------------------------------------
// 正则默认区分大小写，如果想要不区分大小写，则加标识符i
var str = 'abCd';
var re1 = /abcd/;
var re2 = /abcd/ig;
var re3 = new RegExp('abcd', 'ig');

console.log(re1.test(str)); // false
console.log(re2.test(str)); // true

正则的方法

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


var str = "hello world";
var re = /o/;
console.log(re.test(str)); // true
exec
// 正则.exec(字符串)      了解
// 检索到正则表达式规定的内容会返回一个数组，检索不到则返回 null
// 同match

var str = "hello world";

var re = /o/;
var re1 = /z/;

console.log(re.exec(str)); // [ "o" ]
console.log(re1.exec(str)); // null

字符串的正则方法

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

var str = "hello world";
var re = /o/g;
console.log(str.match(re)); // [ "o", "o" ]

// ------------------------------------------
var str = 'haj123sdk54hask33dkhalsd879';
var re = /\d+/g;
console.log(str.match(re)); // ["123", "54", "33", "879"]
split
// 字符串.split(正则);
// 按正则匹配的内容拆分成数组

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

// ------------------------------
// |   ：正则中的或者

var str = '2023-12-12 10:10:10'; // [2023,12,12,10,10,10]
var re = /\s|-|:/;
console.log(str.split(re)); // ["2023", "12", "12", "10", "10", "10"]
replace
// 字符串.replace(正则, 替换的新字符);
// 作用：替换正则匹配的字符串，返回的结果是替换以后的字符串，不影响原字符串

// replace的第二个参数可以是一个字符串，也可以是一个函数，函数的第一个参数就是正则匹配成功的整体，第二个参数就是正则的第一个小括号，以此类推


var str = '今天上课，明天上课，后天上课';
var re = /上课/g;

// console.log(str.replace(re, '休息')); // 今天休息，明天休息，后天休息

var s = str.replace(re, function ($0) {
    console.log($0);
    return '休息';
})
console.log(s);

案例：

1、敏感词过滤

2、手机号中间四位变星

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

var str = 'hello world';

var re1 = /o/;
var re2 = /z/;
console.log(str.search(re1)); // 4
console.log(str.search(re2)); // -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 wrold';
var re = /h.*o/;
console.log(str.match(re));


// -----------------------------
// \.    代表真正的点
var str1 = 'abcd.html';
var str2 = 'abcdehtml';

var re = /\.html/;
console.log(re.test(str1)); // true
console.log(re.test(str2)); // false
正则中的中括号及排除

字符类：即一对中括号代表一个字符

// 中括号的作用：字符类
// 一个中括号代表一个字符，不论你里面写多少东西，它总之是一个字符

var str = 'abc';

var re = /a[abcd]c/; // aac abc acc adc
console.log(re.test(str)); // true


// ------------------------------------
var re = /[a-zA-Z0-9]/; // 大小写字母及数字
var re = /[d-e]/;// 可以a-f d-e，但不能反着来


// -------------------------------
var str = 'abc';

// ^写在中括号里面，即排除中括号里面的内容
var re = /a[^abcd]c/; // 排除a b c d，其它的都可以
console.log(re.test(str)); // false
起始和结束
<input type="text">
<button>判断</button>

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

    // 手机号
    btn.onclick = function () {
        var txt = input.value;
        var re = /^1\d{10}$/;

        if (re.test(txt)) {
            alert('是手机号')
        } else {
            alert('不是手机号')
        }

    }


    // qq号
    btn.onclick = function () {
        var txt = input.value;
        var re = /^[1-9]\d{5,11}$/;

        if (re.test(txt)) {
            alert('是qq号')
        } else {
            alert('不是qq号')
        }

    }
</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 re = /^\d{6}$/;


// 匹配中文
var str = 'fdssd小sfsdfddsfdsafsdsf芳ds约fdsfdsa不fds';
var re = /[\u4e00-\u9fa5]/g; // 有事一00，有酒罚我
console.log(str.match(re).join(''));

// 电子邮箱
var str = '[email protected]';
var str = '[email protected]';
var re = /^\w+@[a-z0-9]+(\.[a-z]+){1,3}$/;


// 网址
// 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}$/;
前瞻后顾

  • 前瞻： exp1(?=exp2) 查找 exp2 前面的 exp1

    前面的值（？=查找坐标） 前面的值为被查找的值

  • 负前瞻: exp1(?!exp2) 查找后面不是 exp2 的 exp1

  • 后顾: (?<=exp2)exp1 查找 exp2 后面的 exp1

    （？=查找坐标）后面的值 后面的值为被查找的值

  • 负后顾: (?<!exp2)exp1 查找前面不是 exp2 的 exp1

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

// 前瞻
var re = /就(?=业)/g;
console.log(str.replace(re, 'jiu'));

// 负前瞻
var re = /就(?!业)/;
console.log(str.replace(re, 'jiu'));

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

// 前瞻
var re = /[a-z]+(?=\.html)/;

// 后顾
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

// 四种方式均可实现
var re = /,(?=\d)/g; // 前瞻
var re = /,(?![a-z])/g; // 负前瞻
var re = /(?<=[a-z]),/g; // 后顾
var re = /(?<![0-9]),/g; // 负后顾

console.log(str.replace(re, '='));

悦读

道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。 故常无欲，以观其妙，常有欲，以观其徼。 此两者，同出而异名，同谓之玄，玄之又玄，众妙之门。

最新收录
Redhat Enterprise Linux 9网络配置以及远程连接
新增收货地址
java web ssm vue宠物饲料商城百科论坛设计(源码+lw+部署文档+讲解等)
Rust代码答疑报错｜Python一对一辅导答疑
代码随想录算法训练营第66天：图论4[1]
22.状态机设计--可乐机设计（投币三元出一瓶可乐）
数据库 MySQL安装与简单使用命令
matlab 隶属度计算,基于MATLAB实现的云模型计算隶属度
HTML转义
变态青蛙跳台阶
;