42、正则表达式

最新推荐文章于 2024-09-14 19:53:40 发布

雪花酥01

最新推荐文章于 2024-09-14 19:53:40 发布

阅读量166

点赞数 1

分类专栏：大前端 # JavaScript 文章标签：正则表达式前端 javascript html

本文链接：https://blog.csdn.net/shuozai1204/article/details/141559922

版权

大前端同时被 2 个专栏收录

164 篇文章 0 订阅

订阅专栏

JavaScript

43 篇文章 0 订阅

订阅专栏

一、substring模拟打字效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>substring模拟打字效果</title>
    <style type="text/css">
      .text {
        display: none;
      }
    </style>
  </head>
  <body>
    <p class="text">今天星期一，明天星期二，后天星期三</p>
    <div>
      <p class="showText"></p>
    </div>
  </body>
</html>
<script type="text/javascript">
  var text = document.querySelector(".text");
  var showText = document.querySelector(".showText");
  // 定义一个累加器
  var i = 0;
  function sub() {
    // 将text里面的文字每隔300毫秒输出一个字符给showText
    showText.innerText = text.innerText.substring(0, i) + "|";
    // 每次执行完函数 i加1
    i++;
    if (showText.innerText == text.innerText) {
      clearInterval(timer);
    }
  }
  sub();

  var timer = setInterval(sub, 300);
</script>

二、验证码输入框

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>验证码输入框</title>
  </head>
  <body>
    <label for="zgc">姓名</label>
    <input type="text" name="" id="zgc" placeholder="请输入姓名" />
    <span>请输入2-8位的姓名</span>
  </body>
</html>
<script type="text/javascript">
  // 获取输入框和span
  var user = document.querySelector("#zgc");
  var span = document.querySelector("span");

  // 失去焦点和键盘抬起的时候
  user.onkeyup = user.onblur = function () {
    console.log(this); // user
    // 判断输入框内容是否为空 如果为空的话 那么修改span里面的文字为姓名不能为空 并且修改字体颜色为红色
    if (this.value == "") {
      span.innerHTML = "姓名不能为空";
      span.style.color = "red";
    }
    // 判断输入框中内容的长度如果是2-8位 那么span显示姓名输入正确 并且修改字体颜色为绿色
    else if (this.value.length >= 2 && this.value.length <= 8) {
      span.innerText = "姓名输入正确";
      span.style.color = "green";
    } else {
      span.innerHTML = "姓名输入格式错误";
      span.style.color = "red";
    }
  };
</script>

三、创建正则表达式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建正则表达式</title>
  </head>
  <body></body>
</html>
<script type="text/javascript">
  // 正则表达式：正则表达式就是一串符号，用来约束规定，把一些字母和符号写在//中间的东西，就叫正则表达式。比如/abcd/
  // var re = new RegExp('f') // 使用RegExp创建了一个名为re的正则表达式对象
  var re = /f/;
  var str = "abcdefg";
  /*
        test：用于检测字符串是否符合正则表达式的条件 符合返回true 不符合返回false
        match：把匹配到的东西全部提取出来
        replace：替换所有相匹配的字符串
    */
  console.log(str.search(re)); // 5
  console.log(re.test(str)); //true

  // \d 查找字符串中所有的数字
  // g 代表全部匹配
  var re1 = /\d+/g;
  var str1 = "asdas112asd555asd asd54";
  console.log(str1.match(re1));

  // 匹配字母a
  var re2 = /a/g;
  var str2 = "abc aaa asd1kausdha";
  console.log(str2.replace(re2, "0"));
</script>

四、元字符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>元字符</title>
  </head>
  <body></body>
</html>
<script type="text/javascript">
  // 元字符是正则表达式中具有特殊意义的字符
  // 比如说  \d 匹配单个数字  \w 匹配数字字母下划线...
  var str = "12yhdus_sj42sad223";
  var reg1 = /\d/g;
  var reg2 = /\d\d/g;
  var reg3 = /\d\d\d/g;
  // var reg4 = /d+/g
  // 找出字符串中的单个数字
  console.log(str.match(reg1));
  // 找出字符串中的成对数字
  console.log(str.match(reg2));
  // 找出字符串中的连续三个数字
  console.log(str.match(reg3));
  // console.log(str.match(reg4))

  // replace 将符合条件的字符替换成*
  var str1 = "acds艹";
  var reg4 = /a|c|艹/g;
  console.log(str1.replace(reg4, "*"));

  // \w匹配字母数字或者下划线
  var reg5 = /\w/g;
  var str2 = "qs_ew2";
  console.log(reg5.test(str2));

  // \s 查找空格
  var str3 = "1 2 3 4";
  var reg6 = /\s/g;
  console.log(str3.match(reg6));
</script>

五、敏感词过滤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>敏感词过滤</title>
  </head>
  <body>
    <textarea name="" id="txt1" cols="40" rows="10"></textarea>
    <br />
    <input type="button" value="过滤" id="btn1" />
    <br />
    <textarea name="" id="txt2" cols="40" rows="10"></textarea>
  </body>
</html>
<script type="text/javascript">
  var oTxt1 = document.getElementById("txt1");
  var oTxt2 = document.getElementById("txt2");
  var oBtn = document.getElementById("btn1");

  oBtn.onclick = function () {
    var reg = /聪明/g;
    oTxt2.value = oTxt1.value.replace(reg, "*");
  };
</script>

六、限定符

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>限定符</title>
  </head>
  <body></body>
</html>
<script type="text/javascript">
  /*
        限定符：限定单个字符出现在中括号里面

        [a-z]：表示a-z中的任意小写字母
        [A-Z]：表示A-Z中的任意大写字母
        [A-z]：表示任意字母
    */
  // var str = 'KAJFIJAIJFEIEFKEFIAJIDSJKJ'
  // var reg = /[a-z]/
  // console.log(reg.test(str))
  var str = "akdfijfincdsafadjdsojgosajbfa";
  // 检测的是[]里任意一个字母和fa的组合
  var reg = /[abc]fa/g;
  console.log(str.match(reg));

  var str1 = "abc";
  // 在限定符中取非^是排除的意思
  var reg1 = /[^abc]/g;
  console.log(reg1.test(str1)); // false

  var str2 = "a123";
  var reg2 = /[4-9]/;
  console.log(reg2.test(str2)); //false

  var str3 = "a_bc_123_BCD__";
  var reg3 = /[a-zA-Z0-9]/g;
  console.log(str3.match(reg3));
</script>

七、边界

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>边界</title>
  </head>
  <body></body>
</html>
<script type="text/javascript">
  // ^ 在限定符里面取非是排除的意思
  // ^ 在边界里面 代表以什么字符开头
  // $ 在边界中是以什么字符结尾
  // 限定符[^abc]  边界 ^[abc]
  // 以字符a-z开头 0-9的数字
  var reg = /^[a-z][0-9]/;
  var str = "s12345";
  console.log(reg.test(str)); // true

  // 以ab开头的
  var reg1 = /^ab/;
  console.log(reg1.test("acd"));

  // 以数字结尾
  var reg2 = /[0-9]$/;
  var str2 = "asdfk1224e5";
  console.log(reg2.test(str2));
</script>

八、量词

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>量词</title>
  </head>
  <body></body>
</html>
<script type="text/javascript">
  // i 不区分大小写
  // g 全部匹配
  var reg0 = /[a-z][0-9]+/gi;
  var str0 = "FAF7AWEFOADN8DIGS";
  // 匹配字母加数字的组合
  console.log(str0.match(reg0));

  // 以数字开头以数字结尾 数字的长度是5
  var reg1 = /^\d\d\d\d\d$/g;
  var str1 = "23456";
  console.log(reg1.test(str1)); // true

  // 高端方法
  var reg2 = /^\d{5}$/g;
  console.log(reg2.test(str1));

  // 限制6-11位的数字
  var reg3 = /^\d{6,11}$/;
  var str3 = "12345";
  console.log(reg3.test(str3));

  // 手机号验证
  var reg4 = /^(13|14|18)[0-9]{9}$/g;
  var str4 = "13377773337";
  console.log(reg4.test(str4));
</script>