正则

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模式或规则的文本。

验证表单：匹配输入框用户输入内容

敏感词过滤：过滤掉或替换页面内容中的一些敏感词

匹配所需要的部分或从字符串中提取特定部分等。

• 正则表达式手册
• 正则 测试

test() 方法属于 JavaScript 的 RegExp 对象。它用于检测一个字符串是否与某个正则表达式的模式匹配。如果匹配成功，则返回 true；否则返回 false。

let re = /hello/; // 定义规则: 正则匹配 hello
let str = 'hello world';
console.log(re.test(str)); // 判断 str 是否能匹配 re 的规则 输出 true

match() 方法则是属于 JavaScript 字符串对象的一个方法。当正则表达式与字符串中的某些部分匹配时，这个方法会返回一个数组，该数组包含了匹配到的内容（包括子串）；如果没有匹配，则返回 null。

// 全局匹配
let str = 'hello world, hello yier';
let result = str.match(/hello/g);
console.log(result); // 输出 ["hello", "hello"]

构造函数

let str = "hello ooo eee"

let reg2 = new RegExp(/l/);  //创建正则表达式
console.log(str.match(reg2));

let v = "hello"; // 规则
// 相当于RegExp(/hello/)
let reg3 = new RegExp(v);  //创建正则表达式 ---> hello
console.log(str.match(reg3));

修饰符

修饰符	全拼	描述
g	global	全局搜索
i	insensitive	不区分大小写
m	multilint	多行搜索（换行）

let str = "YangGuangyangguang";
console.log(str);
let reg = /a/g;
console.log(str.match(reg)); // 4处
let reg2 = /y/gi;
console.log(str.match(reg2)); // 2处

let str2 = "Yang\nYang\nyang";
let reg3 = /g/gm;
console.log(str2.match(reg3)); // 3处

边界符

边界符	描述
^abc$	精确匹配(必须是 abc字符串才符合规范)
t$	以t结尾
^t	以t开头

元字符

参考 : 正则表达式手册

元字符	说明
\d	匹配一个数字字符 相当于 [0-9]
\D	匹配一个非数字字符 相当于 [^0-9]
\w	匹配任意字母、数字和下划线[0-9 A-z]
\W	匹配任何非单词字符 相当于[^0-9 A-z]
\s	匹配任何空白字符 包括 [\t\n\r\v\f] 空格 制表符 换行等等
\S	匹配任何非空白字符 相当于[^\t\n\r\v\f]

// 匹配数字
let reg = /\d/g;
console.log("123".match(reg)); 
		// 123
// 匹配非数字字符
console.log("晴天age:20wsd2002_1".match(/\D/g)); 
		// 晴天age:wsd_

量词符

量词	说明
*	重复 0 次 或者 更多次(只顾头)
+	重复 1 次 或者 更多次(会往后找)
?	重复 0 次 或者 一次(只顾头)
{n}	重复 n 次
{n,}	重复 n 次 或者 更多次
{n,m}	重复 n 到 m 次

1.
惰性/非贪婪模式：最小可能匹配
*?
+? 结合--非贪婪模式
? 表示某个模式出现了0次或者1次  ===  {0,1}
?只要已发现匹配就返回结果,不会往下检查
2.
贪婪模式：默认情况下，尽可能的多匹配
* 表示某个模式出现了0次或者多次  ===  {0,}
+ 表示某个模式出了1次或者多次
+ 匹配到一个字符不满足匹配规则位置

let a = "aaabbbccc";
console.log(a.match(/a*/));

// 表示 匹配 尽可能少的 b ,也就是 1个b
console.log("+?","abbb".match(/ab+?/)); // ab
// 表示能匹配多个 b
console.log("+","abbb".match(/ab+/)); // abbb
console.log("*","abbb".match(/ab*/)); // abbb

// 表示a后面有多个b,那么匹配0个b(尽可能少匹配)
console.log("*?","abbb".match(/ab*?/)); // a

特效

操作	描述
show()	显示匹配的元素
hide()	隐藏匹配的元素
fadeIn()	淡入
fadeOut()	淡出
slideDown()	元素逐步延伸显示
slideUp()	元素逐步缩短直至隐藏
animate()	自定义动画

元素的显示与隐藏

<style>
    div {background: #def3ca;margin: 3px;width: 80px;display: none;float: left;text-align: center;}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello, </div>
<div>how</div>
<div>are</div>
<div>you?</div>
<script>
    $( "#showr" ).on( "click", function() {
        $( "div" ).first().show( "fast", function showNext() {
            $( this ).next( "div" ).show( "fast", showNext );
        });
    });

    $( "#hidr" ).on( "click", function() {
        $( "div" ).hide( 1000 );
    });
</script>

渐变显示或隐藏元素

<style>
    div { background: #def3ca;margin: 3px;width: 80px;height: 80px;display: none;float: left;text-align: center;line-height: 80px;}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>

<button id="fadeInBtn">Fade In</button>
<button id="fadeOutBtn">Fade Out</button>
<div>Hello 1,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
<div>doing</div>
<div>today?</div>

<script>
    $(document).ready(function() {
        var divs = $("div");
        var index = 0;

        function fadeInNextDiv() {
            if (index < divs.length) {
                divs.eq(index).fadeIn(1000, function() {
                    index++;
                    fadeInNextDiv(); // 递归调用自身
                });
            }
        }

        $("#fadeInBtn").on("click", function() {
            index = 0; // 重置索引
            fadeInNextDiv(); // 开始淡入过程
        });

        $("#fadeOutBtn").on("click", function() {
            divs.fadeOut(1000); // 所有 div 元素淡出
        });
    });
</script>

自定义动画

<style>
    div {background-color: #bca;width: 200px;height: 1.1em;text-align: center;border: 2px solid green;margin: 3px;font-size: 14px;}
    button {font-size: 14px;}
</style>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>

<script>
    $( "#go1" ).on( "click", function() {
        $( "#block1" )
            .animate({
            width: "90%"
        }, {
            queue: false,
            duration: 3000
        })
            .animate({ fontSize: "24px" }, 1500 )
            .animate({ borderRightWidth: "15px" }, 1500 );
    });

    $( "#go2" ).on( "click", function() {
        $( "#block2" )
            .animate({ width: "90%" }, 1000 )
            .animate({ fontSize: "24px" }, 1000 )
            .animate({ borderLeftWidth: "15px" }, 1000 );
    });

    $( "#go3" ).on( "click", function() {
        $( "#go1" ).add( "#go2" ).trigger( "click" );
    });

    $( "#go4" ).on( "click", function() {
        $( "div" ).css({
            width: "",
            fontSize: "",
            borderWidth: ""
        });
    });
</script>