JavaScript Regex egyezési példa - A JS Replace használata egy karakterláncon

A fejlesztők hosszú ideje használják a szövegszerkesztőket. És a legtöbb eszközhöz hasonlóan minden szövegszerkesztőnek van egy közös vonása: megtalálni és kicserélni.

Ha egy ideje használja a keresést és a cserét, lehet, hogy tudja, mennyire hasznos ez a funkció. De a legtöbben nem tudjuk, hogy ez az eszköz még erősebb, mint azt észrevennénk.

Nem csak a sima karakterláncokat, hanem a mintákat is helyettesítheti. Ezeket a mintákat szokásos kifejezéseknek nevezik .

A rendszeres kifejezések léteznek a JavaScript-ben és a legtöbb más programozási nyelvben. A Regex (röviden) egy nagyon hatékony eszköz, amely segít megtalálni az egyszerű és összetett keresési mintákat.

A húrkereső algoritmusok szintén a számítástechnika egyik jelentős ágát képezik. Ebben a cikkben megtanuljuk, hogyan kell használni ezt a csodálatos eszközt a JavaScript-ben.

Miért a reguláris kifejezések?

Addig nem fogja megérteni a reguláris kifejezések valódi jelentőségét, amíg nem kap egy hosszú dokumentumot, és meg kell szólítani, hogy az összes e-mailt kivonja belőle.

Ezt manuálisan is megteheti, de van egy szupergyors módszer, amely megteheti az Ön számára. A legtöbb modern szövegszerkesztő lehetővé teszi a Regex használatát a Keresés opcióban. Általában ezzel jelöljük .*.

És ez nem minden, amit a regex képes megtenni - az e-mailek csak egy példa. Kereshet bármilyen típusú karakterláncot, amely egy mintát követ, például URL-eket vagy szöveget a zárójelek között.

A Regex bizonyos típusú minták érvényesítésére is használható, például az Email validálására. Helyettesíthet néhány hosszú érvényesítési logikát, mint ez:

function IsValidEmail(email) { if (email.length <= 2) { return false; } if (email.indexOf("@") == -1) { return false; } var parts = email.split("@"); var dot = parts[1].indexOf("."); var len = parts[1].length; var dotSplits = parts[1].split("."); var dotCount = dotSplits.length - 1; if (dot == -1 || dot  2) { return false; } for (var i = 0; i < dotSplits.length; i++) { if (dotSplits[i].length == 0) { return false; } } return true; };

Egyetlen ilyen sorral:

function isValidEmail(email) { return /^(([^()\[\]\\.,;:\[email protected]"]+(\.[^()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email); }

Annak ellenére, hogy ez a reguláris kifejezés ijesztőnek tűnik, nem emlékeznie kell erre. Miután megértette, hogyan működik, szuper egyszerű lesz megvalósítani.

JavaScript Regex egyezés

A JavaScript-ben van egyezési módszerünk a karakterláncokra. Ez a módszer felhasználható a Regex illesztésére egy karakterláncban.

Ez a módszer megegyezik a szövegszerkesztőkben található keresési módszerrel. Regex segítségével keres egy adott karakterláncot, és az összes találat tömbjét adja vissza. Az egyezési módszer prototípusa a következő:

str.match(regexp)

Ez visszaadja az összes találat tömbjét, ha a ( str) karakterláncra keres a reguláris kifejezés ( regexp) kifejezésre .

Ennek a módszernek az az alapja, hogy az összes szót megszámolja egy karakterláncban. Például:

var str = "This is a test string"; var matchArr = str.match(/\w+/g); console.log(matchArr.length); //prints 5

Erről a \w+rendszeres kifejezésről a cikk későbbi részében fogunk megtudni .

Az ilyen reguláris kifejezések használatával különféle feladatokat hajthatunk végre, amelyek egyébként fárasztó logika megírását követelnék tőlünk. Ilyen például az e-mail ellenőrzési funkció. Minden kritériumot tesztelnünk kell, de a regex használatával egyszerűsítheti.

A rendszeres kifejezések a legtöbb karakterlánc-függvényben érvényesek, de ellenőrizni kell a függvény prototípusát, ha biztos akar lenni benne. Az egyik ilyen módszer a Csere módszer. Tudjon meg többet erről alább.

JavaScript-csere módszer

A JavaScript számos string segédfunkcióval rendelkezik. A Replace az egyik ilyen. A helyettesítési módszer prototípusa a következő:

const newStr = str.replace(regexp|substr, newSubstr|function)

Amint láthatja, a csere metódus egy sztringre hat, és egy sztringet ad vissza. Két paraméterre van szükség: a cserélendő karakterláncra és a kicserélendő karakterláncra.

Az első paraméter lehet karakterlánc vagy reguláris kifejezés. Itt használhatjuk a reguláris kifejezések erejét az összetett keresési minták helyettesítésére néhány karakterlánccal.

A második paraméter lehet egy függvény is. Ennek bemutatásához nézzünk meg egy példát:

var str = "This is a test string"; var newStr = str.replace(/\w+/g, function(match) { return match.split("").reverse().join(""); }); console.log(newStr); //prints "sihT si a tset gnirts"

Ez a példa minden szót megfordít egy karakterláncban. Tehát, mint láthatja, a regexszel kombinálva egy nagyon hatékony eszköz a JavaScript-ben.

A helyettesítési módszer hasznos lehet, ha egy adott keresési mintát valamilyen más karakterlánccal szeretne lecserélni az eredeti karakterlánc némi feldolgozása után.

Használható érvénytelen egyezés kijavítására is - például e-mailek érvényesítésére, és ha lehetséges, az érvénytelen e-mailek kijavítására.

Most, hogy tudjuk, mennyire hasznos a Regex, tanuljunk meg néhány alapvető reguláris kifejezést, és keressük meg a karakterláncokat.

Alapvető reguláris kifejezések

Habár a reguláris kifejezések hatalmas téma, az alapvető kifejezéseket nagyon egyszerűen megérteni és megjegyezni. Próbáljuk megérteni a reguláris kifejezésekhez kapcsolódó néhány alapvető kifejezést.

Literals

A szó szerinti szó bármely olyan karakter, amelyet önmagának értékelnek, és nem általános formában. Így wordérvényes szabályos kifejezés is, amely csak a "szó" kifejezésnek felel meg .

Ha egy adott szó összes példányát le akarja cserélni a JavaScript-ben, megteheti:

var str = "JavaScript is a very popular programming language. javascript is used in web developement. javascript is very easy to learn."; var newStr = str.replace(/javascript/gi,"js"); console.log(newStr); /* prints "js is a very popular programming language. js is used in web developement. js is very easy to learn." */

Ez a JavaScript minden előfordulását JS-re cseréli. Ezt az gazonosítóval hajtottuk végre , amely a globális keresést jelenti. Vagyis minden előfordulást keres, nem csak az elsőt.

Van egy iazonosító is. Kis- és nagybetűk nélküli keresést jelent. Megfelel az esetet figyelmen kívül hagyó húrnak.

Thus a literal can be used to match a specific character or group of characters.

Meta-characters

A meta-character is used for generic search, such as to search any digit, any character, or any alpha-numeric character. These are some common meta-characters:

  • \d matches any digit, that is, digits from 0 to 9
  • \w matches any alpha-numeric character, That is, alphabets a-z, A-Z and digits 0-9.
  • \s matches any whitespace

Similarly, \D , \W and \S match any non-digit, non-alphanumeric, and non-whitespace characters, respectively. For example, \d\d\d would match any three digits in a row.

Quantifiers

A quantifier is used to quantify any literal or meta-character. It can be used to select multiple occurrences of a given character. There are four types of quantifiers defined in regex:

  • * is used to match 0 or more occurrences of a given character.
  • + is used to match 1 or more occurrences of a given character.
  • . is used to match either no occurrence or 1 occurrence of a given character.
  • {min,max} or {n} can be used to match a number of occurrences in a range or a given number of times n

An example would be the one we used above to reverse every word in a string.

  • \w+ matches every word in a string
  • \w matches any alpha-numeric character
  • \w+ matches one or more occurrences of an alpha-numeric character, that is, every word in a string.

We could also use quantifiers to replace multiple whitespaces with a single whitespace. For example:

var str = "This is a string with multiple whitespaces"; var newStr = str.replace(/\s\s+/g, " "); console.log(newStr); //prints "This is a string with multiple whitespaces"

There are plenty of other uses for quantifiers.

Position meta-characters

There are also position meta-characters which represent a position. For example ^ represents the start of a line, $ represents end of a line, and \b represents word boundaries.

Conclusion

In this article, we learned how important regular expressions are. We also saw how they can be used for searching simple as well as complex search patterns.

This has great potential in programming with text. String-matching algorithms are used in DNA matching and form a significant branch of computer science.

Once you master regex you can use it with JavaScript's match and replace methods to simplify long programs and use it for validation of certain patterns. Regex can also help shorten long programs and make them more understandable.

Now you can use your own creativity and make wonderful regex – so good luck with your new skill.

This was a very basic overview of regular expressions. If you want to master the art of regex, I suggest you to check out Daniel Shiffman's tutorial here.

Hey, I hope you loved this article and learned something. You can find me at my internet home, theabbie.github.io  or my Github. Do checkout my other articles. Thank you.