09-JavaScript 正则表达式

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量50 收藏
点赞数
文章标签： javascript 开发语言 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yfp020907/article/details/132699258
版权

1.正则表达式的创建方式

 字面量方式

构造函数new RegExp

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.字面量形式
        var reg = /a/;

        // 2.通过构造函数创建
        var reg2 = new RegExp(/b/);
        console.log(reg);
        console.log(reg2);
    </script>
</body>

</html>

2.匹配模式  test

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // i 忽略大小写
        // g 全局匹配
        // gi 全局匹配 + 忽略大小写

        var reg = /abc/gi;

        var str = "abc";
        var str2 = "defabc";
        var str3 = "defghabc";

        console.log(reg.test(str));
        console.log(reg.test(str2));
        console.log(reg.test(str3));
        console.log(reg.test(str3));

        
    </script>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = "abcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabcabc";

        var reg = /abc/gi;

        // exec() 方法用于检索字符串中的正则表达式的匹配。如果字符串中有匹配的值返回该匹配值，否则返回 null。
        console.log(reg.exec(str));
        console.log(reg.exec(str));
        console.log(reg.exec(str));
    </script>
</body>

</html>

4.边界符

^ 以谁开始

$ 以谁结束

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // ^ 以谁开始
        // $ 以谁结束
        var reg = /^abc$/;

        var str = "abcabc";

        console.log(reg.test(str));
    </script>
</body>

</html>

5.中括号[ ]   有一系列字符用中括号括起来，表示匹配其中的任一字符，多选一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var reg = /[abc]/;

        var str = "agfjdhfdhfjsdh";

        console.log(reg.test(str));

        var reg2 = /^[a-zA-z]/;

        var userName = "123zq123456";
        console.log(reg2.test(userName));
    </script>
</body>

</html>

6.量词符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // * 出现0次或更多次
        // + 出现1次或更多次
        // ? 出现0次或1次
        // {n} 出现n次
        // {n,} 出现n次或更多次
        // // {n,m}  出现n到m次
        // var reg = /^[a-z]{3,5}$/;
        // var str = "abcde";
        // console.log(reg.test(str));

        // // var reg2 = /^?$/;
        // var str2 = "asdabcabcabc.1";
        // console.log(reg2.test(str2));

        // var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

        // var reg3 = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/

        var reg4 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/;

        console.log(reg4.test("ASDasdasd"));
    </script>
</body>

</html>

7.元字符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var reg1 = /\d/;  // [0-9]
        var reg2 = /\D/;  // 非数字 [^0-9]
        var reg3 = /\w/;  // 字母或数字或下划线  [a-zA-Z0-9_]
        var reg4 = /\W/;  // 非字母数字下划线  [^a-zA-Z0-9_]
        var reg5 = /\s/;    // 任意的空白符  [\t\n\r\v\f]
        var reg6 = /\S/;    // 任意的非空白符  [^\t\n\r\v\f]
        var reg7 = /a|b/;
        var reg8 = /\./;
        var str1 = ".";
        console.log(reg8.test(str1));
    </script>
</body>

</html>

8.正则案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .danger {
            color: red;
        }
    </style>
</head>

<body>
    <span class="">用户名：</span><input type="text"><br>
    <span>密码：</span><input type="text">

    <script>
        var userReg = /^[a-z]\d{6,10}$/;
        var psdReg = /^[a-zA-Z0-9_-]{6,16}$/;
        var phoneReg = /^1[3|5|7|8|9]\d{9}$/;
        var emailReg = /\w+@\w+\.\w+(\.\w+)?/;

        var userName = document.getElementsByTagName("input")[0];
        var psd = document.getElementsByTagName("input")[1];
        var nameTxt = document.getElementsByTagName("span")[0]
        var psdTxt = document.getElementsByTagName("span")[1]

        userName.oninput = function () {
            if (!userReg.test(userName.value)) {
                nameTxt.className = "danger";
            } else {
                nameTxt.className = "";
            }
        }
        psd.oninput = function(){
            if (!emailReg.test(psd.value)) {
                psdTxt.className = "danger";
            } else {
                psdTxt.className = "";
            }
        }
    </script>
</body>

</html>

9.正则提取   match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回值是存放匹配结果的数组。该数组的内容依赖于RegExp 是否具有全局标志 g。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // match() 可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。返回值是存放匹配结果的数组。该数组的内容依赖于RegExp 是否具有全局标志 g。
        
        var str = "123123@qq.com,ziyuanyihe@163.cn 87666444@qq.com englishtown.com";
        var str2 = "name=zs&psd=123&gender=nan";

        var reg = /\w+@\w+\.\w+(\.\w+)?/g;
        var reg2 = /\w+=\w+/g;

        console.log(str.match(reg));
        console.log(str2.match(reg2));
    </script>
</body>

</html>

10.正则替换和查询

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var str = "hello world";

        var reg = /o/g;

        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);
        console.log(reg.exec(str));
        console.log(reg.lastIndex);


        // console.log(str.search(/o/g));
        // console.log(str.replace(/o/g, "O"));


    </script>
</body>

</html>

yfp020907
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 正则表达式 转换 java 正则表达式_JavaScript 正则表达式【转】
weixin_29041767的博客
02-28 1041
一、JavaScript正则表达式正则表达式(英语：Regular Expression，在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。什么是正则表达式？正则表达式是由一个字符序列形成的搜索模式。当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。正则表达式可以是一个简单的字符，或一个更...
javascript 正则表达式 转换 java 正则表达式_正则表达式java,javaScript应用
weixin_31539461的博客
02-28 1091
dfa nfa 混合；捕获；断言；正则引擎大体上可分为不同的两类：DFA和NFA，而NFA又基本上可以分为传统型NFA和POSIXNFA。1.正则语法捕获组：没用()的字符都是一个一个捕获的从左往右，要么就是一个字符一个字符匹配(pattern)：捕获该匹配的子表达式；可用$1,$2,$3获得(?:pattern)：匹配但不捕获正则表达式,，即用$1,$2不能获得例如：((A)(B(C)))：有...
JavaScript-正则表达式语法规则与示例
可可的博客
12-11 1356
JavaScript-正则表达式语法规则 一、正则表达式初识 1.什么是正则表达式 正则表达式是由一个字符序列形成的搜索模式，搜索模式可用于文本搜索和文本替换。 2.创建正则表达式 JS正则表达式的创建有两种方式： new RegExp() 和 直接字面量。 1.构造函数new RegExp()创建一个正则对象 var reg=new Regex(‘js’,’gi’) //第一个参数是正则表达式文本，第二个参数是正则表达式修饰符。 示例 var result = new RegExp("a
Python 正则表达式详解（建议收藏！）
热门推荐
good good study
10-01 11万+
正则表达式是对字符串提取的一套规则，我们把这个规则用正则里面的特定语法表达出来，去匹配满足这个规则的字符串。正则表达式具有通用型，不仅python里面可以用，其他的语言也一样适用。python中re模块提供了正则表达式的功能，常用的有四个方法(match、search、findall)都可以用于匹配字符串match匹配字符串match方法尝试从字符串的起始位置匹配一个模式，如果不是起始位置匹配成功的话，match()就返回none。例子。
js 年 年-月 年-月-日 正则表达式
queen_joker的博客
11-25 3205
最近在写前端项目，用到了一些正则表达式 ，记录一下 年（例：2021） /^\d{4}$/ 年-月（例：2021-01） /^\d{4}-((0([1-9]))|(1(0|1|2)))$/ 年-月-日（例：2021-01-01） /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/ 年 或 年-月 或 年-月-日（包括闰年） /(\d{4}-(((0(1|3|5|7|8))|(1(0|2)))(-((0[1-9])|([1-2][0-9])
JavaScript正则表达式(完整版)
qq_47824967的博客
08-30 1万+
JavaScript正则表达式 1. 构建正则表达式 字面量创建 var reg = /正则表达式/修饰符 构造函数创建 var reg = new RegExp('正则表达式','修饰符') 修饰符 ​ i: ignoreCase, 匹配忽视大小写 ​ m: multiline , 多行匹配 ​ g: global , 全局匹配 2. 正则表达式调用（实例方法） 1. exec ​ 匹配字符串和正则表达式的方法， ​ 匹配成功： ​ 返回一个数组 [匹配内容,index:匹配的起始位置,
JavaScript 正则表达式
学习记录
01-19 643
1. 正则表达式概述 1.1 什么是正则表达式 正则表达式 是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象 作用： 表单验证 过滤敏感词 提取关键字 1.2 正则表达式的特点 灵活性、逻辑性和功能性非常的强 可以迅速地用极简单的方式达到字符串的复杂控制 对于刚接触的人来说，比较晦涩难懂 要学会使用正则表达式并且根据实际情况修改正则表达式 2. 正则表达式在 JavaScript 中的使用 2.1 创建正则表达式 在 JavaScript 中，可以通过两种方式创建一
JavaScript系统学习---10---正则表达式
習習君的博客
05-26 1273
1. 正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象 。 2. 通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式。 3. 正则表达式在 JavaScript中的使用场景。
js-正则表达式的方法
weixin_47295886的博客
10-23 1191
3、match("正则")找到符合条件的内容并提取——默认match只会找到第一个符合条件的内容，找到以后就停止检索，设置全局匹配-匹配所有内容---------匹配到的内容返回到数组--即使只有一个结果。4、replace("被替换的内容---正则表达式"，"新的内容")//默认只会替换第一个----使用全局匹配g。2、search("正则")寻找指定内容======搜到 返回元素存在的第一个索引 没有返回-1。寻找abc、aec、aec---------只会查找一个 ，即使设置全局匹配。
JavaScript正则表达式
01-08
JavaScript正则表达式 一、认识正则表达式 1、正则表达式是描述字符模式的对象，正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 2、String和RegExp都定义了使用正则表达式进行强大...
JavaScript-正则表达式.pdf
10-17
在JavaScript中，正则表达式（Regular Expression）是一种强大的文本处理工具，用于匹配、查找、替换等操作。正则表达式在JavaScript中的使用通常涉及到以下几个关键概念和语法： 1. 创建正则表达式： - 字面量...
javascript正则表达式迷你书 (1).pdf
12-28
JavaScript 正则表达式迷你书 本书是 JavaScript 正则表达式的入门级教程，旨在帮助读者快速掌握正则表达式的基本概念和应用。下面是本书的知识点摘要： 第一章：正则表达式字符匹配攻略 * 两种模糊匹配：横向...
javascript正则表达式基础篇
10-27
主要是介绍javascript正则表达式的一些基础知识，主要是介绍javascript的正则书写方法与常用实例，需要的朋友可以参考下
手机号-邮箱-用户名-正则表达式
03-11
手机号-邮箱-用户名-正则表达式
Sortable.js板块拖拽示例
w11111xxxl的博客
07-14 758
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 665
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 521
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
ReactRouter v6升级的步骤
feixin369的博客
07-14 355
React Router v6 引入了一个 Routes组件，它有点像Switch，但功能要强大得多。与Switch相比，RoutesReact.lazy。
javascript 正则表达式 转换 java 正则表达式
04-08
JavaScript正则表达式和Java正则表达式在语法上有一些差异，但是它们的基本概念和用法是相似的。下面是将JavaScript正则表达式转换为Java正则表达式的一些常见规则： 1. 语法差异： - JavaScript正则表达式使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值