JavaScript -- 总结 12 （小白）

最新推荐文章于 2024-08-12 09:24:46 发布
最新推荐文章于 2024-08-12 09:24:46 发布
阅读量381 收藏
点赞数 12
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_78949452/article/details/140889116
版权

正则表达式

<!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 = /abc/;
        console.log(reg);
        console.dir(reg);

        // 2.构造函数创建
        var reg2 = new RegExp(/abc/);
        console.log(reg2);
    </script>
</body>
</html>

匹配模式

<!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/gi;

        var str = "defAbcgabcAbcABC";

        // test() 检测是否符合正则表达式的规则
        // console.log(reg.test(str));

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

        // i 忽略大小写

        // g 全局匹配

        // exec() 有匹配的值，则返回匹配值，否则返回 null
        console.log(reg.exec(str));
        console.log(reg.exec(str));
        console.log(reg.exec(str));
    </script>
</body>
</html>

边界符

<!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$/gi;

        var str = "abcabc";

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

        // 边界符 ^ 以谁开始   $ 以谁结束

        // 当两者一块使用，则字符串必须于正则一致
    </script>
</body>

</html>

中括号

<!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 = /[abcdefg]/gi;
        var str = "_";
        // console.log(reg.test(str));

        // 取反
        var reg = /[^a-zA-Z0-9]/gi;
        console.log(reg.test(str));
    </script>
</body>
</html>

量词符

<!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}$/gi;
        var str = "abcdefg";
        console.log(reg.test(str));
    </script>
</body>

</html>

元字符类

<!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 = /[a-zA-Z0-9_]/
        var reg = /\w/;

        // 手机号输入规则
        var phone = /^1[3|4|5|6|7|8|9][\d]{9}$/;

        var str = "130888888888";
        console.log(phone.test(str));
    </script>
</body>

</html>

表单中的应用

<!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>
    <input type="text">
    <img src="" alt="">
    <script>
        var input = document.getElementsByTagName("input")[0];
        var img = document.getElementsByTagName("img")[0];

        var phone = /^1[3|4|5|6|7|8|9][\d]{9}$/;

        input.oninput = function () {
            if(phone.test(input.value)){
                img.src = "./shuruzhengque.png";
            }else{
                img.src = "./shurucuowu.png";
            }
        }
    </script>
</body>

</html>

正则提取

<!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 = "123123@qq.com,ziyuanyihe@163.cn 87666444@qq.com englishtown.com 222669312@qq.com...";
        var array = str.match(/\w+@\w+\.\w+(\.\w+)?/g);
        console.log(array);
    </script>
</body>
</html>

正则替换

<!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>
        // replace()

        var str = "abc,efg,123，abc,123，a";

        console.log(str.replace(/，/g, ","));
    </script>
</body>

</html>
柿子来了
关注
  • 12
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
李立超前端JavaScript基础个人总结笔记
05-25
源自于B站up主李立超老师的前端JavaScript基础知识视频课，根据199节视频课的内容，使用Typora笔记软件总结核心知识点，方便前端小白配合老师视频课使用，内含相关概念的定义和配套代码资源，其上传的初衷是为了方便...
资源专区-小白必看-myeclipse的使用
05-08
【标题】：资源专区-小白必看-myeclipse的使用 【内容】： MyEclipse是Eclipse的一个强大扩展，特别适合Java后端开发人员，它集成了多种开发工具，如Java、JSP、Servlet、JavaScript、Struts、Spring等，使得开发...
JavaScript -- 总结 3 （小白）
2301_78949452的博客
08-02 531
条件运算符, switch语句, while语句, continue语句,布尔类型的隐式转换， 九九乘法表练习
JavaScript -- 总结 7 （小白）
2301_78949452的博客
08-06 470
Number对象， 日期对象，时间戳，Math对象，练习猜数字， instanceof检测复杂数据类型
JavaScript -- 总结 1 （小白）
2301_78949452的博客
07-31 473
js 使用方法，window对象方法， window对象属性，变量的创建、声明提升， 数据类型、检测、转换。 隐式类型转换
JavaScript -- 总结 2 （小白）
2301_78949452的博客
08-01 397
算数运算符,自增自减运算符, 逻辑运算符,关系运算符, 运算符优先级, if判断语句, for循环语句
JavaScript -- 总结 13（小白）
2301_78949452的博客
08-12 297
【代码】JavaScript -- 总结 13（小白）
JavaScript -- 总结 4 （小白）
2301_78949452的博客
08-03 280
数组的创建， 数组包含的属性， 数组的访问和修改，数组遍历， 多维数组， 最大值和最小值， 栈方法和队列方法， 检索方法，数组转字符串，数组其他方法，冒泡排序
JavaScript -- 总结 11 （小白）
2301_78949452的博客
08-10 335
超时定时器，间歇定时器倒计时，假期倒计时，时间同步，匀速动画，练习 转圈圈
JavaScript -- 总结 6（小白）
2301_78949452的博客
08-05 199
对象,构造函数和普通函数的区别, new关键字, 遍历对象, 对象分类, 字符串操作方法
JavaScript--小白入门篇1
小C的博客
02-06 1362
一、JavaScript简介 1.1 JavaScript的用途   JavaScript用来制作web页面交互效果，提升用户体验。    简单列出几个JavaScript能够制作的页面效果，它能干什么： 轮播图 Tab栏（选项卡） 地图 表单验证 web前端三层来说： 结构层: HTML 从语义的
javascript中创建对象的几种方法总结
10-26
JavaScript 是一种动态类型的语言，它的灵活性使得创建对象的方式多种多样。在JavaScript中，有几种常见的创建对象的方法，这里我们将详细探讨这些方法。 1. **对象字面量**：这是最简单且直观的创建对象的方式。...
Algorithm-summary:你好,这里是小咸鱼的仓库，里面有我总结的LeetCode算法题JavaScript解法，这个仓库记录了一个前端小白的算法学习历程
05-07
在这个名为"Algorithm-summary"的压缩包文件中，包含的是作者小咸鱼对于LeetCode算法题目的JavaScript实现。这个仓库不仅展示了作者的编程技能，也记录了他/她的前端学习之路，特别是对算法的理解和掌握。JavaScript...
ES6--javascript判断一个字符串是否存在另一个字符串中
04-07
### 总结 通过以上介绍，我们可以看到 ES6 中新增的 `includes()`、`startsWith()` 和 `endsWith()` 方法极大地简化了字符串处理的逻辑，提高了代码的可读性和维护性。这些方法不仅让开发者能够更直观地进行字符串...
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 416
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 570
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 114
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 306
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值