JavaScript에서 정규 표현식을 영리하게 사용한 예

어떤 아이들은 의구심이 들고 정규식을 배우는데 많은 시간을 소비하지만 쓸모가 없다는 것을 알게 될 것입니다. 정규식은 단지 이메일 주소를 확인하기 위한 것일 뿐이고 다른 곳에서는 기본적으로 쓸모가 없기 때문에 실제로 대부분의 사람들이 그렇게 생각합니다. 사람들은 단순히 그것을 배우지 않고 그것이 어렵고 거의 쓸모가 없다고 생각합니다. 모두가 알고 있듯이 프로그래밍 전문가가 되려면 정규식을 사용해야 합니다. GitHub의 뛰어난 오픈 소스 라이브러리와 프레임워크는 강력한 정규식으로 가득 차 있습니다. jQuery의 저자는 정규식의 어린 왕자로도 알려져 있습니다. . 여기에서는 제가 작업에 사용하고 개발자의 지혜가 어디에서나 빛을 발하는 멋진 정규식 사용법을 공유합니다.
요구 사항을 달성하는 방법에는 여러 가지가 있습니다. 어느 것이 더 낫습니까? 여기서는 규칙 학습에 대한 모든 사람의 관심을 자극하고 규칙을 효과적으로 적용하는 사고력을 개발하기 위한 비교 사고만 제공합니다.
프론트엔드 개발자는 항상 자신만의 고유한 기술을 가지고 있습니다. 결국 프론트엔드 개발은 백엔드와 다릅니다. 코드가 중복되면 최소한 대역폭에 영향을 미치게 됩니다. , 그리고 효율성은 기껏해야 감소될 것입니다. 정규식(Regular Expression), 씹기 힘든 견과류인데 씹어먹으니 맛있네요. 그래서 오늘은 정규 표현식의 몇 가지 요령도 보여 드리겠습니다.
정전대법은 좋다, 정전대법은 좋다, 정전대법은 좋다, 중요한 말을 세 번 한다.
1. 링크 값 가져오기 https://www.baidu.com?name=jawil&age=23
비정기 구현:

function getParamName(attr) { 
  let search = window.location.search // "?name=jawil&age=23" 
  let param_str = search.split('?')[1] // "name=jawil&age=23" 
  let param_arr = param_str.split('&') // ["name=jawil", "age=23"] 
  let filter_arr = param_arr.filter(ele => { // ["name=jawil"]    return ele.split('=')[0] === attr  }) 
  return decodeURIComponent(filter_arr[0].split('=')[1])}
 console.log(getParamName('name')) // "jawil"

정규 구현 사용:

function getParamName(attr) { 
  let match = RegExp(`[?&]${attr}=([^&]*)`) //分组运算符是为了把结果存到exec函数返回的结果里    .exec(window.location.search)  //["?name=jawil", "jawil", index: 0, input: "?name=jawil&age=23"]  return match && decodeURIComponent(match[1].replace(/\+/g, ' ')) // url中+号表示空格,要替换掉}
   console.log(getParamName('name'))  // "jawil"

잘 이해가 안 된다면 먼저 배워보세요: [JS Advanced] test, exec, match, replacement

2. 숫자 형식 문제, 1234567890 --> 1,234,567,890

비정규 구현:

let test = '1234567890'
function formatCash(str) {
    let arr = []
    for (let i = 1; i < str.length; i--) {
        if (str.length % 3 && i == 1) arr.push(str.substr(0, str.length % 3)) if (i % 3 === 0) arr.push(str.substr(i - 2, 3))
    }
    return arr.join(&#39;,&#39;)
}
console.log(formatCash(test)) // 1,234,567,890

정규 규칙으로 구현됨 ：

let test1 = '1234567890'let format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
 console.log(format) // 1,234,567,890

정규 규칙을 간략하게 분석해 보겠습니다. /B(?=(d{3})+(?!d))/g:

/B(?=(d{3} )+(?!d ))/g: 정규 일치 경계 B, 경계 뒤에는 (d{3})+(?!d);
(d{3})+: 1 이상이어야 합니다 3 연속 숫자;
(?!d): 2단계의 3개 숫자 뒤에는 숫자가 올 수 없습니다.
(d{3})+(?!d): 따라서 일치하는 경계 뒤에는 3*n이 와야 합니다. (n>=1) 숫자입니다.
마지막으로 목표를 달성하려면 일치하는 경계를 모두 교체하세요.

3 " jaw il " --> "jaw il" 문자열의 왼쪽과 오른쪽 공백을 제거합니다.

비정기 구현:

function trim(str) {
    let start,
    end
    for (let i = 0; i < str.length; i++) {
        if (str[i] !== &#39; &#39;) {
            start = i
            break
        }
    }
    for (let i = str.length - 1; i > 0; i--) {
        if (str[i] !== &#39; &#39;) {
            end = i
            break
        }
    }
    return str.substring(start, end - 1)
}
let str = "  jaw il "console.log(trim(str)) // "jaw il"

정기 구현:

function trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, "")
}
let str = "  jaw il "console.log(trim(str)) // "jaw il"

4. 판단은 소수 3 --> true
소수는 소수라고도 합니다. 1과 정수 그 자체를 제외한 다른 자연수로 나누어지지 않는 1보다 큰 자연수를 말한다.
비정기 구현:

function isPrime(num){    // 不是数字或者数字小于2    
if(typeof num !== "number" || !Number.isInteger(num)){　　　　　// Number.isInterget 判断是否为整数        return false    } 
    //2是质数    
    if(num == 2){     
       return true   
        }else
        if(num % 2 == 0){  //排除偶数       
         return false  
           }    //依次判断是否能被奇数整除，最大循环为数值的开方 
   let squareRoot = Math.sqrt(num)    //因为2已经验证过，所以从3开始；且已经排除偶数，所以每次加2    for(let i = 3; i <= squareRoot; i += 2) {      if (num % i === 0) {         return false      }    }    return true}
 console.log(isPrime(19)) // true

정기 구현:

function isPrime(num) {return !/^1?$|^(11+?)\1+$/.test(Array(num+1).join('1'))}
 console.log(isPrime(19)) // true

要使用这个正规则表达式，你需要把自然数转成多个1的字符串，如：2 要写成 “11”， 3 要写成 “111”, 17 要写成“11111111111111111”，这种工作使用一些脚本语言可以轻松的完成，JS实现也很简单，我用Array(num+1).join('1')这种方式实现了一下。
一开始我对这个表达式持怀疑态度，但仔细研究了一下这个表达式，发现是非常合理的，下面，让我带你来细细剖析一下是这个表达式的工作原理。
首先，我们看到这个表达式中有“|”，也就是说这个表达式可以分成两个部分：/^1?$/ 和 /^(11+?)\1+$/
第一部分：/^1?$/， 这个部分相信不用我多说了，其表示匹配“空串”以及字串中只有一个“1”的字符串。
第二部分：/^(11+?)\1+$/ ，这个部分是整个表达式的关键部分。其可以分成两个部分，(11+?) 和 \1+$ ，前半部很简单了，匹配以“11”开头的并重复0或n个1的字符串，后面的部分意思是把前半部分作为一个字串去匹配还剩下的字符串1次或多次（这句话的意思是——剩余的字串的1的个数要是前面字串1个数的整数倍）。
可见这个正规则表达式是取非素数，要得到素数还得要对整个表达式求反。通过上面的分析，我们知道，第二部分是最重要的，对于第二部分，举几个例子，
示例一：判断自然数8。我们可以知道，8转成我们的格式就是“11111111”，对于 (11+?) ，其匹配了“11”，于是还剩下“111111”，而 \1+$ 正好匹配了剩下的“111111”，因为，“11”这个模式在“111111”出现了三次，符合模式匹配，返回true。所以，匹配成功，于是这个数不是质数。
示例二：判断自然数11。转成我们需要的格式是“11111111111”（11个1），对于 (11+?) ，其匹配了“11”（前两个1），还剩下“111111111”（九个1），而 \1+$ 无法为“11”匹配那“九个1”，因为“11”这个模式并没有在“九个1”这个串中正好出现N次。于是，我们的正则表达式引擎会尝试下一种方法，先匹配“111”（前三个1），然后把“111”作为模式去匹配剩下的“11111111”（八个1），很明显，那“八个1”并没有匹配“三个1”多次。所以，引擎会继续向下尝试……直至尝试所有可能都无法匹配成功。所以11是素数。
通过示例二，我们可以得到这样的等价数算算法，正则表达式会匹配这若干个1中有没有出现“二个1”的整数倍，“三个1”的整数倍，“四个1”的整数倍……，而，这正好是我们需要的算素数的算法。现在大家明白了吧。
5、字符串数组去重 ["a","b","c","a","b","c"] --> ["a","b","c"]
这里只考虑最简单字符串的数组去重，暂不考虑，对象，函数，NaN等情况，这种用正则实现起来就吃力不讨好了。
非正则实现：
①ES6实现

let str_arr=["a","b","c","a","b","c"] function unique(arr){  return [...new Set(arr)]}
 console.log(unique(str_arr)) // ["a","b","c"]

②ES5实现

var str_arr = ["a", "b", "c", "a", "b", "c"] function unique(arr) {    return arr.filter(function(ele, index, array) {        return array.indexOf(ele) === index    })}
 console.log(unique(str_arr)) // ["a","b","c"]

③ES3实现

var str_arr = ["a", "b", "c", "a", "b", "c"]
function unique(arr) {
    var obj = {},
    array = []
    for (var i = 0,
    len = arr.length; i < len; i++) {
        var key = arr[i] + typeof arr[i]
        if (!obj[key]) {
            obj[key] = true array.push(arr[i])
        }
    }
    return array
}
console.log(unique(str_arr)) // ["a","b","c"]

额，ES4呢。。。对不起，由于历史原因，ES4改动太大，所以被废弃了。
可以看到从ES3到ES6，代码越来越简洁，JavaScript也越来越强大。

위 내용은 JavaScript에서 정규 표현식을 영리하게 사용한 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!