正则表达式的基础知识

不减20斤不改头像
71 阅读1分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情

正则表达式能干啥

举例：
有如下字符串，假设想把字符串中的数字都提取出来，如果没有正则，那么就用js来实现

var str = 'abcde88fegefaasdf81293';

js可以用以下代码来实现

  var numbs = [...str].filter(n => !Number.isNaN(parseInt(n)))
  console.log(numbs)

代码还算简单，但是还是不太优雅。 用这则表达式实现如下

    var numbs = str.match(/\d/g)
    console.log(numbs)

非常简单，且清晰。

创建正则的方式

一种是直接定义用//包裹起来

var reg=/abc/

另一种是使用构造函数创建

 var str = 'abcde88fegefaasdf81293';
 var reg = new RegExp('#', 'g');
 console.log(reg.test(str))

实际小例子

页面有个查找功能，根据用户数据的内容检索，支持正则表达式，将用户输入的参数，当场正则第一个参数创建一个正则，然后利用replace方法，替换匹配的字符用红色的span包裹一下，显示高亮

<body>
    <div class="content"> shizebangshigoulanzi</div>
    <div onclick="find()">查找</div>
</body>
<script>
    function find() {
        var str = prompt('请输入要检索的内容,支持正则');
        var reg = new RegExp(str, 'g');
        var content = document.querySelector('div');
        content.innerHTML = content.innerText.replace(reg, (key) => {
            return `<span style="color:red">${key}</span>`
        })
    }
</script>

基本语法

或者的语法 下面语法表示，tom或者jarry,不是m或者j

    var str = 'tomisshizebang';
    var reg = /tom|jarry/
    console.log(reg.test(str))

举例子，使用正则来匹配北京和上海的电话号码。

   var str = '010-12345';
    var reg = /^(010|020)\-\d{5,8}$/
    console.log(reg.test(str))

正则里使用前面匹配的分组，使用变量引用

有一些前后相同的字符串，匹配内容，就需要这个正则解决，一直记不住，/1 /2 对应在js里就是11 2

    var str = 'abcdefg@@3435435abcdefg';
    var reg = /(abcdefg)(.*)\1$/
    console.log(str.match(reg))

转义

d表示字符b /d表示数字0-9 .表示任意字符 /.表示普通. 举个例子 字符串中出现一个/会被认为是转义符号，但是在字符串中\d转义后还是d,'\d'==='d',所以当使用构造函数创建正则时，必须使用\表示\

  var price = 102.23;
    var reg = /^\d+\.\d+$/;
    var reg2 = new RegExp('^\\d+\\.\\d+$')
    console.log(`/^\d+\.\d+$/`)
    // /^d+.d+$/
    console.log(reg.test(price))
    console.log(reg2.test(price))
avatar
文章
阅读
粉丝