Главная | Обратная связь | Поможем написать вашу работу!

Function replacer(str, p1, p2, offset, s)

OnAbort

Обработчик событий. Событие аварийного прекращения работы происходит, когда пользователь прерывает загрузку изображения (например, нажимая связь или нажимая Кнопку остановки). Обработчик события OnAbort выполняет JavaScript код, когда происходит событие аварийного прекращения работы. Например

<IMG NAME="aircraft" SRC="f15e.gif" onAbort="alert('You didn\'t get to see the image!')">

OnBlur

Для окон, фреймов, и framesets, обработчик события onBlur определяет JavaScript код, который выполниться, когда окно теряет фокус.

Пример 1. Изменение фона окна. В следующем примере, обработчики события onBlur окна и onFocus изменяют фоновый цвет окна в зависимости от того, имеет ли окно фокус.

<BODY BGCOLOR="lightgrey"

onBlur="document.bgColor='lightgrey'"

onFocus="document.bgColor='antiquewhite'">

OnClick

Срабатывает при нажатии на элемент. Может возвращать false, чтобы отменить действие, связываемое с событием щелчка.

Например, нажмите на следующую гиперссылку, и затем выберите Отмену. Когда вы выбираете Отмену, новая страница не загрузиться.

<A HREF = "index-1.htm"

onClick="return confirm('Load Netscape home page?')">Netscape</A>

OnChange

Событие происходит в тот момент, когда значение элемента формы text, select или textarea изменилось и элемент потерял фокус. Используйте обработчик событий onChange, чтобы проверить правильность ввода данных.

Пример. userName - текстовая область. Обработчик событий onBlur вызывает функцию checkValue(), чтобы подтвердить, что в userName введено значение правильно.

OnError

В следующем теге <IMG>, обработчик события onError вызывает функцию badImage, если существуют ошибки, когда изображение загружается.

Пример 1. В следующем теге <IMG>, код onError = "null" скрывает сообщения об ошибках, если ошибки происходят, когда изображение загружается.

<SCRIPT>

function badImage(theImage) {

alert('Error: ' + theImage.name + ' did not load properly.')

} </SCRIPT>

<FORM>

<IMG NAME="imageBad2" SRC="orca.gif" ALIGN="left" BORDER="2" onError="badImage(this)">

</FORM>

OnFocus

Событие происходит в тот момент, когда пользователь переходит к элементу формы textarea, select или text для ввода данных. Элемент формы получает фокус в тот момент, когда пользователь переходит к этому элементу формы с помощью клавиши Tab или щелчка мыши. Выделение символов внутри поля приводит к вызову обработчика событий onSelect. Одним из применений обработчика onFocus является вывод на экран всплывающей подсказки, когда элемент выбирается в первый раз.

<INPUT TYPE="textarea" VALUE="" NAME="valueField" onFocus="valueCheck()">

OnLoad

Вызывается, когда загрузка документа в окно или кадр закончена. Используйте обработчик событий onLoad внутри тега <BODY > или <FRAMESET >. В следующем примере, обработчик событий onLoad показывает сообщение приветствия после того, как страница загружена.

<BODY OnLoad = " window.alert (" Добро пожаловать в домашнюю страницу! ") >

OnMouseOver

Событие происходит, когда указатель мыши помещается над элементом. По умолчанию, значение HREF якоря показывается в строке состояния, когда пользователь размещает указатель над якорем. В следующем примере, обработчик событий onMouseOver выводит, сообщение " Click this if you dare. "

<A HREF="index.htm" onMouseOver="window.status='Click this if you dare!';

return true">Нажмите меня</A>

OnMouseOut

Событие происходит, когда указатель мыши убирают с элемента.

OnSelect

Обработчик событий onSelect вызывается в тот момент, когда выделен текст внутри элемента формы (text или textarea).

<INPUT TYPE = "text" NAME = "valueField" onSelect = "selectState()" >

OnSubmit

Обработчик событий onSubmit запускается в момент отправки пользователем данных формы на сервер. Любое отличное от false возвращаемое значение, в том числе пропуск оператора return, приводит к отправке данных на сервер:

<FORM onSubmit="feedbackSubmit()">

...элементы формы...

</FORM>

function feedbackSubmit(){

...строки кода...

if (!validData){

return true}

else{

return false;}

}

OnUnload

Вызывается, когда пользователь выходит из документа.

<BODY onUnloud="alert(“Вы покидаете страницу”)">

Объектная модель JavaScript

JavaScript основан на простом объектно-ориентированном примере. Объект - это конструкция со свойствами, которые являются переменными JavaScript. Свойства могут быть другими объектами. Функции, связанные с объектом известны как методы объекта. По своей сути объект является ассоциативным массивом.

Объект JavaScript имеет свойства ассоциированные с ним. Вы обращаетесь к свойствам объекта следующей простой системой обозначений:

objectName.propertyName

И имя объекта и имя свойства чувствительны к регистру. Вы определяете свойства, приписывая значение. Например, пусть существует объект, с именем myCar (мы обсудим, как создавать объекты позже - теперь, только принимаем, что объект уже существует). Вы можете дать свойства, именованные make, model, и year следующим образом:

myCar.make = "Ford"

myCar.model = "Mustang"

myCar.year = 69;

Вы можете также обратиться к этим свойствам, используя систему обозначений массивов следующим образом:

mycar["make"] = "Ford

myCar["model"] = "Mustang"

myCar["year"] = 69;

Метод - функция, связанная с объектом. Вы определяете метод таким же образом, так как вы определяете стандартную функцию. Затем, используйте следующий синтаксис, чтобы связать функцию с существующим бъектом:

object.methodname = function_name

Где object - существующий объект, methodname - имя, которое вы присваиваете методу, и function_name - имя функции.

Вы можете вызывать метод в контексте объекта следующим образом:

object.methodname (params);

JavaScript имеет специальное ключевое слово, this, которое вы можете использовать, чтобы обращаться к текущему объекту.

function car(make, model, year) {

this.make = make;

this.model = model;

this.year = year;

display = function(){

return "A Beautiful " + this.year + " " + this.make + " " + this.model;

}

Теперь вы можете создавать объект, с именем mycar следующим образом:

mycar = new car("Eagle", "Talon TSi", 1993);

car.display ();

Это утверждение создает car и присваивает ему указанные значения для его свойств. Вы можете создавать любое число объектов car запрашивая к new.

Объекты броузера Navigator

Объекты верхнего уровня, или объекты браузера — это объекты, существующие глобально, создаются автоматически при загрузке.

Имя объекта	Описание
window	Объект верхнего уровня в иерархии объектов языка JavaScript. Фреймсодержащий (frameset) документ также имеет объект window.
document	Содержит свойства, которые относятся к текущему HTML-документу
location	Содержит свойства, описывающие местонахождение текущего документа, например адрес URL.
navigator	Содержит информацию о версии браузера.
history	Содержит информацию обо всех ресурсах, к которым пользователь обращался во время текущего сеанса работы.

Объект document

Содержит информацию относительно текущего документа, и с помощью методов позволяет изменять текст HTML. Является корневым элементом DOM-дерева страницы. Существует в единственном экземпляре для всего HTML-документа. Он присутствует всегда, если существует HTML-документ, поэтому специально создавать его не требуется.

Объект Document особенно важен при разработке сценариев. Приведенная здесь схема иерархии объектов включает только основные свойства этого объекта, определенные в базовой объектной модели документа (Document Object Model Level 0 - DOM0). На поддержку этих свойств можно смело рассчитывать при использовании любого относительно современного браузера. Более поздние стандарты DOM1 и DOM2 представляют документ HTML в виде дерева и дают доступ ко всем элементам, несравненно расширяя возможности разработчика.

Свойства объекта Document

Начнем со скалярных свойств, общих для всех браузеров. Большинство их доступны как для чтения, так и для изменения. Отметим, что значения свойств, связанных с цветами текста, фона и гиперссылок, можно изменять динамически лишь в тех случаях, когда не заданы соответствующие описания CSS, которые имеют больший приоритет. Все значения свойств - строковые.

· title - текст заголовка документа (содержимое элемента title);

· body - Ссылается на элемент <body> или на самый внешний <frameset> в случае фреймовой структуры страницы.

· charset - Содержит кодировку символов документа, которую можно изменить.

· fgColor и bgColor - цвет текста и цвет фона документа;

· linkColor, vLinkColor, aLinkColor - цвета непосещенных, посещенных и активных гиперссылок;

· lastModified (только для чтения) - дата изменения документа;

· referrer (только для чтения) - URL документа, ссылка в котором привела к загрузке текущего документа;

· URL (и устаревшее location) - URL документа.

Более интересны и полезны для разработчика свойства-массивы объекта Document. Все они, естественно, имеют свойство length (количество элементов в массиве). Большинство свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с атрибутами соответствующих элементов HTML. Вот лишь некоторые из них, понятные без объяснений любому, кто знает HTML:

· объект Form имеет свойства name, action, method;

· объект Anchor имеет единственное свойство name;

· объект Link имеет свойства href, target;

· объект Image имеет свойства src, width, height.

К объектам документа, хранящимся в массивах images, forms и applets, а также к элементам форм можно обращаться и по имени, если в начальном теге соответствующего элемента HTML задан атрибу name. Пусть, например, в документе описано изображение

<img src="images/cat.jpg" id="cat_id" name="cat_name">

и оно является n-ым изображением, встречающимся в документе. К этому элементу img можно обратиться по крайней мере следующими способами (см. раздел Идентификация элементов документа):

1. Как к элементу массива images, используя его индекс (индексация начинается с 0):

window.document.images[n-1]

2. Как к элементу массива images, используя значение атрибута name как ключ массива:

window.document.images['cat_name']

3. Используя значение атрибута name как свойство объекта:

window.document.cat_name

4. Используя значение атрибута id и свойство getElementById:

window.document.getElementById('cat_id')

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

· open() - открывает новый документ; при этом для текущего документа все его содержимое удаляется.

· close() - закрывает ранее открытый документ, фиксируя внесенные изменения.

· clear() - очищает содержимое документа.

· createElement() - Создает элемент.

· getElementById() - Ищет элемент с указанным значением атрибута id элемента.

· write() - записывает в документ заданную в качестве аргумента строку.

· writeln() - аналогичен предыдущему, но выведенная в документ строка заканчивается символом перевода строки.

Методы write() и writeln() весьма полезны и часто используются для динамического формирования содержимого документа. Вот как, например, можно включить в документ дату его последнего изменения:

<script type="text/JavaScript"> window.document.write(document.lastModified); </script>

Получится (для того документа, который вы сейчас видите): 12/18/2009 23:37:08

Обратите внимание на то, что метод write() для текущего документа может применяться только в сценарии, формирующем документ на стадии его загрузки (то есть он может присутствовать в элементах script, включенных в тело документа body). Любые попытки выполнить этот метод для текущего документа в обработчике некоторого события приведет к очистке содержимого документа. А вот в случае реализации фреймовой структуры или наличия в документе встроенных фреймов iframe, этот метод можно применить и в обработчике события для модификации содержимого документов дочерних фреймов. При этом метод write() добавляет контент в указанный фрейм, не обнуляя его содержимое. При этом к фрейму следует обращаться по данному ему имени.

Например, если в текущем документе определен некий встроенный фрейм с именем "child":

<iframe src="empty.htm" name="child"></iframe>

в него можно добавить новый контент, задав в обработчике некоторого события инструкцию:

child.document.write('... текст с соответствующими тегами...')

Пример. В HTML-документе, приведенном ниже, приложение на языке JavaScript используется для получения значения часов в текущем системном времени. В зависимости от этого значения изменяется рисунок фона HTML-страницы. Для установки фона используется атрибут background HTML-тега <body>:

<html>

<script language="JavaScript">

theTime = new Date();

theHour = theTime.getHours();

if (theHour < 18) // < время меньше 18:00

document.writeln("<body background='day.gif text='White'>");

else

document.writeln("<body background='night.gif text='White'>");

</script>

This is the text of the body...

</body>

</html>

Метод document.getElementById нужен для обращения к элементам по их id. Это один из основных методов, используемых в JavaScript. Например, сейчас сделаем простенькую проверку заполненности текстовых полей. Если текстовое поле пустое, то выводим сообщение.

<html>

<body>

function isField() {

var obj = document.getElementById('text_id');

if (obj.value == '') {

alert('Текстовое поле пустое');

obj.value = 'Дизайн' //Заполняем текстовое поля

}

else {alert('В текстовом поле содержится текст: ' + obj.value);}

}

</script>

</body>

</html>

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

Изменение видимости элемента достигается за счет изменения css-свойства display. Если display = ‘block’, то элемент будет видим, если ‘none’, то скрыт.

<html>

<head>

<title>JavaScript показать и скрыть элемент с текстом</title>

</head>

<body>

function showHide(element_id) {

if (document.getElementById(element_id)) { //Если элемент с id-шником существует

//Записываем ссылку на элемент в переменную obj

var obj = document.getElementById(element_id);

//Если css-свойство display не block, то:

if (obj.style.display!= "block") {

obj.style.display = "block"; //Показываем элемент

}

else obj.style.display = "none"; //Скрываем элемент

}

//Если элемент с id-шником element_id не найден, то выводим сообщение

else alert("Элемент с id: " + element_id + " не найден!");

}

</script>

<!-- При клике запускаем функцию showHide, и передаем параметр

id-шник элемента который нужно показать/скрыть -->

<a href="javascript:void(0)" onclick="showHide('block_id')">Скрыть/Показать элемент</a><br/><br/>

Тут любой текст и html код<br/>

</div>

</body>

</html>

Объект window

Объект window обычно соответствует главному окну браузера и является объектом верхнего уровня в языке JavaScript, поскольку каждый документ может быть открыт только в окне. Предполагается, что такое окно существует, но при помощи метода window.open() можно открывать и другие окна и обращаться к ним посредством свойств объекта window.

Свойства

— defaultstatus — текстовое сообщение, которое по умолчанию выводится в строке состояния (status bar) окна браузера;

— frames — массив фреймов во фреймсодержащем документе;

— length — количество фреймов в текущем фреймсодержащем документе;

— name — заголовок окна

— parent — синоним, используемый для обращения к родительскому окну;

— self — синоним, используемый для обращения к текущему окну;

— status — текст временного сообщения в строке состояния окна браузера;

Методы

Метод alert() применяется для того, чтобы вывести на экран текстовое сообщение. Для открытия окна используется метод open(), а для закрытия — метод close(). С помощью метода confirm() происходит вывод на экран окна сообщения с кнопками Yes и No, а также возврат булева значения true или false (истина или ложь). Посредством метода prompt() на экран выводится диалоговое окно с полем ввода. Метод setTimeout() устанавливает в текущем окне обработку событий, связанных с таймером, а метод clearTimeout() отменяет обработку таких событий.

Примеры

Чтобы создать окно размером 400x400 пикселов и загрузить в него домашнюю страницу, следует записать следующий оператор языка JavaScript:

myWin = open("http://www.osborne.com", "myWin", "width=400,height=400");

Закрыть это окно позволяет оператор

myWin.close();

Анимация JavaScript

Чтобы заставить блок двигаться, нам понадобится css свойство position: absolute. После его установки, блок не будет привязан к документу, а его положение на сайте можно будет регулировать свойствами left и top.

Еще мы воспользуемся таймерами, которые будут каждые 100 миллесекунд перемещать блок. О тамерах можете почитать у уроке работа с таймерами на javascript.

<html>

<head>

<title>Анимация JavaScript | Дизайн студия OX2</title>

#block {

position: absolute;

background-color: red;

width: 100px;

height: 80px;

color: white;

}

</style>

</head>

<body>

var obj = document.getElementById("block");

var i = 0;

/**

* Функция moveBlock будет запускаться каждые 10 миллсекунд

* @author ox2.ru дизайн студия

**/

function moveBlock() {

obj.style.left = i;

obj.style.top = i;

i++;

}

//Каждые 5000 миллисекунд запускаем функцию test (5 секунд, 5000 миллисекунд)

setInterval(moveBlock, 10);

</script>

</body>

</html>

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

Объект RegExp

Спецсимволы в регулярном выражении

Проверка результатов: метод test

Поиск совпадений: метод exec

Строковые методы, поиск и замена

Метод search(regexp)

Метод match(regexp)

Замена, replace

Спецсимволы в строке замены

Замена через функцию

Статичные регэкспы

Объект RegExp

Регулярное выражение - это инструкция, описывающая на специально разработанном языке (RegExp) закон "сходства" искомой строки с образцом. Для чего это нужно? Например:

· Для организации поиска в тексте чего-либо.

· Для замены одной части подстрок другими.

· Для проверки корректности пользовательского ввода (наверно, вы не раз сталкивались с ситуацией, когда вводили адрес своей электронной почты в какую-либо форму и получали ошибку типа "Некорректный e-mail").

Регулярные выражения в javascript имеют особую краткую форму и стандартный PCRE-синтаксис. Работают они через специальный объект RegExp. Кроме того, у строк есть свои методы search,match,replace, но чтобы их понять - разберем-таки сначала RegExp.

Объект типа RegExp, или, короче, регулярное выражение, можно создать двумя путями

var p=/pattern/flags;

new RegExp("pattern"[, флаги])

pattern - регулярное выражение для поиска (замене), а флаги - строка из любой комбинации символов g(глобальный поиск), i(регистр неважен) и m(многострочный поиск).

Первый способ используется часто, второй - иногда. Например, два таких вызова эквивалентны:

var par=/[0-9a-z]+/i;

var reg = new RegExp("[0-9a-z]+", "i")

Здесь [0-9a-z]+ - шаблон, буквально означающий следующее "любое количество цифр и букв 1 и более раз". i - флаг, означающий, что регистр символов не имеет значение. Квадратные скобки означают, что в шаблоне может присутствовать любой из перечисленных в них литералов (в нашем случае цифры и строчные буквы).

При втором вызове - т.к регулярное выражение в кавычках, то нужно дублировать \. Следующие выражения эквивалентны.

re = new RegExp("\\w+")

re = /\w+/

При поиске можно использовать большинство возможностей современного PCRE-синтаксиса.

Спецсимволы в регулярном выражении

Символ	Значение
\	Для обычных символов - делает их специальными. Например, выражение /s/ ищет просто символ 's'. А если поставить \ перед s, то /\s/ уже обозначает пробельный символ. И наоборот, если символ специальный, например , то \ сделает его просто обычным символом "звездочка". Например, /a/ ищет 0 или больше подряд идущих символов 'a'. Чтобы найти а со звездочкой 'a' - поставим \ перед спец. символом: /a\/.
^	Обозначает начало входных данных. Если установлен флаг многострочного поиска ("m"), то также сработает при начале новой строки. Например, /^A/ не найдет 'A' в "an A", но найдет первое 'A' в "An A."
$	Обозначает конец входных данных. Если установлен флаг многострочного поиска, то также сработает в конце строки. Например, /t$/ не найдет 't' в "eater", но найдет - в "eat".
*	Обозначает повторение 0 или более раз. Например, /bo*/ найдет 'boooo' в "A ghost booooed" и 'b' в "A bird warbled", но ничего не найдет в "A goat grunted".
+	Обозначает повторение 1 или более раз. Эквивалентно {1,}. Например, /a+/ найдет 'a' в "candy" и все 'a' в "caaaaaaandy".
?	Обозначает, что элемент может как присутствовать, так и отсутствовать. Например, /e?le?/ найдет 'el' в "angel" и 'le' в "angle."Если используется сразу после одного из квантификаторов *, +,?, или {}, то задает "нежадный" поиск (повторение минимально возможное количество раз, до ближайшего следующего элемента паттерна), в противоположность "жадному" режиму по умолчанию, при котором количество повторений максимально, даже если следующий элемент паттерна тоже подходит. Кроме того,? используется в предпросмотре, который описан в таблице под (?=),(?!), и (?:).
.	(Десятичная точка) обозначает любой символ, кроме перевода строки: \n \r \u2028 or \u2029. (можно использовать [\s\S] для поиска любого символа, включая переводы строк). Например,/.n/ найдет 'an' и 'on' в "nay, an apple is on the tree", но не 'nay'.
(x)	Находит x и запоминает. Это называется "запоминающие скобки". Например, /(foo)/ найдет и запомнит 'foo' в "foo bar." Найденная подстрока хранится в массиве-результате поиска или в предопределенных свойствах объекта RegExp: $1,..., $9.Кроме того, скобки объединяют то, что в них находится, в единый элемент паттерна. Например, (abc)* - повторение abc 0 и более раз.
(?:x)	Находит x, но не запоминает найденное. Это называется "незапоминающие скобки". Найденная подстрока не сохраняется в массиве результатов и свойствах RegExp.Как и все скобки, объединяют находящееся в них в единый подпаттерн.
x(?=y)	Находит x, только если за x следует y. Например, /Jack(?=Sprat)/найдет 'Jack', только если за ним следует 'Sprat'. /Jack(?=Sprat\|Frost)/ найдет 'Jack', только если за ним следует 'Sprat' или 'Frost'. Однако, ни 'Sprat' ни 'Frost' не войдут в результат поиска.
x(?!y)	Находит x, только если за x не следует y. Например, /\d+(?!\.)/найдет число, только если за ним не следует десятичная точка./\d+(?!\.)/.exec("3.141") найдет 141, но не 3.141.
x\|y	Находит x или y. Например, /green\|red/ найдет 'green' в "green apple" и 'red' в "red apple."
{n}	Где n - положительное целое число. Находит ровно n повторений предшествующего элемента. Например, /a{2}/ не найдет 'a' в "candy," но найдет оба a в "caandy," и первые два a в "caaandy."
{n,}	Где n - положительное целое число. Находит n и более повторений элемента. Например, /a{2,} не найдет 'a' в "candy", но найдет все 'a' в "caandy" и в "caaaaaaandy."
{n,m}	Где n и m - положительные целые числа. Находят от n до m повторений элемента.
[xyz]	Набор символов. Находит любой из перечисленных символов. Вы можете указать промежуток, используя тире. Например, [abcd] - то же самое, что [a-d]. Найдет 'b' в "brisket", а также 'a' и 'c' в "ache".
[^xyz]	Любой символ, кроме указанных в наборе. Вы также можете указать промежуток. Например, [^abc] - то же самое, что [^a-c]. Найдет 'r' в "brisket" и 'h' в "chop."
[\b]	Находит символ backspace. (Не путать с \b.)
\b	Находит границу слов (латинских), например пробел. (Не путать с[\b]). Например, /\bn\w/ найдет 'no' в "noonday"; /\wy\b/ найдет 'ly' в "possibly yesterday."
\B	Обозначает не границу слов. Например, /\w\Bn/ найдет 'on' в "noonday", а /y\B\w/ найдет 'ye' в "possibly yesterday."
\cX	Где X - буква от A до Z. Обозначает контрольный символ в строке. Например, /\cM/ обозначает символ Ctrl-M.
\d	находит цифру из любого алфавита (у нас же юникод). Испльзуйте[0-9], чтобы найти только обычные цифры. Например, /\d/ или/[0-9]/ найдет '2' в "B2 is the suite number."
\D	Найдет нецифровой символ (все алфавиты). [^0-9] - эквивалент для обычных цифр. Например, /\D/ или /[^0-9]/ найдет 'B' в "B2 is the suite number."
\f,\r,\n	Соответствующие спецсимволы form-feed, line-feed, перевод строки.
\s	Найдет любой пробельный символ, включая пробел, табуляцию, переводы строки и другие юникодные пробельные символы. Например, /\s\w*/ найдет ' bar' в "foo bar."
\S	Найдет любой символ, кроме пробельного. Например, /\S\w*/найдет 'foo' в "foo bar."
\t	Символ табуляции.
\v	Символ вертикальной табуляции.
\w	Найдет любой словесный (латинский алфавит) символ, включая буквы, цифры и знак подчеркивания. Эквивалентно [A-Za-z0-9_]. Например, /\w/ найдет 'a' в "apple," '5' в "$5.28," и '3' в "3D."
\W	Найдет любой не-(лат.)словесный символ. Эквивалентно [^A-Za-z0-9_]. Например, /\W/ и /[^$A-Za-z0-9_]/ одинаково найдут '%' в "50%."
\n	где n - целое число. Обратная ссылка на n-ю запомненную скобками подстроку. Например, /apple(,)\sorange\1/ найдет 'apple, orange,' в "apple, orange, cherry, peach.". За таблицей есть более полный пример.
\0	Найдет символ NUL. Не добавляйте в конец другие цифры.
\xhh	Найдет символ с кодом hh (2 шестнадцатиричных цифры)
\uhhhh	Найдет символ с кодом hhhh (4 шестнадцатиричных цифры).

Проверка результатов: метод test

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

if (/\s/.test("строка")) {

...В строке есть пробелы!...

}

Метод test начинает поиск, начиная со свойства lastIndex объекта RegExp, если оно установлено.
Поиск совпадений: метод exec

Метод exec возвращает массив и ставит свойства регулярного выражения.

Если совпадений нет, то возвращается null.

Например,

1 // Найти одну d, за которой следует 1 или более b, за которыми одна d

2 // Запомнить найденные b и следующую за ними d

3 // Регистронезависимый поиск

4 var myRe = /d(b+)(d)/ig;

5 var myArray = myRe.exec("cdbBdbsbz");

В результате выполнения скрипта будут такие результаты:

Объект	Свойство/Индекс	Описания	Пример
myArray		Содержимое myArray.	["dbBd", "bB", "d"]
index	Индекс совпадения (от 0)
input	Исходная строка.	cdbBdbsbz
[0]	Последние совпавшие символы	dbBd
[1],...[n]	Совпадения во вложенных скобках, если есть. Число вложенных скобок не ограничено.	[1] = bB [2] = d
myRe	lastIndex	Индекс, с которого начинать следующий поиск.
ignoreCase	Показывает, что был включен регистронезависимый поиск, флаг "i".	true
global	Показывает, что был включен флаг "g" поиска всех совпадений.	true
multiline	Показывает, был ли включен флаг многострочного поиска "m".	false
source	Текст паттерна.	d(b+)(d)

Если в регулярном выражении включен флаг "g", Вы можете вызывать метод exec много раз для поиска последовательных совпадений в той же строке. Когда Вы это делаете, поиск начинается на подстроке str, с индекса lastIndex. Например, вот такой скрипт:

var myRe = /ab*/g;

var str = "abbcdefabh";

while ((myArray = myRe.exec(str))!= null) {

var msg = "Found " + myArray[0] + ". ";

msg += "Next match starts at " + myRe.lastIndex;

print(msg);

}

Этот скрипт выведет следующий текст:

Found abb. Next match starts at 3

Found ab. Next match starts at 9

В следующем примере функция выполняет поиск по input. Затем делается цикл по массиву, чтобы посмотреть, есть ли другие имена.

Предполагается, что все зарегистрированные имена находятся в массиве А:

var A = ["Frank", "Emily", "Jane", "Harry", "Nick", "Beth", "Rick",

"Terrence", "Carol", "Ann", "Terry", "Frank", "Alice", "Rick",

"Bill", "Tom", "Fiona", "Jane", "William", "Joan", "Beth"];

function lookup(input)

{

var firstName = /\w+/i.exec(input);

if (!firstName)

{

print(input + " isn't a name!");

return;

}

var count = 0;

for (var i = 0; i < A.length; i++)

{

if (firstName[0].toLowerCase() == A[i].toLowerCase())

count++;

}

var midstring = (count == 1)? " other has ": " others have ";

print("Thanks, " + count + midstring + "the same name!")

}

Строковые методы, поиск и замена

Следующие методы работают с регулярными выражениями из строк.

Все методы, кроме replace, можно вызывать как с объектами типа regexp в аргументах, так и со строками, которые автоматом преобразуются в объекты RegExp.

Так что вызовы эквивалентны:

var i = str.search(/\s/)

var i = str.search("\\s")

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

var regText = "\\s"

var i = str.search(new RegExp(regText, "g"))

Метод search(regexp)

Возвращает индекс регулярного выражения в строке, или -1.

Если Вы хотите знать, подходит ли строка под регулярное выражение, используйте метод search(аналогично RegExp-методы test). Чтобы получить больше информации, используйте более медленный метод match(аналогичный методу RegExp exec).

Этот пример выводит сообщение, в зависимости от того, подходит ли строка под регулярное выражение.

function testinput(re, str){

if (str.search(re)!= -1)

midstring = " contains ";

else

midstring = " does not contain ";

document.write (str + midstring + re.source);

}

Метод match(regexp)

Если в regexp нет флага g, то возвращает тот же результат, чтоregexp.exec(string).

Если в regexp есть флаг g, то возвращает массив со всеми совпадениями.

Чтобы просто узнать, подходит ли строка под регулярное выражение regexp, используйте regexp.test(string).

Если Вы хотите получить первый результат - попробуйте regexp.exec(string).

В следующем примере match используется, чтобы найти "Chapter", за которой следует 1 или более цифр, а затем цифры, разделенные точкой. В регулярном выражении есть флаг i, так что регистр будет игнорироваться.

str = "For more information, see Chapter 3.4.5.1";

re = /chapter (\d+(\.\d)*)/i;

found = str.match(re);

alert(found);

Скрипт выдаст массив из совпадений:

• Chapter 3.4.5.1 - полностью совпавшая строка

• 3.4.5.1 - первая скобка

•.1 - внутренняя скобка

Следующий пример демонстрирует использование флагов глобального и регистронезависимого поиска с match. Будут найдены все буквы от А до Е и от а до е, каждая - в отдельном элементе массива.

var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

var regexp = /[A-E]/gi;

var matches = str.match(regexp);

document.write(matches);

// matches = ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']

Замена, replace

Метод replace может заменять вхождения регулярного выражения не только на строку, но и на результат выполнения функции. Его полный синтаксис - такой:

var newString = str.replace(regexp/substr, newSubStr/function)

Regexp

Объект RegExp. Его вхождения будут заменены на значение, которое вернет параметр номер 2

Substr

Строка, которая будет заменена на newSubStr.

NewSubStr

Строка, которая заменяет подстроку из аргумента номер 1.

Function

Функция, которая может быть вызвана для генерации новой подстроки (чтобы подставить ее вместо подстроки, полученной из аргумента 1).

Метод replace не меняет строку, на которой вызван, а просто возвращает новую, измененную строку. Чтобы осуществить глобальную замену, включите в регулярное выражение флаг "g".

Если первый аргумент - строка, то она не преобразуется в регулярное выражение, так что, например,

var ab = "a b".replace("\\s","..") // = "a b"

Вызов replace оставил строку без изменения, т.к искал не регулярное выражение \s, а строку "\s".

Спецсимволы в строке замены

В строке замены могут быть такие спецсимволы:

Pattern	Inserts
$$	Вставляет "$".
$&	Вставляет найденную подстроку.
$`	Вставляет часть строки, которая предшествует найденному вхождению.
$'	Вставляет часть строки, которая идет после найденного вхождения.
$n or $nn	Где n или nn - десятичные цифры, вставляет подстроку вхождения, запомненную n-й вложенной скобкой, если первый аргумент - объект RegExp.

Замена через функцию

Если Вы указываете вторым параметром функцию, то она выполняется при каждом совпадении.

В функции можно динамически генерировать и возвращать строку подстановки.

Первый параметр функции - найденная подстрока. Если первым аргументом replaceявляется объект RegExp, то следующие n параметров содержат совпадения из вложенных скобок. Последние два параметра - позиция в строке, на которой произошло совпадение и сама строка.

Например, следующий вызов replace возвратит XXzzzz - XX, zzzz.

function replacer(str, p1, p2, offset, s)

{

return str + " - " + p1 + ", " + p2;

}

var newString = "XXzzzz".replace(/(X*)(z*)/, replacer)

Как видите, тут две скобки в регулярном выражении, и потому в функции два параметра p1, p2.

Если бы были три скобки, то в функцию пришлось бы добавить параметр p3.

Следующая функция заменяет слова типа borderTop на border-top:

Воспользуйтесь поиском по сайту: