Содержание:
Регулярные выражения javaScript
Назначение регулярных выражений: описание содержимого текстовой строки при помощи специальных правил с целью проверки правильности заполнения формы, отправляющей данные на сервер
Создание регулярных выражений (2 способа)
- Конструктор RegExp()
- Присваивание шаблона переменной
var firstName = new RegExp("John"); |
В представленном примере создается объект RegExp
с именем firstName
, содержащий шаблон John
var firstName=/John/; |
В данном примере /John/
является шаблоном
Рассмотрим примеры с регулярными выражениями javascript:
Нужно найти | Регулярное выражение |
---|---|
asdasdasdprivetasdasdasd | /privet/ |
privet | /^privet$/ |
asdasdeprtviasdasdasd
asdasdeeeeeedfgdgdg |
/[privet]/ или /[privet]{6}/ |
SdfuiyuiewrR345 | /[a-zA-Z0-9]/ или /\w/ |
452341 | /[0-9]/ или /\d/ |
jsdf8H?& | /./ |
Синтаксис регулярных выражений и методы поиска
Рассмотрим несколько способов поиска по шаблону:
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("найдено"); |
str.match(reg)
— ищет вхождения шаблона в строке. Для предыдущего примера:
// ... 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)) // Кузьмин , Федорович Петров Петр Петрович Федоров , Петрович |
str.replace(reg, str)
— заменяет вхождения шаблона в строке:
var a=/Иван/; // шаблон регулярного выражения var str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.replace(a, "Петр")) //Кузьмин Петр Федорович Петров Петр Петрович Федоров Иван Петрович |
Чтобы заменить все совпадения, нужно обязательно к регулярному выражению добавить флаг g
:
var a=/Иван/g; // шаблон регулярного выражения var str="Кузьмин Иван Федорович Петров Петр Петрович Федоров Иван Петрович"; document.write(str.replace(a, "Петр")) //Кузьмин Петр Федорович Петров Петр Петрович Федоров Петр Петрович |
- Найти в заготовленном списке введенные данные
- Заменить найденные данные на Иванов Иван
Список:
Кузьмин Иван Петров Петр Федоров Иван
При вводе, например, «Кузьмин Иван», в результате «Кузьмин Иван» должно замениться на «Иванов Иван»
\w
Любой символ в слове (алфавитно-цифровой)
\W
Неалфавитно-цифровой символ (?, *, & …)
буква&
в строке поиска, но &буква
не будет найдено (например, найдет rock&, но не найдет &roll):✍ Решение:
-
Для метода search:
var a=/\w\W/; // шаблон регулярного выражения var str1="rock&"; // строка, в которой осуществляется поиск var 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("найдено"); |
Следующий класс:
\s
Любой пробельный символ (символы табуляции, новой строки, возврата каретки)
\S
Непробельный символ
✍ Решение:
var a=/\s\S/; // шаблон регулярного выражения var str="слово1 слово2"; // строка, в которой осуществляется поиск if(str.search(a)==-1) alert("одно слово") else alert("несколько слов"); // будет найдено |
\d
Цифровой символ
\D
Нецифровой символ
4р
в строке поиска, но не сможет найти р4
:var pattern=/\d\D/; |
[\b]
Используется для поиска символа забоя (backspace)
[...]
Любой символ, указанный в скобках
[^...]
Любой символ, за исключением перечисленного в скобках
ag
в строке поиска, но не сможет найти ga
, поскольку на первом месте должны стоять либо а
, либо b
, либо с
: var pattern=/[abc] [^def]/; |
[х-у] Символы в промежутке от х до у
[^х-у] Символы, не входящие в промежуток от х до у
ac
, но не найдет ad
: var a=/[a-d][^d-f]]/; var str="ad"; if(str.search(a)==-1) alert("неверно") else alert("верно"); |
{х,у}
Предыдущий элемент должен быть найден не менеех
раз, но не болееу
раз
{х,}
Предыдущий элемент должен быть найден не менеех
раз
chose
и choose
в строке поиска, но не сможет найти chooose
: var pattern=/cho{1,2}se/; |
?
Предыдущий элемент должен быть найден однажды или вообще не найден
+
Предыдущий элемент должен быть найден хотя бы один раз
*
Предыдущий элемент должен быть найден неограниченное количество раз или вообще не найден
abc
или ас в строке, но не сможет найти abbe
, поскольку символ «b
» должен быть найден один раз или вообще не найден: var pattern=/ab?c/; |
|
Должно быть совпадение либо в выражении справа, либо слева от символа|
var a=/cat|dog/; var str="sdfcatsdf"; if(str.search(a)==-1) alert("неверно") else alert("верно"); |
(...)
Группировка всех элементов в круглых скобках в подшаблон
far
и for
, но не fer
. Пример выдаст «верно»: var a=/f(a|o)r/; var str="sdffarsdf"; if(str.search(a)==-1) alert("неверно") else alert("верно"); |
^
Поиск с начала строки или же с начала первой строки в многострочных данных
$
Поиск с конца строки или с конца последней строки в многострочных данных
The
, если оно присутствует в начале последовательности или в начале одиночной строки: var pattern=/^The/; |
\b
Позиция между знаком, входящим в слова, и не входящим в слова
\B
Позиция, не находящаяся между знаком, входящим в слова, и не входящим в слова
cat
, за которым следует пробел. Пробел является несловарным символом: var pattern=/cat\b/; |
Все основные классы в регулярных выражениях
Название класса | Действие |
---|---|
\w | Любой символ в слове (алфавитно-цифровой) |
\W | Неалфавитно-цифровой символ (?, *, & …) |
\s | Любой пробельный символ (символы табуляции, новой строки, возврата каретки) |
\S | Непробельный символ |
\d | Цифровой символ |
\D | Нецифровой символ |
[\b] | Используется для поиска символа забоя (backspace) |
[…] | Любой из символов, указанных в скобках |
[^…] | Любой символ, за исключением перечисленных в скобках |
[х—у] | Символы в промежутке от х до у |
[^х—у] | Символы, не входящие в промежуток от х до у |
{х,у} | Предыдущий элемент должен быть найден не менее х раз, но не более у раз |
{х,} | Предыдущий элемент должен быть найден не менее х раз |
? | Предыдущий элемент должен быть найден однажды или вообще не найден |
+ | Предыдущий элемент должен быть найден хотя бы один раз |
* | Предыдущий элемент должен быть найден неограниченное количество раз или вообще не найден |
| | Должно быть совпадение либо в выражении справа, либо слева от символа | |
(…) | Группировка всех элементов в круглых скобках в подшаблон |
^ | Поиск с начала строки или же с начала первой строки в многострочных данных |
$ | Поиск с конца строки или с конца последней строки в многострочных данных |
\b | Позиция между знаком, входящим в слова, и не входящим в слова |
\B | Позиция, не находящаяся между знаком, входящим в слова, и не входящим в слова |
Рекомендации:
Можно использовать скобочные группы для обнаружения подшаблонов
Теперь рассмотрим действительно серьезный и часто используемый пример использования регулярных выражений javascript:
Sername-name.mymail@aaa-net.tri.com.ru
var a = /^[a-zA-Z0-9_]{1,}([\.-]{0,1}[a-zA-Z0-9_]{1,}){0,}@[a-zA-Z0-9_]{1,}([\.-]{0,1}[a-zA-Z0-9_] {1,}){0,}(\.[a-zA-Z0-9_]{2,4}) {1,}$/;
var a = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
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
- Создание объекта с текущей датой и временем
- Создание объекта со значением (датой), заданным в виде строки определенного формата
- Создание объекта со значением, заданным с помощью числовых параметров:
var имя_переменной = new Date();
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 имя_переменной = 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 (Москва, летнее время) |
Примеры использования объекта 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);//текущие минуты |
date
, вывести на экран время в формате: час:минута:секунда (пример: 14:23:11
)
При этом, если секунды и минуты попадают в интервал от 0 до 10, они должны выводиться с нулем впереди.
т.е. вместо 18:7:3
у Вас должно выводиться 18:07:03
Дополните пропуски в коде:
var now=new Date(); var hours=now.getHours(); ... var seconds=...; if(minutes < 10){ ...; } if(...){ ...; } document.write("Текущее время: " + hours + ":" + minutes + ":" + seconds); |
Использовать оператор переключения (
switch
).
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()
.
✍ Решение:
var now = new Date(); var from1970 = (now.getTime() / (1000 * 60)); // минут document.write(from1970); var from1970 = (now.getTime() / (1000 * 60 * 60)); // часов document.write("<br>"+from1970); |
Еще один пример:
✍ Решение:
// год, месяц, день, час, мин, сек: var ny = new Date(2017,0,1,0,0,0);// 0-й месяц след года var now = new Date(); // Кол-во дней с 1970 var from1970 = (now.getTime() / (1000 * 60 * 60 * 24)); document.write (from1970+"<br>"); // Кол-во дней с 1970 до Нового года var from1970ToNy = (ny.getTime() / (1000 * 60 * 60 * 24)); document.write (from1970ToNy+"<br>"); document.write(Math.round(from1970ToNy) - Math.round(from1970)); |
n
дней от сегодняшней.
Рекомендации к выполнению:
n
— количество дней, которое нужно запросить у пользователя при загрузке страницы.- Это значение передается в функцию в качестве параметра.
- При этом итоговую дату надо вывести в нормальном формате на русском языке.
- При этом пользователь должен ввести число от 1 до 1000.
- Если он не попал в интервал или ввел не число, то надо вывести ошибку.
- Проверку можно осуществлять за пределами функции.
Например так (пример для ввода числа 79):
Через 79 дней будет вот такая дата:
День недели: Воскресенье
Число: 10
Месяц: Октябрь
Год: 2010
Подсказка. Если задание кажется сложным, не спешите смотреть ответ.
Постарайтесь разбить задачу на как можно более мелкие шаги и для начала попробуйте написать код просто для конкретного числа дней, вообще не используя функцию.
Заполните пропуски в коде:
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 |
- Для чего предназначен встроенный объект Date()?
- Какие способы задания значений для этого объекта Вы знаете?
- Каково предназначение методов GetMonth() и SetMonth()?
- Как вы думаете, где необходимо применять методы parse() и UTC()?