Heim Web-Frontend js-Tutorial Beispiele für den cleveren Einsatz regulärer Ausdrücke in JavaScript

Beispiele für den cleveren Einsatz regulärer Ausdrücke in JavaScript

Aug 16, 2017 am 10:50 AM
javascript js 表达式

Einige Kinder haben sicher Zweifel und verbringen viel Zeit damit, reguläre Ausdrücke zu lernen, finden aber, dass sie nur zur Überprüfung einer E-Mail-Adresse dienen und für andere Orte grundsätzlich nutzlos sind. Tatsächlich denken die meisten Menschen so Die Leute lernen es einfach nicht, weil sie es schwierig und von geringem Nutzen finden. Wie jeder weiß, müssen Sie mit regulären Ausdrücken experimentieren. Die hervorragenden Open-Source-Bibliotheken und Frameworks auf GitHub sind voll von leistungsstarken regulären Ausdrücken. Der Autor von jQuery war auch als der kleine Prinz der regulären Ausdrücke bekannt . Hier teile ich einige wunderbare Verwendungsmöglichkeiten regulärer Ausdrücke, die ich in meiner Arbeit verwende und die ich überall gesammelt habe.
Es gibt viele Möglichkeiten, eine Anforderung zu erfüllen. Die Weisen haben unterschiedliche Meinungen. Hier ist nur ein vergleichendes Denken, um das Interesse aller am Lernen von Regeln zu wecken und das Denken über die Anwendung von Regeln zu entwickeln.
Als Front-End-Entwickler verfügen Sie immer über Ihre eigenen einzigartigen Fähigkeiten. Schließlich ist die Front-End-Entwicklung anders als die Back-End-Entwicklung Bandbreite und verringern die Effizienz. Regulärer Ausdruck (Regulärer Ausdruck), das ist eine harte Nuss, aber es ist köstlich, daran herumzukauen. Deshalb zeige ich Ihnen heute auch einige Tricks regulärer Ausdrücke.
Zhengzhen Dafa ist gut, Zhengzhen Dafa ist gut, Zhengzhen Dafa ist gut, sag wichtige Dinge dreimal.
1. Holen Sie sich den Wert des Links https://www.baidu.com?name=jawil&age=23 name
Nicht reguläre Implementierung:

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"
Nach dem Login kopieren


Verwenden Sie zur Implementierung reguläre Ausdrücke:

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"
Nach dem Login kopieren


Wenn Sie es nicht verstehen, lesen Sie bitte zuerst diesen Artikel: [JS Advanced] test, exec, match , ersetzen

2. Zahlenformatierungsproblem, 1.234.567.890

Nicht reguläre Implementierung:

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
Nach dem Login kopieren


Verwenden Sie reguläre Ausdrücke zur Implementierung:

let test1 = &#39;1234567890&#39;let format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, &#39;,&#39;)
 console.log(format) // 1,234,567,890
Nach dem Login kopieren


Das Folgende ist eine kurze Analyse des regulären Ausdrucks /B(?=(d{3}) +(?!d))/g:

/B(?=(d{3})+(?!d))/g: Reguläre passende Grenze B, der Grenze muss (d) folgen {3})+(?!d);
(d {3})+: Muss 1 oder mehr 3 aufeinanderfolgende Zahlen sein;
(?!d): Die 3 Zahlen in Schritt 2 dürfen nicht sein folgen Zahlen;
(d{3} )+(?!d): Der passenden Grenze müssen also 3*n (n>=1) Zahlen folgen.
Ersetzen Sie schließlich alle übereinstimmenden Grenzen, um das Ziel zu erreichen.

3. Entfernen Sie die Leerzeichen auf der linken und rechten Seite der Zeichenfolge, „jaw il“ --> „jaw il“

Nicht reguläre Implementierung:

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"
Nach dem Login kopieren


Verwenden Sie reguläre Ausdrücke zur Implementierung:

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


4. Bestimmen Sie, ob eine Zahl eine Primzahl 3 ist --> ; wahr
Primzahlen werden auch Primzahlen genannt. Bezieht sich auf eine natürliche Zahl größer als 1, die nicht durch andere natürliche Zahlen außer 1 und der ganzen Zahl selbst teilbar ist.
Nicht-reguläre Implementierung:

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
Nach dem Login kopieren

Regelmäßige Implementierung:

function isPrime(num) {return !/^1?$|^(11+?)\1+$/.test(Array(num+1).join(&#39;1&#39;))}
 console.log(isPrime(19)) // true
Nach dem Login kopieren

要使用这个正规则表达式,你需要把自然数转成多个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"]
Nach dem Login kopieren

②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"]
Nach dem Login kopieren

③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"]
Nach dem Login kopieren

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

Das obige ist der detaillierte Inhalt vonBeispiele für den cleveren Einsatz regulärer Ausdrücke in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS Dec 17, 2023 pm 06:55 PM

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen in PHP und JS. Mit der rasanten Entwicklung des Internets und der Technologie ist der Aktienhandel für viele Anleger zu einer wichtigen Möglichkeit geworden. Die Aktienanalyse ist ein wichtiger Teil der Anlegerentscheidung, und Kerzendiagramme werden häufig in der technischen Analyse verwendet. Wenn Sie lernen, wie man Kerzendiagramme mit PHP und JS zeichnet, erhalten Anleger intuitivere Informationen, die ihnen helfen, bessere Entscheidungen zu treffen. Ein Candlestick-Chart ist ein technischer Chart, der Aktienkurse in Form von Candlesticks anzeigt. Es zeigt den Aktienkurs

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Die Technologie zur Gesichtserkennung und -erkennung ist bereits eine relativ ausgereifte und weit verbreitete Technologie. Derzeit ist JS die am weitesten verbreitete Internetanwendungssprache. Die Implementierung der Gesichtserkennung und -erkennung im Web-Frontend hat im Vergleich zur Back-End-Gesichtserkennung Vor- und Nachteile. Zu den Vorteilen gehören die Reduzierung der Netzwerkinteraktion und die Echtzeiterkennung, was die Wartezeit des Benutzers erheblich verkürzt und das Benutzererlebnis verbessert. Die Nachteile sind: Es ist durch die Größe des Modells begrenzt und auch die Genauigkeit ist begrenzt. Wie implementiert man mit js die Gesichtserkennung im Web? Um die Gesichtserkennung im Web zu implementieren, müssen Sie mit verwandten Programmiersprachen und -technologien wie JavaScript, HTML, CSS, WebRTC usw. vertraut sein. Gleichzeitig müssen Sie auch relevante Technologien für Computer Vision und künstliche Intelligenz beherrschen. Dies ist aufgrund des Designs der Webseite erwähnenswert

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Einführung in die Verwendung von JavaScript und WebSocket zur Implementierung eines Online-Bestellsystems in Echtzeit: Mit der Popularität des Internets und dem Fortschritt der Technologie haben immer mehr Restaurants damit begonnen, Online-Bestelldienste anzubieten. Um ein Echtzeit-Online-Bestellsystem zu implementieren, können wir JavaScript und WebSocket-Technologie verwenden. WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine bidirektionale Kommunikation zwischen Client und Server in Echtzeit realisieren kann. Im Echtzeit-Online-Bestellsystem, wenn der Benutzer Gerichte auswählt und eine Bestellung aufgibt

PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen Dec 18, 2023 pm 03:39 PM

Mit der rasanten Entwicklung der Internetfinanzierung sind Aktieninvestitionen für immer mehr Menschen zur Wahl geworden. Im Aktienhandel sind Kerzendiagramme eine häufig verwendete Methode der technischen Analyse. Sie können den sich ändernden Trend der Aktienkurse anzeigen und Anlegern helfen, genauere Entscheidungen zu treffen. In diesem Artikel werden die Entwicklungskompetenzen von PHP und JS vorgestellt, der Leser wird zum Verständnis des Zeichnens von Aktienkerzendiagrammen geführt und es werden spezifische Codebeispiele bereitgestellt. 1. Aktien-Kerzendiagramme verstehen Bevor wir uns mit dem Zeichnen von Aktien-Kerzendiagrammen befassen, müssen wir zunächst verstehen, was ein Kerzendiagramm ist. Candlestick-Charts wurden von den Japanern entwickelt

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Einführung: Heutzutage ist die Genauigkeit von Wettervorhersagen für das tägliche Leben und die Entscheidungsfindung von großer Bedeutung. Mit der Weiterentwicklung der Technologie können wir genauere und zuverlässigere Wettervorhersagen liefern, indem wir Wetterdaten in Echtzeit erhalten. In diesem Artikel erfahren Sie, wie Sie mit JavaScript und WebSocket-Technologie ein effizientes Echtzeit-Wettervorhersagesystem aufbauen. In diesem Artikel wird der Implementierungsprozess anhand spezifischer Codebeispiele demonstriert. Wir

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

See all articles