Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
Метод match - Возвращает массив из совпадений Поиск сайта в строке Метод replace - Замена совпадений

Поиск сайта в строке - Регулярные выражения - Модификаторы шаблонов g и i - Диапазоны [abc] и [123] – Кванторы {n} и ?

Свойства и методы строковых объектов - Объект String

Урок №9 Поиск сайта в строке

Количество просмотров: 396

Этот урок посвящен созданию регулярного выражения для поиска имени сайта в строке. Здесь Вы узнаете что-то новое о составлении регулярных выражений и закрепите материал из предыдущих уроков.

Допустим, есть переменная, содержащая несколько названий сайтов.

var site = "У меня есть 5 сайтов:
www.mysite.ru,
www.mysite.com,
http://my-site.ru,
https://my-site-2pc.ru и
Mysite.RU
Мне нужны только те, что в зоне .ru";

Нужно написать регулярное выражение, которое из этого списка сайтов сможет выбрать лишь те, которые находятся в зоне ru.

Нужны полные названия сайтов.

Поиск сайта в строке - Точка в регулярных выражениях экранируется

Поиск сайта в строке - Точка в регулярных выражениях экранируется

Следует начать решение текущей задачи с того, чтобы составить регулярное выражение для зоны .ru

Здесь стоит сказать о том, что точка . в регулярных выражениях обозначает любой символ,
кроме переноса строки (см. шпаргалку по регулярным выражениям), поэтому в нашем случае она экранируется при помощи обратного слэша. См. пример ниже...

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /\.ru/g; /* Экранируем точку + добавляем глобальный поиск g */
var result = index.match(regular); /* Ищем в строке все зоны .ru */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

Итак, пока что найдены и выведены на экран все зоны .ru кроме .RU. Кроме этого последняя из них не относится к названию сайта (она расположена в конце строки). Далее...

Поиск сайта в строке - Регистронезависимый шаблон i

Поиск сайта в строке - Регистронезависимый шаблон i

Чтобы вывести недостающую зону .RU, снова обратимся к шпаргалке по регулярным выражениям - к группе «Модификаторы шаблонов». И воспользуемся регистронезависимым шаблоном i, благодаря которому игнорируется индекс.

См. пример ниже...

<script type="text/javascript">

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /\.ru/gi; /* Экранируем точку + добавляем глобальный поиск g + игнорируем регистр i */
var result = index.match(regular); /* Ищем в строке все зоны .ru */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

Теперь, при помощи регистронезависимого шаблона i найдены и выведены на экран все зоны .ru в том числе .RU.

Поиск сайта в строке - Диапазон [abc] (a или b или c)

Поиск сайта в строке - Диапазон [abc] (a или b или c)

Чтобы двигаться дальше в составлении регулярного выражения для поиска сайтов в строке, следует задать вопрос: что может быть перед зоной .ru?

Чтобы на него ответить, нужно знать, что в составе доменного имени могут быть только латинские буквы, цифры или дефис.

Имена доменов на кириллице сейчас учитываться не будут.

Итак, сейчас есть утверждение, что перед зоной .ru может быть любая буква латинского алфавита, любая цифра от 0 до 9 или дефис.

Снова обратимся к шпаргалке по регулярным выражениям - к группе «Диапазоны».

  • В первую очередь нас интересует диапазон [abc] (a или b или c). А в нашем случае [a-z], то есть любая латинская буква.
  • Указывая на цифру в имени сайта можно воспользоваться уже знакомым регулярным выражением \d, которое обозначает любую цифру.

    Либо дополнительно к диапазону латинских букв, добавить диапазон цифр от 0 до 9. То есть в итоге указать диапазон [a-z0-9].

  • И, наконец, в общий диапазон латинских букв и цифр можно добавить дефис
    [a-z0-9-].

Вернемся к нашему примеру и дополним регулярное выражение.

<script type="text/javascript">

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /[a-z0-9-]\.ru/gi; /* Диапазон из букв, цифр и тире. Экранируем точку + добавляем глобальный поиск g + игнорируем регистр i */
var result = index.match(regular); /* Ищем шаблон в строке */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

В результате помимо зоны .ruна экран выведен лишь первый символ, который стоит перед ней и который попадает в диапазон [a-z0-9-]. Как вывести остальные?

Поиск сайта в строке - Квантор {n,} (n или больше)

Поиск сайта в строке - Квантор {n,} (n или больше)

Итак, как дополнить регулярное выражение
[a-z0-9-]\.ru, чтобы при поиске сайта в строке вывести на экран все символы из диапазона [a-z0-9-], расположенные перед зоной .ru?

Здесь помогут «Кванторы» из шпаргалки по регулярным выражениям.

Зная о том, что в имени домена, перед зоной .ru должно быть хотя бы 2 символа, воспользуемся квантором {2,}, который означает «2 или больше».

Может иметь место такой квантор {n,m} - с двумя параметрами, например, {2,100}. В этом случае он будет учитывать диапазон от 2 до 100 символов.

Возвращаемся к предыдущему примеру и дополняем в нем регулярное выражение...

<script type="text/javascript">

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /[a-z0-9-]{2,}\.ru/gi; /* Диапазон из букв, цифр и тире в количестве от 2 и более символов... Экранируем точку + добавляем глобальный поиск g + игнорируем регистр i */
var result = index.match(regular); /* Ищем шаблон в строке */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

В результате мы увидим названия сайтов, то есть все символы, которые расположены перед зоной .ru были учтены, за исключением протоколов http:// и https://, а также не хватает www и точки после www. Идем далее...

Поиск сайта в строке - Ищем www. и http:// - Квантор ? - 0 или 1

Поиск сайта в строке - Ищем www. и http:// - Квантор ? - 0 или 1

В первую очередь следует добавить в регулярное выражение поиск www и точки после этих трех букв.

Казалось бы здесь все просто. Зная о том, что точка в регулярных выражениях экранируется, нужно всего лишь к общему выражению добавить следующую запись: www\.

Смотрим пример...

<script type="text/javascript">

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /www\.[a-z0-9-]{2,}\.ru/gi; /* www. + Диапазон из букв, цифр и тире в количестве от 2 и более символов... Экранируем точку + добавляем глобальный поиск g + игнорируем регистр i */
var result = index.match(regular); /* Ищем шаблон в строке */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

В результате мы видим лишь сайт с www., так как регулярное выражение www\.[a-z0-9-]{2,}\.ru подразумевает, что www. является обязательным элементом шаблона, по которому осуществляется поиск.

Но как видно из исходной переменной index - www. вовсе не являются обязательными символами в доменном имени сайта. И, кроме этого, они не должны повторяться более одного раза. Учитывая это, выражение www\. следует дополнить.

Для этого снова обратимся к шпаргалке по регулярным выражениям, откуда на этот раз возьмем квантор ?, который означает «0 или 1». В нашем случае 0 будет говорить о том, что www. не является обязательным элементом шаблона (т.е. этих символов может и не быть), а 1 - что если www. и встречается в доменном имени сайта, то лишь один раз.

В итоге мы получим следующее: (www\.)?.

То же самое относится и к протоколам http:// и https:// - к ним также следует применить квантор ?. Не забываем экранировать слэши.

Записи для протоколов будут такими: (http:\/\/)? и (https:\/\/)?. Смотрим пример ниже...

<script type="text/javascript">

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /(https:\/\/)?(http:\/\/)?(www\.)?[a-z0-9-]{2,}\.ru/gi; /* Протоколы и www. если и встречаются, то лишь 1 раз + Диапазон из букв, цифр и тире в количестве от 2 и более символов... Экранируем точку + добавляем глобальный поиск g + игнорируем регистр i */
var result = index.match(regular); /* Ищем шаблон в строке */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

И в последнем примере, который будет рассмотрен в рамках этого урока, будет сокращено общее регулярное выражение за счет использования для обоих протоколов http:// и https:// одной записи:

Вместо (http:\/\/)? и (https:\/\/)? запись будет следующей: (https?:\/\/)?

Отдельно для буквы s действует квантор ?. Смотрим пример...

<script type="text/javascript">

var index = "У меня есть 5 сайтов: www.mysite.ru, www.mysite.com, http://my-site.ru, https://my-site-2pc.ru и Mysite.RU. Мне нужны только те, что в зоне .ru";
var regular = /(https?:\/\/)?(www\.)?[a-z0-9-]{2,}\.ru/gi; /* Протоколы и www. если и встречаются, то лишь 1 раз + Диапазон из букв, цифр и тире в количестве от 2 и более символов... Экранируем точку + добавляем глобальный поиск g + игнорируем регистр i */
var result = index.match(regular); /* Ищем шаблон в строке */

for(i = 0; i < result.length; i++) /* Выводим элементы массива result на экран при помощи цикла for */
{
document.write(result[i] + "<p>");
}

</script>

Итак, в этом уроке было составлено достаточно длинное регулярное выражение для поиска сайтов в строке.

(https?:\/\/)?(www\.)?[a-z0-9-]{2,}\.ru

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

Давайте еще раз коротко его опишем:

  • (https?:\/\/)? - это часть шаблона ищет в строке http:// или https://. Первый квантор ? применим к букве s, второй квантор ? говорит о том, что протокола http:// или https:// может и не быть, а если он есть, то встречается один раз.

    Оба слэша здесь экранируются обратным слэшем.

  • (www\.)? - эта часть шаблона ищет в строке www.  И снова используется квантор ?

    При этом точка экранируется обратным слэшем.

  • [a-z0-9-]{2,} - здесь осуществляется поиск диапазона из латинских букв, цифр, среди которых может быть и дефис [a-z0-9-]. А запись {2,} говорит о том, что этих символов должно быть как минимум два или больше.

    В имени сайта может встретиться и под домен. Например, вот так: www.subdomain.mysite.ru. Тогда к диапазону [a-z0-9-] нужно будет добавить точку, при этом не забываем ее экранировать. Вот так: [a-z0-9-\.].

  • \.ru - наконец, мы ищем зону .ru и экранируем точку.

Домашнее задание - Поиск сайта в строке - Поиск кредитной карты

Домашнее задание - Поиск сайта в строке - Поиск кредитной карты

Здесь было рассмотрено достаточно тонкостей и нюансов при составлении регулярного выражения для поиска сайтов в строке.

Теперь нужно выполнить домашнее задание.

Вам нужно написать регулярное выражение для поиска в тексте номера кредитной карты. Текст: "Иван вчера потерял свою кредитку, ее номер 1178-9087-2384-8787. Поэтому он пошел в банк и описал ситуацию. Там пошли ему навстречу и выдали новую кредитку под номером: 1103-8899-0811-1722".

Напомню, что кредитные карты имеют формат: xxxx-xxxx-xxxx-xxxx. Например: 1178-9087-2384-8787

При этом, вам нужно найти только те номера, в которых первые 4 цифры содержат только 0, или 1 или 2, или 3, т.е. вас, например, устроит номер 1103-8899-0811-1722, но не устроит 1490-8877-7345-8111 (т.к. здесь присутствует цифры 4 и 9, не удовлетворяющие нашим условиям).

При этом номер кредитки нужно не просто найти, а вытащить в переменную result и вывести на экран.

Здесь мы будем работать с регулярными выражениями, которые были рассмотрены в этом уроке. Поэтому решить это задание легче, чем составление регулярного выражения для поиска сайта в строке.

Ниже будут приведены два решения.

Решение №1

<script type = "text/javascript">

var card = "Иван вчера потерял свою кредитку, ее номер 1178-9087-2384-8787. Поэтому он пошел в банк и описал ситуацию. Там пошли ему навстречу и выдали новую кредитку под номером: 1103-8899-0811-1722";

var regular_all = /[0-9-]{19}/g; /* Регулярное выражение для поиска всех номеров кредитных карт в строке */
var regular_select = /[0-3]{4}[0-9-]{15}/g; /* Регулярное выражение для поиска номера кредитной карты, первые четыре символа, которого состоят из цифр от 0 до 3 */

var result_all = card.match(regular_all);
var result_select = card.match(regular_select);

document.write(result_all + " - Это все номера кредитных карт в строке <p>");
document.write(result_select + " - Номер кредитной карты, где первые четыре цифры находятся в диапазоне от 0 до 3");

</script>

Пояснения к решению №1:

  • Номер кредитной карты состоит из 19-ти символов xxxx-xxxx-xxxx-xxxx.
  • Переменная regular_all содержит регулярное выражение [0-9-]{19} для поиска номера кредитной карты, состоящего из любых цифр от 0 до 9.

    Диапазон [0-9-] - цифры от 0 до 9 и дефис в количестве {19} символов.

  • Добавляем к регулярному выражению глобальный поиск g для поиска всех номеров кредитных карт в строке.
  • Переменная regular_select содержит регулярное выражение [0-3]{4}[0-9-]{15} для поиска номера кредитной карты, первые четыре символа, которого состоят из цифр от 0 до 3.

Решение №2

<script type="text/javascript">

var card = "Иван вчера потерял свою кредитку, ее номер 1178-9087-2384-8787. Поэтому он пошел в банк и описал ситуацию. Там пошли ему навстречу и выдали новую кредитку под номером: 1103-8899-0811-1722";

var regular_all = /\d{4}-\d{4}-\d{4}-\d{4}/g; /* Регулярное выражение для поиска всех номеров кредитных карт в строке */
var regular_select = /[0123]{4}-\d{4}-\d{4}-\d{4}/g; /* Регулярное выражение для поиска номера кредитной карты, первые четыре символа, которого состоят из цифр от 0 до 3 */

var result_all = card.match(regular_all);
var result_select = card.match(regular_select);

document.write(result_all + " - Это все номера кредитных карт в строке <p>");
document.write(result_select + " - Номер кредитной карты, где первые четыре цифры находятся в диапазоне от 0 до 3");

</script>

Пояснения к решению №2:

  • Номер кредитной карты имеет формат xxxx-xxxx-xxxx-xxxx. То есть это 4 последовательности из 4-ч цифр, разделенных дефисом
  • Переменная regular_all содержит регулярное выражение:

    \d{4}-\d{4}-\d{4}-\d{4} для поиска номера кредитной карты, состоящего из любых цифр от 0 до 9.

    Любая цифра от 0 до 9 \d и квантор {4} (что значит ровно 4) образуют шаблон, который обозначает последовательность из любых 4-х цифр от 0 до 9 \d{4}.

    Таких шаблонов всего 4, разделенных дефисом.

  • Переменная regular_select содержит регулярное выражение:

    [0123]{4}-\d{4}-\d{4}-\d{4} для поиска номера кредитной карты, первые четыре символа, которого состоят из цифр от 0 до 3.

    [0123]{4} - Диапазон [0123] из цифр от 0 до 3 в количестве {4} символов.

Главная Изучаем JavaScript Поиск сайта в строке Метод replace - Замена совпадений

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru