JavaScript урок 7. Регулярные выражения javaScript и работа с датой и временем

Регулярные выражения javaScript

Назначение регулярных выражений: описание содержимого текстовой строки при помощи специальных правил с целью проверки правильности заполнения формы, отправляющей данные на сервер,

В целом, регулярные выражения — это метаязык, позволяющий проверять входные данные на шаблон.

Создание регулярных выражений (2 способа)

1. Конструктор RegExp()

let firstName = new RegExp("John");

let firstName = new RegExp("John");

В представленном примере создается объект класса RegExp с именем firstName, содержащий шаблон John

2. Присваивание шаблона переменной (короткий синтаксис)

let firstName=/John/;

let firstName=/John/;

В данном примере /John/ является шаблоном, а символы слеш / служат контейнером шаблона.

Если на момент написания кода мы знаем, каким будет регулярное выражение, то можно использовать слеши. Если же нам внутри регулярного выражения необходимо будет использовать переменные, то слеши использовать нельзя, они не допускают вставки переменных.
Рассмотрим примеры с регулярными выражениями javascript:

Синтаксис регулярных выражений и методы поиска

Рассмотрим несколько способов поиска по шаблону:

Метод search(regExp) – возвращает позицию символа с которого начинается соответствие. Возвращает -1 если строка не соответствует регулярному выражению
Пример: Найти в строке слово Иван:

✍ Решение:
 

let a=/Иван/; // шаблон регулярного выражения let str1="Кузьмин Иван Федорович"; // строка, в которой осуществляется поиск let str2="Петров Петр Петрович"; // строка, в которой осуществляется поиск   if(str1.search(a)==-1) alert("не найдено") else alert("найдено"); // будет найдено   if(str2.search(a)==-1) alert("не найдено") // будет не найдено else alert("найдено");

let a=/Иван/; // шаблон регулярного выражения let str1="Кузьмин Иван Федорович"; // строка, в которой осуществляется поиск let str2="Петров Петр Петрович"; // строка, в которой осуществляется поиск if(str1.search(a)==-1) alert("не найдено") else alert("найдено"); // будет найдено if(str2.search(a)==-1) alert("не найдено") // будет не найдено else alert("найдено");

Метод str.match(reg) — ищет вхождения шаблона в строке. Для предыдущего примера:

let a=/Иван/; // шаблон регулярного выражения let str1="Кузьмин Иван Федорович"; // строка, в которой осуществляется поиск let str2="Петров Петр Петрович"; // строка, в которой осуществляется поиск if(!str1.match(a)) // если не найдено alert("не найдено") else alert("найдено"); // вывод "найдено"   if(!str2.match(a)) // если не найдено alert("не найдено") // вывод "не найдено" else alert("найдено");

let a=/Иван/; // шаблон регулярного выражения let str1="Кузьмин Иван Федорович"; // строка, в которой осуществляется поиск let str2="Петров Петр Петрович"; // строка, в которой осуществляется поиск if(!str1.match(a)) // если не найдено alert("не найдено") else alert("найдено"); // вывод "найдено" if(!str2.match(a)) // если не найдено alert("не найдено") // вывод "не найдено" else alert("найдено");

Метод regexp.test(str) проверяет, есть ли хоть одно совпадение, если да, то возвращает true, иначе false.

let str = "Добрый День!"; let regexp = /день/i;   alert( regexp.test(str) ); // true

let str = "Добрый День!"; let regexp = /день/i; alert( regexp.test(str) ); // true

str.split(reg, limit) — разбивает строку по разделителю-шаблону:

let a=/Иван/; // шаблон регулярного выражения let str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.split(a)); //результат: Кузьмин , Федорович Петров Петр Петрович Федоров , Петрович

let a=/Иван/; // шаблон регулярного выражения let str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.split(a)); //результат: Кузьмин , Федорович Петров Петр Петрович Федоров , Петрович

str.replace(reg, str) — заменяет вхождения шаблона в строке:

let a=/Иван/; // шаблон регулярного выражения let str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.replace(a, "Петр")); //результат: Кузьмин Петр Федорович Петров Петр Петрович Федоров Иван Петрович

let a=/Иван/; // шаблон регулярного выражения let str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.replace(a, "Петр")); //результат: Кузьмин Петр Федорович Петров Петр Петрович Федоров Иван Петрович

Чтобы заменить все совпадения, нужно обязательно к регулярному выражению добавить флаг g:

let a=/Иван/g; // шаблон регулярного выражения let str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.replace(a, "Петр")); //результат: Кузьмин Петр Федорович Петров Петр Петрович Федоров Петр Петрович

let a=/Иван/g; // шаблон регулярного выражения let str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.replace(a, "Петр")); //результат: Кузьмин Петр Федорович Петров Петр Петрович Федоров Петр Петрович

let a=/Иван/; // шаблон регулярного выражения без флага
let a=/Иван/g; // шаблон с флагом

Без использования флага возвращается только первое совпадение в виде массива, в котором под индексом 0 и находится совпадение:

let str = "Добрый день! Новый день всегда к нам добр";
 
let result = str.match(/день/); // без флага g
 
alert( result[0] );     // день (первое совпадение)
alert( result.length ); // 1
 
// Дополнительная информация:
alert( result.index );  // 0 (позиция совпадения)
alert( result.input );  // Добрый день! Новый день всегда к нам добр (исходная строка)

Кузьмин Иван   Петров Петр   Федоров Иван

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

✍ Решение:
 

Следующий класс:

✍ Решение:
 

let pattern=/\d\D/;

let pattern=/[abc] [^def]/;

let a=/[a-d][^d-f]]/;
let str="ad";
if(str.search(a)==-1) alert("неверно")
else
alert("верно");

let pattern=/cho{1,2}se/;

let pattern=/ab?c/;

let a=/cat|dog/;
let str="sdfcatsdf";
if(str.search(a)==-1) alert("неверно")
else
alert("верно");

let a=/f(a|o)r/;
let str="sdffarsdf";
if(str.search(a)==-1) alert("неверно")
else
alert("верно");

let pattern=/^The/;

Два якоря одновременно ^...$ часто используются для проверки, совпадает ли строка с шаблоном полностью.

✍ Решение:

let correct = "12/11/11";
let incorrect= "12/3/11";
 
let regexp = /^\d\d:\d\d:\d\d$/;
alert( regexp.test(correct) ); // true
alert( regexp.test(incorrect) ); // false

let pattern=/cat\b/;

Все основные классы в регулярных выражениях

Теперь рассмотрим действительно серьезный и часто используемый пример использования регулярных выражений javascript:

function checkMail(){
let a = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
let textMail=document.getElementById('textMail');
let f=document.getElementById('f');
if (textMail.value.search(a)!==-1)
f.submit()
else
alert ("неверный мэйл");
}

	89001234567         +79001234567
	8 900 123 45 67     +7 900 123 45 67
	8 (900) 123-45-67   +7 (900) 123-45-67
	8(900)123-45-67     +7(900)123-45-67

домик -> дом, столик -> стол, ключик -> ключ

Тестер регулярных выражений javaScript

Рассмотрим также вариант примера того, как разработать Тестер регулярных выражений javaScript:

Сценарий:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Функция осуществляет поиск по шаблону в searchstr 
function searchForPattern(searchstr, pattern, REattributes, theResult) 
{
//Создание объекта регулярного выражения 
let regExpObj = new RegExp(pattern,REattributes); 
//Заполнение поля результата результатами поиска 
theResult.value = regExpObj.exec(searchstr); 
} 
// Эта функция заменяет на replaceStr все вхождения шаблона в searchstr 
function replacePattern(searchstr,replaceStr, pattern,REattributes,theResult) 
{
//Создание объекта регулярного выражения 
let regExpObj = new RegExp(pattern,REattributes); 
//Заполнение поля результата результатами поиска. 
theResult.value = searchstr.replace(regExpObj,replaceStr); 
}
// Эта функция очищает все поля страницы 
function clearFields(field1, field2, field3, field4, field5) 
{
field1.value	= "";
field2.value	= "";
field3.value	= "";
field4 .value	= "";
field5.value	= "";
}

Продолжение html-кода:

<h3>Тестер регулярных выражений</h3> 
<form name="myForm"> 
<table board=0> 
<tr align=right> 
<td>Строка поиска:</td> 
<td><input type="text" name="searchString" /></td> 
</tr> 
<tr align=right> 
<td>Строка замены:</td> 
<td> <input type="text" name="replaceString"/></td> 
</tr> 
<tr align=right> 
<td>Атрибуты:</td> 
<td><input type="text" name="REattributes"/><td> 
</tr> 
<tr align=right> 
<td>Образец: </td> 
<td><input type="text" name="pattern"/><td> 
</tr> 
</table> 
<br> 
<input type="button" value="Search for pattern" onClick="searchForPattern(searchString.value, pattern.value, REattributes.value, result)"> 
<input type="button" value="Replace pattern" onClick="replacePattern(searchString.value, replaceString.value, pattern.value, REattributes.value, result) "> 
<input type="button" value="Clear" onClick="clearFields(searchString, replaceString, pattern, REattributes, result)"> 
<br /><hr /><br> Result: <input type="text" name="result"/></form>

Объект Date для работы с датой и временем в javaScript

Встроенные объекты javaScript:

• Object(объекты)
• Number (обработка чисел)
• String (обработка строк)
• Array (массивы)
• Math (математические формулы, функции и константы)
• Date (работа с датами и временем)
• RegExp
• Global (его свойства Infinity, NaN, undefined)
• Function

 
let myDate = new Date();
  

Создание объекта date

1. Создание объекта с текущей датой и временем

let имя_переменной = new Date();

2. Создание объекта со значением (датой), заданным в виде строки определенного формата

let имя_переменной = new Date("month, day, year [hours:minutes:seconds])

let d1 = new Date("December 15, 1997 16:57:00"); let d2 = new Date("2000 jan 23 10:20"); /* сокращенный вариант */

let d1 = new Date("December 15, 1997 16:57:00"); let d2 = new Date("2000 jan 23 10:20"); /* сокращенный вариант */

3. Создание объекта со значением, заданным с помощью числовых параметров:

let имя_переменной = new Date(year, month, day [,hours,minutes,seconds])

let d2 = new Date(1995,4,9,13,30,00); document.writeln(d2); // Tue May 09 1995 13:30:00 GMT+0400 (Москва, летнее время)

let d2 = new Date(1995,4,9,13,30,00); document.writeln(d2); // Tue May 09 1995 13:30:00 GMT+0400 (Москва, летнее время)

Примеры использования объекта Date в javaScript:

let today = new Date(); /* объект даты today содержит информацию о текущей дате */
let date=today.getDate();
alert (date);// текущее число
let day=today.getDay();
alert (day);// значение дня недели (0..6)
let year=today.getFullYear();
alert(year); //2010
let month=today.getMonth();
alert(month);// текущий месяц
let hours=today.getHours();
alert(hours);//текущий час, например 19
let minutes=today.getMinutes();
alert(minutes);//текущие минуты

let now=new Date();
let hours=now.getHours();
...
let seconds=...;
 
if(minutes < 10){
	...;
}
if(...){
	...;
}
 
document.write("Текущее время: " + hours + ":" + minutes + ":" + seconds);

let d = new Date(); 
...

При необходимости вывести, например, текущий год, можно использовать метод getFullYear(). Рассмотрим два результата его использования:
Пример 1:

let s1 = new Date().getFullYear();
alert (s1); // 2019

Пример 2:

let s2 =`Cейчас идёт ${(new Date()).getFullYear()} год`;
alert (s2); // Cейчас идёт 2019 год

Методы объекта Date

Метод getTime() объекта Date в javascript
Метод getTime() возвращает время в миллисекундах, прошедшее с 1 января 1970 г.
Рассмотрим конкретный пример с использованием метода getTime().

✍ Решение:
 

Еще один пример:

✍ Решение:
 

function viewDate(n){
	let now = ...;
	let nowMilli = now. ...;
 
	let nowPlus79 = new Date(...);
	let milli79 = ...;
 
	let summaMilli = ...;
	let itogMoment = new ... (...);
 
	let myDays = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
	let myMonths = ...;
	document.write("День недели: " + ...);
	document.write("Число: " + ...);
	...
	...
}
let userDays = prompt(...);
...
...
...
...
viewDate(...);

Метод parse() объекта Date()
Метод parse() в javascript — преобразует строку даты типа «Jan 11,1996» в количество миллисекунд, прошедших с полуночи 1 января 1970:

let d = new Date();
d.setTime(Date.parse("21 May 1958 10:12"));
document.write(d.toLocaleString());

Метод UTC (год, месяц, день, час, минута, секунда) объекта Date()
UTC (год, месяц, день, час, минута, секунда) — возвращает количество миллисекунд для даты на базе универсального координированного времени (UTC), прошедших с полуночи 1 января 1970 года.

let date1 = new Date(2003,01,10);
document.write(Date.parse(date1)+" "); //1044824400000
let date2 = new Date(2003,02,5);
document.write(Date.parse(date2)+" "); //1046811600000
document.write(Date.parse(date2) - Date.parse(date1)+" "); //1987200000
let days = (Date.parse(date2) - Date.parse(date1))/1000/60/60/24;
document.write(days); // результат: 23