第十八节 JS中的正则表达式

article/2025/9/10 13:06:33

复习字符串操作:

  search    查找

  substring   获取子字符串

  charAt    获取某个字符

  split     分割字符串,获取数组

1 var str = 'abcdefghijk';
2 alert(str.search('b'));    //返回1,表示b在字符串中的位置是1,不存在的字符返回-1
3 alert(str.substring(2,5));    //包含开头不包含结尾,所以返回cde
4 alert(str.substring(3));    //返回defghijk
5 alert(str.charAt(3));   //d
6 alert(str.split(''));  //返回“a,b,c,d,e,f,g,h,i,j,k”

找出字符串中的所有数字

  用传统字符串操作完成  

 1 //找出str1中的所有数字
 2 var str1 = '12 sfdg-=/*sfgh85gdhj8745';
 3 var arr = [];
 4 var tmp = '';
 5 
 6 for (var i = 0; i < str1.length; i++) {
 7     if (str1.charAt(i) >= '0' && str1.charAt(i) <= 9) {
 8         tmp+=str1.charAt(i);
 9     } else {
10         if (tmp){
11             arr.push(tmp);
12             tmp = '';
13         }
14     }
15 }
16 if (tmp){
17     arr.push(tmp);
18     tmp = '';
19 }
20 alert(arr);     //返回12,85,8745

  用正则表达式完成

1 var str1 = '12 sfdg-=/*sfgh85gdhj8745';
2 alert(str1.match(/\d+/g));    //返回12,85,8745,其中\d表示实数,g=global(全局、全部)

 

什么是正则表达式:

  什么是正则:其实就是一种规则或模式,比如说邮箱的表示规则是:"一串英文、数字和下划线组合@一串英文数字组合.一串英文"

  正则表达是也是一种,强大的字符串匹配工具,是一种正常人类很难读懂的文字

  RegExp对象

    JS风格——new RegExp('a', 'i');

    perl风格——/a/i

 

字符串与正则表达式:

  search:字符串搜索

    返回出现的位置

    忽略大小写:i——ignore

    判断浏览器类型

1 // var re = new RegExp('a', 'i');   //最简单的正则表达式,什么也不表示,就表示一个“a”本身,JS风格的写法,其中i=ignore表示忽略大小写
2 var re = /a/i;   //另一种写法,意义与上句相同,是一种perl风格的写法,其中i=ignore表示忽略大小写
3 var str = 'abcdef';
4 alert(str.search(re));    //返回“0”,表示a在字符串的第0位

  match:获取匹配的项目

    量词:表示个数,即被求项目的个数;

    +:表示若干

    量词变化:\d、\d\d和\d+

    全局匹配:g——global

    例子:找出所有数字

1 //找第一个数字出现的位置,
2 var str = 'abf ,=-1sdf65';
3 var re = /\d/g;  //其中\d表示数字,g=global,找到全部
4 alert(str.match(re));   //返回1,6,5
5 
6 var re1 = /\d+/g;    //所以上面不带加号,表示一个数字一个数字获取的,而现在是一串数字一串数字获取的
7 alert(str.match(re1));   //返回1,65 

  replace

    替换所有匹配

      返回替换后的字符串

 1 //replace的使用
 2 var str = 'alghqaerghjcvbagc';
 3 // alert(str.replace('a','0'));    //返回0lghqaerghjcvbagc,可见该句只把字符串中的第一个a替换成了0,qita没变
 4 
 5 //当我们用正则表达式时:
 6 // var re = /a/;
 7 // alert(str.replace(re, '0'));    //返回0lghqaerghjcvbagc,与上面一样
 8 
 9 var re = /a/g;
10 alert(str.replace(re, '0'));    //返回0lghq0erghjcvb0gc,此时a全部被替换成0 

      例子:敏感词过滤

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>敏感词过滤</title>
 6     <script>
 7         window.onload = function () {
 8             var oTxt1 = document.getElementById('txt1');
 9             var oTxt2 = document.getElementById('txt2');
10             var oBtn = document.getElementById('btn1');
11 
12             oBtn.onclick = function () {
13                 var re = /a|g|j|d|S/gi;    //把agjS作为敏感词过滤掉,g表示全部,i表示忽略大小写,gi或ig不影响
14 
15                 oTxt2.value = oTxt1.value.replace(re, '***');
16             };
17         };
18     </script>
19 </head>
20 <body>
21 <textarea id="txt1" rows="10" cols="40"></textarea><br>
22 <button id="btn1">过滤</button><br>
23 <textarea id="txt2" rows="10" cols="40"></textarea>
24 </body>
25 </html>
View Code

 

字符串:[]在正则表达式中被称作元字符,具有以下功能

  任意字符:

    [abc]:表示“或”——任选的意思,即任选一个“[]”内的字母,例子:o[usb]t——ost、obt、out

  范围:

    [a-z]、[0-9](相当于\d)例子:id[0-9]——id0、id5

  排除:

    [^a](除了a以外的其他字符)例子:o[^0-9]t——oat、o?t、o t(除了数字之外)、[^a-z0-9](除了英文和数字)

  组合:

    [a-z0-9A-Z]

  实例:采集小说,说白了就是偷小说,在原来网站上打开某个小说,然后查看打开网页的源码,然后把文字复制出来。然后再把文本里面掺杂的HTML标签过滤掉,下面是实现方法

    自定义innerText方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>采集网页小说</title>
 6     <script>
 7         window.onload = function () {
 8             var oTxt1 = document.getElementById('txt1');
 9             var oTxt2 = document.getElementById('txt2');
10             var oBtn = document.getElementById('btn1');
11 
12             oBtn.onclick = function () {
13                 var re = /<[^<>]+>/g;    //<内部除了“<>”外的所有字符+>
14                 oTxt2.value = oTxt1.value.replace(re, '');
15             };
16         };
17     </script>
18 </head>
19 <body>
20 <textarea id="txt1" rows="10" cols="100"></textarea><br>
21 <button id="btn1">过滤</button><br>
22 <textarea id="txt2" rows="10" cols="100"></textarea>
23 </body>
24 </html>
View Code

  转义字符:

    . (点:通配符,表示任意字符):尽量少用或不用,因为容易出错

    \d(数字,即0-9——[0-9])

    \w(英文、数字和下划线——[a-z0-9_])

    \s(空白字符:空格、Tab等)

    \D(除了数字——[^0-9])

    \W(除了英文、数字和下划线——[^a-z0-9_])

    \S(除了空白字符:空格、Tab等)

量词:其实就是指某个值出现的次数  

常用量词:

  {n,m},至少出现n次,最多m次

  {n,}  至少n次

  *   任意次,相当于{0,},不建议使用,经常出错,所以几乎用不到

  ?   0次或一次,即可有可无,等价于{0,1}

  +   一次或任意次,即至少一次,等价于{1,}

  {n}  正好出现n次

例子:查找QQ号(目前QQ号大多是为5-11为,且第一个数字不能为0),则有:[1-9]\d{4,10}

 1 <script>
 2     window.onload = function () {
 3         var oTxt = document.getElementById('txt1');
 4         var oBtn = document.getElementById('btn1');
 5 
 6         oBtn.onclick = function () {
 7             var txt = oTxt.value;
 8             var re = /^[1-9]\d{4,10}$/;
 9             if (txt.match(re)) {
10                 alert("这串数字符合QQ号的规则!");
11             } else {
12                 alert("这串数字不符合QQ号的规则!");
13             }
14         };
15     };
16 </script>
17 <body>
18 <input id="txt1" type="text"/>
19 <button id="btn1">检查一串数字是否符合QQ号的规则</button>
20 </body> 

再如:固定电话的号码:区号(第一位为0,共3-4为)(区号可有可无)-号码(一般为8为,首位不能为0)-分机号(一般不超过5位,可有可无),则有:(0\d{2,3}-)?[1-9]\d{7}(-\d{1,5})?

常用正则例子:邮箱(一串英文、数字和下划线组合@一串英文数字组合.一串英文)校验——(\w+@[a-z0-9]+\.[a-z]——其中“\.”表示对“.”的转义,因为“.”在正则表达式中有特殊含义)

  行首:字符串的开头,在正则表达式中用“^”表示行首

  行尾:字符串的结尾,在正则表达式中用“$”表示行尾

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>邮箱校验</title>
 6     <script>
 7         window.onload = function () {
 8             var oTxt = document.getElementById('txt1');
 9             var oBtn = document.getElementById('btn1');
10 
11             oBtn.onclick = function () {
12                 var re = /^\w+@[a-z0-9]+\.[a-z]+$/i;
13 
14                 if (re.test(oTxt.value)) {    //正则自带测试匹配的函数 test
15                     alert("是合法邮箱!");
16                 } else {
17                     alert("邮箱不合法!");
18                 }
19             };
20         };
21         //但是test()有一个小问题:只要字符串的部分符合要求,它就返回true,所以我们要把行首和行尾封住,
22         // 如“/^\w+@[a-z0-9]+\.[a-z]+$/i”,意思就是说,只有和行首和行尾中间的东西匹配成功,才表示匹配成功
23     </script>
24 </head>
25 <body>
26 <input id="txt1" type="text"/>
27 <button id="btn1">邮箱校验</button>
28 </body>
29 </html>
View Code

转载于:https://www.cnblogs.com/han-bky/p/10433498.html


http://chatgpt.dhexx.cn/article/29kCC81y.shtml

相关文章

ansible-playbook部署Docker Swarm集群

通过ansible-playbook&#xff0c;部署Docker Swarm集群。 docker安装目录&#xff1a; /var/lib/dockerdocker命令目录&#xff1a; /usr/bin/dockercompose命令目录&#xff1a; /usr/local/bin/docker-composeweavescope&#xff1a; docker可视化管理工具scope命令目录: …

WebGIS中利用AGS JS+eCharts实现一些数据展示的探索

文章版权由作者李晓晖和博客园共有&#xff0c;若转载请于明显处标明出处&#xff1a;http://www.cnblogs.com/naaoveGIS/。 1.背景 eCharts提供了迁徙图、热点图、夜视图等跟地图能够很好的结合起来的数据展示方式。但是如何将eCharts和我们的AGS JS框架以及自身的地图相结合&…

AngularJS所有版本下载地址

AngularJS官网本身采用AngularJS库构建&#xff0c;页面中的AngularJS库通过Google的CDN&#xff08;内容分发网络&#xff09;引入&#xff0c;所以国内访问会有问题。 大家可以从下面地址获取AngularJS所以版本&#xff1a; https://code.angularjs.org/ 各种版本应有尽有&a…

视频教程-Web前端进阶-AngularJs4从基础到实战-AngularJS

Web前端进阶-AngularJs4从基础到实战 优就业互联网营销首席讲师 精通各大搜索引擎原理&#xff0c;对SEO有深入的研究和独到见解&#xff0c;擅长站内与站外优化与策略部署。熟悉常用的Web项目开发技术&#xff0c;擅长营销型、成交型网站策划&#xff0c;精通织梦、帝国、word…

arcgis js(二)显示三维地图

1、上一节讲了arcgis js入门与提高&#xff08;一&#xff09;加载二维地图arcgis js&#xff08;一&#xff09;显示二维地图_郝大大的博客-CSDN博客&#xff0c;本节继续讲如何加载三维地图&#xff0c;与3.x版本不同&#xff0c;ArcGIS API for JavaScript 3.x版本地图都是显…

【九】坐标格网添加以及调整

一、前言 有些小伙伴应该见过上述这种专业的制图&#xff0c;本节主要是针对上述图片中的坐标格网进行讲解。如果添加并且对其进行设置。 二、具体步骤 1、接上前文的内容继续&#xff0c;首先一样添加相关数据并且切换到布局视图。 2、 单击一下数据格网&#xff0c;然后被选…

AngularJS简单入门教学和使用

前端框架千千万&#xff0c;今天我们来学习简单的AngularJS的入门案例和学习&#xff0c;让我们快速掌握和使用 使用步骤 引入js文件&#xff0c;前端框架首先就是引入js脚本&#xff0c;这里可以去官网上进行下载 <script src"../plugins/angularjs/angular.min.j…

js搭建网站 web服务器,AngularJS如何搭建web服务器?angularjs搭建web服务器的详细过程...

本篇文章主要的介绍了关于angularjs启动web服务器的操作&#xff0c;希望能帮到大家&#xff0c;现在开始看文章吧 安装node.js 下载链接 官网地址&#xff1a; https://nodejs.org/en/ 我下的解压版的&#xff0c;直接解压到你想安装的目录中 在我的电脑(右键)→属性→高级系统…

python画气球_戳气球(python)

问题描述* 有 n 个气球&#xff0c;编号为0 到 n-1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。如果你戳破气球 i &#xff0c;就可以获得 nums[left] * nums[i] * nums[right] 个硬币。 这里的 left 和 right 代…

312. 戳气球(区间dp)

链接&#xff1a;https://leetcode-cn.com/problems/burst-balloons/ 首先这个长度为500的范围可以猜测出是O(n^3)区间dp这里主要讲述为什么状态定义要定义成开区间而不是闭区间 最大的原因&#xff1a;闭区间计算出来的状态是无法保证正确性的 假如使用一开始的闭区间定义去…

Python 算法戳气球

戳气球 题目描述&#xff1a; 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里…

1012-戳气球

题目如下 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 和 i 1 代…

戳气球和布尔运算问题(巨难)

一.大气球的最大得分 1.对应letecode链接 打气球的最大分数_牛客题霸_牛客网 (nowcoder.com) 2.题目描述&#xff1a; 3.解题思路 本题个人觉得本题巨难&#xff1a;主要步骤如下&#xff1a; 1.预处理&#xff1a;为便于处理&#xff0c;可在 nums 数组两端各添加一个哨兵 1&…

经典动态规划:戳气球问题

点击上方蓝字设为星标 东哥带你手把手撕力扣~ 作者&#xff1a;labuladong 公众号&#xff1a;labuladong若已授权白名单也必须保留以上来源信息 今天我们要聊的这道题「Burst Balloon」和之前我们写过的那篇 经典动态规划&#xff1a;高楼扔鸡蛋问题 分析过的高楼扔鸡蛋问题类…

*312戳气球

​​​​​​戳气球 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 …

力扣---戳气球

力扣—戳气球 文章目录 力扣---戳气球一、题目描述二、回溯思路三、动态规划思路四、代码 一、题目描述 有 n 个气球&#xff0c;编号为0 到 n-1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。每当你戳破一个气球 …

【LeetCode】312. 戳气球

312. 戳气球&#xff08;困难&#xff09; 解法一&#xff1a;动态规划 首先看一个区间&#xff1a; 区间(i,j) 是一个开区间&#xff0c;因为我们只能戳爆 i 和 j 之间的气球&#xff0c;不能戳爆索引为 i 和 j 的气球。 我们不妨考虑该区间内被戳爆的最后一个气球&#xff…

LeetCode312:戳气球

要求 有 n 个气球&#xff0c;编号为0 到 n - 1&#xff0c;每个气球上都标有一个数字&#xff0c;这些数字存在数组 nums 中。 现在要求你戳破所有的气球。戳破第 i 个气球&#xff0c;你可以获得 nums[i - 1] * nums[i] * nums[i 1] 枚硬币。 这里的 i - 1 和 i 1 代表和…

【动态规划】LeetCode 312. 戳气球 --区间DP问题

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…

Golang每日一练(leetDay0105) 最小高度树、戳气球

目录 310. 最小高度树 Minimum Height Trees &#x1f31f;&#x1f31f; 312. 戳气球 Burst Balloons &#x1f31f;&#x1f31f;&#x1f31f; &#x1f31f; 每日一练刷题专栏 &#x1f31f; Rust每日一练 专栏 Golang每日一练 专栏 Python每日一练 专栏 C/C每日一…