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

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

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

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

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

var firstName = new RegExp("John");

var firstName = new RegExp("John");

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

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

var firstName=/John/;

var firstName=/John/;

В данном примере /John/ является шаблоном

Рассмотрим примеры с регулярными выражениями javascript:

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

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

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

✍ Решение:
 

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

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

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

// ... if(!str1.match(a)) // если не найдено alert("не найдено") else alert("найдено"); // вывод "найдено"   if(!str2.match(a)) // если не найдено alert("не найдено") // вывод "не найдено" else alert("найдено");

// ... if(!str1.match(a)) // если не найдено alert("не найдено") else alert("найдено"); // вывод "найдено" if(!str2.match(a)) // если не найдено alert("не найдено") // вывод "не найдено" else alert("найдено");

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

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

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

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

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

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

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

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

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

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

 
\w Любой символ в слове (алфавитно-цифровой)
\W Неалфавитно-цифровой символ (?, *, & …)
 

✍ Решение:
 

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

 
\s Любой пробельный символ (символы табуляции, новой строки, возврата каретки)
\S Непробельный символ
 

✍ Решение:
 

 
\d Цифровой символ
\D Нецифровой символ
 

var pattern=/\d\D/;

 
[\b] Используется для поиска символа забоя (backspace)
[...] Любой символ, указанный в скобках
[^...] Любой символ, за исключением перечисленного в скобках
 

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

 
[х-у] Символы в промежутке от х до у
[^х-у] Символы, не входящие в промежуток от х до у
 

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

 
{х,у} Предыдущий элемент должен быть найден не менее х раз, но не более у раз
{х,} Предыдущий элемент должен быть найден не менее х раз
 

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

 
? Предыдущий элемент должен быть найден однажды или вообще не найден
+ Предыдущий элемент должен быть найден хотя бы один раз
* Предыдущий элемент должен быть найден неограниченное количество раз или вообще не найден
 

var pattern=/ab?c/;

 
| Должно быть совпадение либо в выражении справа, либо слева от символа |
 

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

 
(...) Группировка всех элементов в круглых скобках в подшаблон
 

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

 
^ Поиск с начала строки или же с начала первой строки в многострочных данных
$ Поиск с конца строки или с конца последней строки в многострочных данных
 

var pattern=/^The/;

\b Позиция между знаком, входящим в слова, и не входящим в слова
\B Позиция, не находящаяся между знаком, входящим в слова, и не входящим в слова

var pattern=/cat\b/;

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

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

function checkMail(){
var a = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
var textMail=document.getElementById('textMail');
var 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) 
{
//Создание объекта регулярного выражения 
var regExpObj = new RegExp(pattern,REattributes); 
//Заполнение поля результата результатами поиска 
theResult.value = regExpObj.exec(searchstr); 
} 
// Эта функция заменяет на replaceStr все вхождения шаблона в searchstr 
function replacePattern(searchstr,replaceStr, pattern,REattributes,theResult) 
{
//Создание объекта регулярного выражения 
var 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

 
var myDate = new Date();
  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

var d = new Date(); 
...

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

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

Пример 2:

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

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

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

✍ Решение:
 

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

✍ Решение:
 

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

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

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

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

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