Пример за съвпадение на JavaScript Regex - Как да използвам JS Replace на низ

Разработчиците отдавна използват текстови редактори. И както повечето инструменти, всички текстови редактори имат една обща черта: намиране и подмяна.

Ако от известно време използвате find and replace, може да знаете колко полезна е тази функция. Но повечето от нас не знаят, че този инструмент е дори по-мощен, отколкото си представяме.

Той може не само да замени обикновени низове, но и модели. Тези модели са известни като регулярни изрази .

Регулярни изрази съществуват в JavaScript и повечето други езици за програмиране. Regex (накратко) са много мощен инструмент, който ще ви помогне да намерите както прости, така и сложни модели на търсене.

Алгоритмите за търсене на низове също са важен клон на компютърните науки. В тази статия ще научим как да използваме този невероятен инструмент в JavaScript.

Защо регулярни изрази?

Няма да разберете истинската важност на регулярните изрази, докато не получите дълъг документ и не ви бъде казано да извлечете всички имейли от него.

Можете да направите това ръчно, но има супер бърз метод, който може да го направи вместо вас. Повечето съвременни текстови редактори позволяват Regex в опцията за намиране. Обикновено се обозначава с .*.

И това не е всичко, което може да направи регулярният израз - имейлите са само пример. Можете да търсите всеки тип низ, който следва модел, например URL адреси или текст между скобите.

Regex може да се използва и за валидиране на определени видове модели, като валидиране на имейл. Можете да замените някаква дълга логика за проверка по следния начин:

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; };

С един ред като този:

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); }

Въпреки че този регулярен израз изглежда страшен, това не е нещо, което трябва да запомните. След като разберете как работи, ще бъде супер лесно за изпълнение.

JavaScript Regex Match

В JavaScript имаме метод на съвпадение за низове. Този метод може да се използва за съвпадение на Regex в низ.

Този метод е същият като метода на намиране в текстовите редактори. Той търси даден низ с Regex и връща масив от всички съвпадения. Прототипът на метода на съвпадение е както следва:

str.match(regexp)

Това ще върне масив от всички съвпадения при търсене на низ ( str) за регулярен израз ( regexp).

Основно използване на този метод би било преброяването на всички думи в низ. Например:

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

Ще научим за този \w+регулярен израз по-късно в тази статия.

Използвайки такива регулярни изрази, можем да изпълняваме различни задачи, които иначе биха изисквали от нас да пишем досадна логика. Пример е функцията за проверка на имейл. Трябва да тестваме всички критерии, но с помощта на регулярния израз можете да го опростите.

Регулярните изрази са валидни в повечето низови функции, но трябва да проверите прототипа на функцията, ако искате да сте сигурни. Един такъв метод е методът Replace. Нека научим повече за това по-долу.

Метод за заместване на JavaScript

JavaScript има редица полезни функции на низ. Замени е един от тях. Прототипът на метода за замяна е както следва:

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

Както можете да видите, методът replace действа върху низ и връща низ. Необходими са два параметъра: низът, който трябва да бъде заменен, и с какво ще бъде заменен.

Първият параметър може да бъде или низ, или регулярен израз. Тук можем да използваме силата на регулярните изрази, за да заменим сложните модели на търсене с някакъв низ.

Вторият параметър също може да бъде функция. За да го демонстрираме, нека разгледаме един пример:

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"

Този пример обръща всяка дума в низ. Така че, както можете да видите, заместването, комбинирано с regex, е много мощен инструмент в JavaScript.

Методът замяна може да бъде полезен, ако искате да замените конкретен модел на търсене с друг низ след някаква обработка на оригиналния низ.

Може да се използва и за коригиране на невалидно съвпадение - например за потвърждаване на имейл и, ако е възможно, за коригиране на невалиден имейл.

След като вече знаем колко полезен е Regex, нека научим някои основни регулярни изрази и да потърсим низове.

Основни регулярни изрази

Въпреки че регулярните изрази са обширна тема, основните са много лесни за разбиране и запомняне. Нека се опитаме да разберем някои основни термини, свързани с регулярните изрази.

Литерали

А буквално е всеки символ, който се оценява като себе си и по никакъв общ вид. По този начин wordсъщо е валиден регулярен израз, който ще съвпада само с "дума" .

Ако искате да замените всички екземпляри на дадена дума в JavaScript, можете да направите това:

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." */

Това замества всички случаи на JavaScript с JS. Постигнахме това с помощта на gидентификатора, който означава глобално търсене. Тоест, той търси всички събития, а не само първия.

Има и iидентификатор. Това означава търсене без чувствителност към регистъра. Той съответства на низа, игнориращ случая.

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.