夜光带你走进JavaScript（二十三）擅长的领域_前端的擅长领域怎么写-CSDN博客

本文链接：https://blog.csdn.net/weixin_41987706/article/details/102581595

夜光序言：

不管未来有多遥远，成长的路上有你有我;不管相逢在什么时候，我们是永远的朋友。

正文：前端 JavaScript 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

搜索模式可用于文本搜索和文本替换。

后端开发中，我们也接触过，那么请问什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的。

var a= /genius/i

实例解析：

/genius/i 是一个正则表达式。

genius是一个正则表达式主体 (用于检索)。

i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

search() 方法使用正则表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<p>搜索字符串 "CSDN", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "Visit CSDN!";
        var n = str.search(/CSDN/i);
        document.getElementById("demo").innerHTML = n;
    }
</script>

</body>
</html>

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<p>搜索字符串 "Genius", 并显示匹配的起始位置：</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
    function myFunction() {
        var str = "Visit Genius";
        var n = str.search("Genius");
        document.getElementById("demo").innerHTML = n;
    }
</script>

</body>
</html>

帅气~~

replace() 方法使用字符串

replace() 方法将接收字符串作为参数：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<p>替换 "Microsoft" 为 "Genius Team" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo">请访问 Microsoft~~</p>
<script>
    function myFunction() {
        var str = document.getElementById("demo").innerHTML;
        var txt = str.replace("Microsoft","Genius Team");
        document.getElementById("demo").innerHTML = txt;
    }
</script>

</body>
</html>

正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(上述例子中不区分大小写)。

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

正则表达式模式

其一：方括号用于查找某个范围内的字符：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

其二：元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

其三：量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

嗯唔~~ 使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

使用 test()

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<script>
    var a=new RegExp("e");
    document.write(a.test("The best things in life are free"));
</script>

</body>
</html>

除此之外：使用 exec()

exec() 方法是一个正则表达式方法。

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。

如果未找到匹配，则返回值为 null。

以下实例用于搜索字符串中的字母 "e":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>夜光</title>
</head>
<body>

<script>
    var a=new RegExp("e");
    document.write(a.exec("The best things in life are free"));
</script>

</body>
</html>