Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie reguläre Ausdrücke in Javascript

小云云
Freigeben: 2018-01-05 17:57:44
Original
1712 Leute haben es durchsucht

Reguläre Ausdrücke mögen in den Köpfen der Menschen eine Ansammlung unverständlicher Zeichen sein, aber es sind diese Symbole, die effiziente Operationen an Zeichenfolgen ermöglichen. Regulärer Ausdruck (Regulärer Ausdruck) ist eine grammatikalische Spezifikation einer einfachen Sprache. Es ist ein leistungsstarkes, praktisches und effizientes Textverarbeitungstool. Es wird in einigen Methoden zum Implementieren von Such-, Ersetzungs- und Extraktionsvorgängen für Informationen in Zeichenfolgen verwendet. Das Problem selbst ist nicht kompliziert, aber ohne reguläre Ausdrücke wird es zu einem großen Problem. Reguläre Ausdrücke in JavaScript sind sehr wichtige Kenntnisse. In diesem Artikel wird die grundlegende Syntax regulärer Ausdrücke vorgestellt.

Definition

Regulärer Ausdruck (Regulärer Ausdruck) ist eine grammatikalische Spezifikation einer einfachen Sprache. Er wird in einigen Methoden zur Verarbeitung von Zeichenfolgen verwendet. Die Informationen in realisieren Such-, Ersetzungs- und Extraktionsoperationen.

Reguläre Ausdrücke in JavaScript werden durch RegExp-Objekte dargestellt. Es gibt zwei Schreibweisen: die eine ist wörtliches Schreiben; die andere ist das Konstruktorschreiben Ausdrücke sind besonders nützlich für die Verarbeitung von Zeichenfolgen. Es gibt viele Stellen, an denen reguläre Ausdrücke in JavaScript verwendet werden können. Dieser Artikel fasst die Grundkenntnisse über reguläre Ausdrücke und die Verwendung regulärer Ausdrücke in JavaScript zusammen.

Der erste Teil listet kurz die Verwendungsszenarien regulärer Ausdrücke in JavaScript auf. Der zweite Teil führt detailliert in die Grundkenntnisse regulärer Ausdrücke ein und schreibt einige Beispiele zum leichteren Verständnis.

Der Inhalt dieses Artikels ist meine eigene Zusammenfassung, nachdem ich die Schreibmethode für reguläre Ausdrücke und das Kapitel über js-reguläre Ausdrücke im Rhino-Buch gelesen habe. Daher kann der Inhalt Auslassungen und Ungenauigkeiten aufweisen. Sollten Experten vorbeikommen und Fehler im Artikel finden, korrigieren Sie diese bitte!

Die Verwendung regulärer Ausdrücke in Javascript

Ein regulärer Ausdruck kann als charakteristische Beschreibung eines Zeichenfragments betrachtet werden. Seine Funktion besteht darin, die Bedingungen herauszufinden, die die Bedingung aus a erfüllen Reihe von Zeichenfolgen, Teilzeichenfolge. Wenn ich beispielsweise in JavaScript einen regulären Ausdruck definiere:


, dann kann dieser reguläre Ausdruck verwendet werden, um das Wort Hallo aus einer Reihe von Zeichenfolgen zu finden. Das Ergebnis der Aktion „Suchen“ kann darin bestehen, die Position des ersten Hallos zu finden, „Hallo“ durch eine andere Zeichenfolge zu ersetzen, alle Hallos zu finden usw. Nachfolgend finden Sie eine Liste von Funktionen, die reguläre Ausdrücke in JavaScript verwenden können. Im zweiten Teil wird eine kurze Einführung in die Funktionen dieser Funktionen gegeben.
var reg=/hello/  或者 var reg=new RegExp("hello")
Nach dem Login kopieren

String.prototype.search-Methode

wird verwendet, um den Index des ersten Vorkommens eines bestimmten Teilstrings im Originalstring zu finden. Andernfalls wird -1 zurückgegeben


String.prototype.replace-Methode
"abchello".search(/hello/); // 3
Nach dem Login kopieren

wird verwendet, um Teilzeichenfolgen in der Zeichenfolge


zu ersetzen String.prototype Die .split-Methode
"abchello".replace(/hello/,"hi");  // "abchi"
Nach dem Login kopieren

wird zum Teilen der Zeichenfolge


String.prototype.match-Methode
"abchelloasdasdhelloasd".split(/hello/); //["abc", "asdasd", "asd"]
Nach dem Login kopieren

wird verwendet, um Teilzeichenfolgen aus einer Zeichenfolge in einem Array zu erfassen. Standardmäßig wird nur ein Ergebnis im Array erfasst. Wenn der reguläre Ausdruck das Attribut „globale Erfassung“ hat (fügen Sie beim Definieren des regulären Ausdrucks den Parameter g hinzu), werden alle Ergebnisse im Array erfasst


Die Leistung der Match-Methode ist unterschiedlich, unabhängig davon, ob der als Match-Parameter verwendete reguläre Ausdruck globale Attribute hat oder nicht, was später in der Gruppierung regulärer Ausdrücke besprochen wird.

"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
Nach dem Login kopieren
RegExp.prototype.test-Methode

wird verwendet, um zu testen, ob die Zeichenfolge Teilzeichenfolgen enthält


RegExp.prototype Die . Die Exec-Methode

/hello/.test("abchello"); // true
Nach dem Login kopieren
ähnelt der Match-Methode einer Zeichenfolge. Diese Methode erfasst ebenfalls Zeichenfolgen, die die Bedingungen aus der Zeichenfolge erfüllen, es gibt jedoch zwei Unterschiede.

1. Die exec-Methode kann jeweils nur einen Teilstring in einem Array erfassen, unabhängig davon, ob der reguläre Ausdruck globale Attribute hat


2. Das reguläre Ausdrucksobjekt (d. h. das RegExp-Objekt in JavaScript) verfügt über ein lastIndex-Attribut, das verwendet wird, um anzugeben, wo mit der Erfassung beim nächsten Mal begonnen werden soll. Nach jeder Ausführung der exec-Methode wird der lastIndex zurückgeschoben, bis keine Übereinstimmung mehr vorliegt Das Zeichen wurde gefunden. Geben Sie null zurück und beginnen Sie erneut mit der Erfassung. Diese Eigenschaft kann zum Durchlaufen von Teilzeichenfolgen in einer erfassten Zeichenfolge verwendet werden.

var reg=/hello/g;
reg.exec("abchelloasdasdhelloasd");  // ["hello"]
Nach dem Login kopieren


Grundlagen regulärer Ausdrücke

var reg=/hello/g;
reg.lastIndex; //0
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //8
reg.exec("abchelloasdasdhelloasd"); // ["hello"]
reg.lastIndex; //19
reg.exec("abchelloasdasdhelloasd"); // null
reg.lastIndex; //0
Nach dem Login kopieren
Metazeichen

Der erste Abschnitt oben verwendet /hello/ als Beispiel, aber praktische Anwendungen Möglicherweise stoßen Sie auf folgende Anforderungen: Übereinstimmung mit einer Zeichenfolge unsicherer Zahlen, Übereinstimmung mit der Startposition, Übereinstimmung mit der Endposition und Übereinstimmung mit Leerzeichen. Hier können Metazeichen verwendet werden.

Metazeichen:


Antonym-Metazeichen, das beispielsweise durch Ändern der oben genannten Kleinbuchstaben in Großbuchstaben geschrieben wird, stimmt mit allen Zeichen überein, die keine Zahl sind :D

//匹配数字: \d
"ad3ad2ad".match(/\d/g); // ["3", "2"]
//匹配除换行符以外的任意字符: .
"a\nb\rc".match(/./g); // ["a", "b", "c"]
//匹配字母或数字或下划线 : \w
"a5_ 汉字@!-=".match(/\w/g); // ["a", "5", "_"]
//匹配空白符:\s
"\n \r".match(/\s/g); //[" ", " ", ""] 第一个结果是\n,最后一个结果是\r
//匹配【单词开始或结束】的位置 : \b
"how are you".match(/\b\w/g); //["h", "a", "y"] 
// 匹配【字符串开始和结束】的位置: 开始 ^ 结束 $
"how are you".match(/^\w/g); // ["h"]
Nach dem Login kopieren
Es gibt auch einige Metazeichen, die zur Darstellung von Wiederholungen verwendet werden, die im folgenden Inhalt vorgestellt werden.

Zeichenbereich

Verwenden Sie das Symbol - in [], um einen Zeichenbereich darzustellen. Zum Beispiel:


Wiederholung & Gier und Faulheit

// 匹配字母 a-z 之间所有字母
/[a-z]/
// 匹配Unicode中 数字 0 到 字母 z 之间的所有字符
/[0-z]/ 
// unicode编码查询地址:
//https://en.wikibooks.org/wiki/Unicode/Character_reference/0000-0FFF
//根据上面的内容,我们可以找出汉字的Unicode编码范围是 \u4E00 到 \u9FA5,所以我们可以写一个正则表达式来判断一个字符串中是否有汉字
/[\u4E00-\u9FA5]/.test("测试"); // true
Nach dem Login kopieren
Lassen Sie uns zunächst über Wiederholungen sprechen, wenn wir einige wiederholte Zeichen zuordnen möchten. Wir müssen es verwenden. Einige reguläre Ausdrücke im Zusammenhang mit Wiederholungen werden wie folgt geschrieben:


Wie Sie aus den obigen Ergebnissen ersehen können, kann die Zahl nach dem Zeichentest dies tun 0 oder öfter wiederholt werden Wenn der vom regulären Ausdruck erfasste Teilstring so viele Zahlen wie möglich zurückgibt. Wenn /testd*/ beispielsweise mit test123 übereinstimmt, wird test123 anstelle von test oder test12 zurückgegeben.

正则表达式捕获字符串时,在满足条件的情况下捕获尽可能多的字符串,这就是所谓的“贪婪模式”。

对应的”懒惰模式“,就是在满足条件的情况下捕获尽可能少的字符串,使用懒惰模式的方法,就是在字符重复标识后面加上一个 "?",写法如下


// 数字重复3~5次,满足条件的情况下返回尽可能少的数字
"test12345".match(/test\d{3,5}?/); //["test123"]
// 数字重复1次或更多,满足条件的情况下只返回一个数字
"test12345".match(/test\d+?/); // ["test1"]
Nach dem Login kopieren

字符转义

在正则表达式中元字符是有特殊的含义的,当我们要匹配元字符本身时,就需要用到字符转义,比如:

/\./.test("."); // true

分组 & 分支条件

正则表达式可以用 " ()  " 来进行分组,具有分组的正则表达式除了正则表达式整体会匹配子字符串外,分组中的正则表达式片段也会匹配字符串。

分组按照嵌套关系和前后关系,每个分组会分配得到一个数字组号,在一些场景中可以用组号来使用分组。

在 replace、match、exec函数中,分组都能体现不同的功能。

replace函数中,第二个参数里边可以用 $+数字组号来指代第几个分组的内容,如:

" the best language in the world is java ".replace(/(java)/,"$1script"); // " the best language in the world is javascript "
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"    (\/\w+)分组匹配的就是 /index ,

在第二个参数中为其添加上版本号

match函数中,当正则表达式有全局属性时,会捕获所有满足正则表达式的子字符串


"abchellodefhellog".match(/h(ell)o/g); //["hello", "hello"]
Nach dem Login kopieren

但是当正则表达式没有全局属性,且正则表达式中有分组的时候,match函数只会返回整个正则表达式匹配的第一个结果,同时会将分组匹配到的字符串也放入结果数组中:


"abchellodefhellog".match(/h(ell)o/); //["hello", "ell"]
// 我们可以用match函数来分解url,获取协议、host、path、查询字符串等信息
"http://www.baidu.com/test?t=5".match(/^((\w+):\/\/([\w\.]+))\/([^?]+)\?(\S+)$/);
// ["http://www.baidu.com/test?t=5", "http://www.baidu.com", "http", "www.baidu.com", "test", "t=5"]
Nach dem Login kopieren

exec函数在正则表达式中有分组的情况下,表现和match函数很像,只是无论正则表达式是否有全局属性,exec函数都只返回一个结果,并捕获分组的结果


/h(ell)o/g.exec("abchellodefhellog"); //["hello", "ell"]
Nach dem Login kopieren

当正则表达式需要匹配几种类型的结果时,可以用到分支条件,例如


"asdasd hi asdad hello asdasd".replace(/hi|hello/,"nihao"); //"asdasd nihao asdad hello asdasd"
"asdasd hi asdad hello asdasd".split(/hi|hello/); //["asdasd ", " asdad ", " asdasd"]
Nach dem Login kopieren

 注意,分支条件影响它两边的所有内容, 比如 hi|hello  匹配的是hi或者hello,而不是 hiello 或者 hhello

分组中的分支条件不会影响分组外的内容


"abc acd bbc bcd ".match(/(a|b)bc/g); //["abc", "bbc"]
Nach dem Login kopieren

后向引用

正则表达式的分组可以在其后边的语句中通过  \+数字组号来引用

比如


// 匹配重复的单词
/(\b[a-zA-Z]+\b)\s+\1/.exec(" asd sf hello hello asd"); //["hello hello", "hello"]
Nach dem Login kopieren

断言

 (?:exp) , 用此方式定义的分组,正则表达式会匹配分组中的内容,但是不再给此分组分配组号,此分组在replace、match等函数中的作用也会消失,效果如下:


/(hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world", "hello"],正常捕获结果字符串和分组字符串
/(?:hello)\sworld/.exec("asdadasd hello world asdasd") // ["hello world"]
"/static/app1/js/index.js".replace(/(\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js/index-v0.0.1.js"
"/static/app1/js/index.js".replace(/(?:\/\w+)\.js/,"$1-v0.0.1.js"); //"/static/app1/js$1-v0.0.1.js"
Nach dem Login kopieren

(?=exp) 这个分组用在正则表达式的后面,用来捕获exp前面的字符,分组中的内容不会被捕获,也不分配组号


/hello\s(?=world)/.exec("asdadasd hello world asdasd") // ["hello "]
Nach dem Login kopieren

(?!exp)  和前面的断言相反,用在正则表达式的后面,捕获后面不是exp的字符,同样不捕获分组的内容,也不分配组号


/hello\s(?!world)/.exec("asdadasd hello world asdasd") //null
Nach dem Login kopieren

处理选项

javascript中正则表达式支持的正则表达式有三个,g、i、m,分别代表全局匹配、忽略大小写、多行模式。三种属性可以自由组合共存。


// 全局匹配 g 
"abchelloasdasdhelloasd".match(/hello/); //["hello"]
"abchelloasdasdhelloasd".match(/hello/g); //["hello","hello"]
//忽略大小写 i
"abchelloasdasdHelloasd".match(/hello/g); //["hello"]
"abchelloasdasdHelloasd".match(/hello/gi); //["hello","Hello"]
Nach dem Login kopieren

在默认的模式下,元字符 ^ 和 $ 分别匹配字符串的开头和结尾处,模式 m 改变了这俩元字符的定义,让他们匹配一行的开头和结尾


"aadasd\nbasdc".match(/^[a-z]+$/g); //null 字符串^和$之间有换行符,匹配不上 [a-z]+ ,故返回null
"aadasd\nbasdc".match(/^[a-z]+$/gm); // ["aadasd", "basdc"] ,改变^$的含义,让其匹配一行的开头和末尾,可以得到两行的结果
Nach dem Login kopieren

相关推荐:

Replace中的正则表达式_正则表达式

JS使用正则表达式找出最长连续子串长度

关于HTML用正则表达式检验表格方法

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reguläre Ausdrücke in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage