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

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

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

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

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

let firstName = new RegExp("John");

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

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

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

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

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.match(a)) // если не найдено alert("не найдено") else alert("найдено"); // вывод "найдено" if(!str2.match(a)) // если не найдено alert("не найдено") // вывод "не найдено" else alert("найдено");

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

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

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

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

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 ); // Добрый день! Новый день всегда к нам добр (исходная строка)

  1. Найти в заготовленном списке введенные данные ( match )
  2. Заменить найденные данные на Петр ( replace )

При вводе, например, «Иван», в результате «Кузьмин Иван» и «Федоров Иван» должны замениться на «Кузьмин Петр» и «Федоров Петр»

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

    Для метода search:

let a=/\w\W/; // шаблон регулярного выражения let str1="rock&"; // строка, в которой осуществляется поиск let str2="&roll"; // строка, в которой осуществляется поиск if(str1.search(a)==-1) alert("не найдено") else alert("найдено"); // будет найдено if(str2.search(a)==-1) alert("не найдено") // будет не найдено else alert("найдено");

Для метода match:

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

let a=/\s\S/; // шаблон регулярного выражения let str="слово1 слово2"; // строка, в которой осуществляется поиск if(str.search(a)==-1) alert("одно слово") else alert("несколько слов"); // будет найдено

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

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("верно");

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

На языке регулярных выражений это \d\d:\d\d:\d\d

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

Все основные классы в регулярных выражениях Название класса Действие \w Любой символ в слове (алфавитно-цифровой) \W Неалфавитно-цифровой символ (?, *, & …) \s Любой пробельный символ (символы табуляции, новой строки, возврата каретки) \S Непробельный символ \d Цифровой символ \D Нецифровой символ [\b] Используется для поиска символа забоя (backspace) [ … ] Любой из символов, указанных в скобках [ ^ …] Любой символ, за исключением перечисленных в скобках [х—у] Символы в промежутке от х до у [ ^ х—у] Символы, не входящие в промежуток от х до у < х,у > Предыдущий элемент должен быть найден не менее х раз, но не более у раз Предыдущий элемент должен быть найден не менее х раз ? Предыдущий элемент должен быть найден однажды или вообще не найден + Предыдущий элемент должен быть найден хотя бы один раз * Предыдущий элемент должен быть найден неограниченное количество раз или вообще не найден | Должно быть совпадение либо в выражении справа, либо слева от символа | ( … ) Группировка всех элементов в круглых скобках в подшаблон ^ Поиск с начала строки или же с начала первой строки в многострочных данных $ Поиск с конца строки или с конца последней строки в многострочных данных \b Позиция между знаком, входящим в слова, и не входящим в слова \B Позиция, не находящаяся между знаком, входящим в слова, и не входящим в слова

Рекомендации: Можно использовать скобочные группы для обнаружения подшаблонов

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

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

При этом «ик» не должен удалиться в таких словах как «икра», «абрикос» и т.п.

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

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

Сценарий:

// Функция осуществляет поиск по шаблону в 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)

Продолжение 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>

let nomer1=prompt("Введите код города: 495 или 632"); let myExp1=/. /; if(nomer1.search(myExp1)==-1) < alert("неверно введен код"); exit; >.

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

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

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

let myDate = new Date();

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

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

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 имя_переменной = 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 (Москва, летнее время)

Примеры использования объекта 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);//текущие минуты

При этом, если секунды и минуты попадают в интервал от 0 до 10, они должны выводиться с нулем впереди. т.е. вместо 18:7:3 у Вас должно выводиться 18:07:03

Дополните пропуски в коде:

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

let s2 =`Cейчас идёт $ год`; alert (s2); // Cейчас идёт 2019 год

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

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

let now = new Date(); let from1970 = (now.getTime() / (1000 * 60)); // минут document.write(from1970); let from1970 = (now.getTime() / (1000 * 60 * 60)); // часов document.write("<br>"+from1970);

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

// год, месяц, день, час, мин, сек: let ny = new Date(2017,0,1,0,0,0);// 0-й месяц след года let now = new Date(); // Кол-во дней с 1970 let from1970 = (now.getTime() / (1000 * 60 * 60 * 24)); document.write (from1970+"<br>"); // Кол-во дней с 1970 до Нового года let from1970ToNy = (ny.getTime() / (1000 * 60 * 60 * 24)); document.write (from1970ToNy+"<br>"); document.write(Math.round(from1970ToNy) - Math.round(from1970));

Рекомендации к выполнению:

  • n — количество дней, которое нужно запросить у пользователя при загрузке страницы.
  • Это значение передается в функцию в качестве параметра.
  • При этом итоговую дату надо вывести в нормальном формате на русском языке.

Например так (пример для ввода числа 79):

Через 79 дней будет вот такая дата: День недели: Воскресенье Число: 10 Месяц: Октябрь Год: 2010

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

Заполните пропуски в коде:

Метод 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 года.

📎📎📎📎📎📎📎📎📎📎