Приклад відповідності регулярного виразу JavaScript - Як використовувати JS 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

У JavaScript ми маємо метод відповідності для рядків. Цей метод можна використовувати для порівняння регулярного виразу в рядку.

Цей метод такий самий, як метод пошуку в текстових редакторах. Він здійснює пошук заданого рядка за допомогою регулярного виразу та повертає масив усіх збігів. Прототип методу збігу такий:

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+регулярний вираз ми дізнаємось далі в цій статті.

Використовуючи такі регулярні вирази, ми можемо виконувати різні завдання, які в іншому випадку вимагали б від нас втомливої ​​логіки. Прикладом стала функція перевірки електронної пошти. Ми повинні перевірити всі критерії, але, використовуючи регулярний вираз, ви можете спростити його.

Регулярні вирази діють у більшості рядкових функцій, але слід перевірити прототип функції, якщо хочете бути впевненими. Одним з таких методів є метод Замінити. Давайте дізнаємось більше про це нижче.

Метод заміни 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"

Цей приклад перевертає кожне слово в рядку. Отож, як бачите, заміна в поєднанні з регулярним виразом є дуже потужним інструментом у JavaScript.

Метод replace може бути корисним, якщо ви хочете замінити певний шаблон пошуку на інший рядок після певної обробки вихідного рядка.

Він також може бути використаний для виправлення невірного збігу - наприклад, для перевірки електронної пошти та, якщо можливо, для виправлення недійсної електронної пошти.

Тепер, коли ми знаємо, наскільки корисний регулярний вираз, давайте вивчимо деякі основні регулярні вирази та шукаємо рядки.

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

Хоча регулярні вислови - це велика тема, основні з них дуже просто зрозуміти та запам’ятати. Спробуємо зрозуміти деякі основні терміни, пов'язані з регулярними виразами.

Літерали

Буквальне це будь-який символ , який оцінюється як самі по собі , а не в якійсь - або загальній формі. Таким чином, 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.