Очень часто при написании скриптов возникает необходимость работы с текстовой строкой, например: объединение строк, поиск подстроки в строке, перевод из нижнего регистра в верхний и наоборот. Различные действия со строкой позволяет выполнять класс String. Как и в случае с классом Date работать можно не с самим объектом string, а с конкретным экземпляром, который создаётся конструктором new String():
Varstring = new String (“JavaScript”);
Здесь создан экземпляр объекта string с именем varstring. Экземпляр объекта string это строка, в нашем случае “JavaScript”, т.е. строка переданная в качестве параметра конструктору new String().Если параметр конструктора пропущен, создаётся пустая строка.
При работе со строками следует учитывать, что нумерация символов в строке начинается с 0.
Единственным свойством объекта string является length, которое возвращает длину строки. Например:
t=new String("Hello world!!!")
i = t.length;
В переменную i будет возвращено количество символов в строке t, т.е. 14. Заметим, что пробелы также считаются символами:
t=new String("H ")
i = t.length;
Здесь i будет равно 18.
Рассмотрим наиболее часто используемые методы объекта string.
Часто приходится искать подстроку в строке. Например, предположим, что свойство pathname объекта location возвратило следующее значение – «/D:\DiplomLuda\doc\Ex\5.html» и необходимо проверить, входит ли в это значение строка «str13», т.е. является ли текущая страница документом с именем str13. Для проверки принадлежности подстроки строке применяется метод IndexOf(подстрока, индекс начала поиска). Строка, в которой производится поиск подстроки, должна быть экземпляром объекта string. В первой главе было сказано, что экземпляр объекта string (текстовая строка) может быть создан тремя способами, поэтому прежде чем искать подстроку в строке создадим её экземпляр, например, так:
str=location.pathname;
В этой строке создан экземпляр объекта string с именем str, и этому экземпляру присвоено значение свойства pathname объекта location. Алогичное действие можно сделать так:
str=new String(location.pathname);
Конструктор в качестве параметра получил свойство pathname, в результате чего созданный экземпляр str получил значение этого свойства.
Пусть например свойство pahtname имеет значение «/D:\DiplomLuda\doc\Ex\5.html». Необходимо узнать, входит ли в эту строку подстрока «13.html». Для этого используем метод IndexOf():
rez=str.indexOf("str13");
Второй параметр пропущен, это означает, что поиск будет вестись с первого символа. Если подстрока «str13» не будет найдена (как в нашем примере), то метод вернёт значение -1. Если же строка найдена, то возвращаемое значение - это номер символа, начиная с которого искомая подстрока входит в строку. В нашем примере переменная rez будет равна -1. Будем искать существующую подстроку:
rez=str.indexOf("Dip");
В этом случае в переменную rez будет возвращено значение 4 – т.е. подстрока «Dip» начинается с 4-го символа. Заметим, что при поиске учитывается регистр символов, так например в следующем случае будет возвращено значение -1 (т.е. подстрока не найдена):
rez=str.indexOf("dip");
Рассмотрим ещё пример. Свойство appName объекта navigator возвращает имя обозревателя, например для Inernet Explorer будет возвращена строка «Microsoft Internet Explorer», поэтому, чтобы убедится, что мы действительно имеем дело c Expolorer достаточно сделать так:
web=navigator.appName;
if (web.indexOf("Explorer")!=-1) {document.write("У Вас действительно Internet Explorer")}
else {document.write("У Вас не Internet Explorer")}
Таким образом, метод indexOf возвращает номер первого символа с которого начинается искомая подстрока. Но иногда возникает необходимость найти номер последнего символа (т.е. первого с конца) с которого находится подстрока. Для этого существует метод lastIndexOf({Подстрока},[{Начало поиска}]).
Для извлечения подстроки из строки существует метод substr({начало фрагмента},[{длина фрагмента}]), который возвращает фрагмент извлечённой строки. Например:
Str= “Это текст!!!”
document.write(str.substr(1,5));
На странице будет напечатано «то те», т.е. пять символов, начиная с символа с номером 1 (не забываем, что нумерация начинается с 0).
На многих страницах Интернет присутствую формы, в которые необходимо ввести какую-либо информацию (фамилию, адрес электронной почты, номер телефона и т.д.) которая затем проверяется на корректность. Так например, поле для указания фамилии не должно сдержать цифр, поле для ввода номера телефона не должно содержать символов, адрес почты должен содержать знак @. Приведём пример, как осуществлять подобную проверку. Пример 28
Пусть на станице содержится два поля: одно для ввода имени пользователя, второе для ввода электронного адреса:
<form name="first">
Введите Ваше имя:<br>
<input type="text" name="text1" value="Петров">
<input type="button" name="button1" value="Проверка" onClick="test1(this.form)">
<P>
Введите Ваш адрес e-mail:<br>
<input type="text" name="text2" VALUE="my-email@rambler">
<input type="button" name="button2" value="Проверка" onClick="test2(this.form)">
</form>
Для проверки корректности введённого имени служит функция test1() – в качестве параметра передаётся указатель на форму, в которой расположены кнопка и поле для ввода текста. Для проверки корректности введённого электронного адреса служит функция test2() – параметр как и в первом случае – указатель на родительскую форму.
Давайте рассмотрим функцию проверки имени – т.е. test1(). Договоримся, что введённое имя считаем верным, если оно не содержит цифр (конечно оно не должно содержать никаких символов кроме букв, но для простоты рассмотрим именно такой пример). Также поле должно быть заполненным т.е. отличным от знака « ». Поступим следующим образом: предположим, что введённое имя корректно и переменной Fl присвоим значение 0 – это будет означать, что введённая строка корректна. Затем в цикле сравним каждый символ введённой строки с цифрами от 0 до 9, и если произойдёт совпадение (т.е. один из символов строки цифра) то переменной fl присвоим значение 1. Т.о. если fl=1, это значит, что в строке имени есть цифра. Если же ни один символ строки не совпал ни с одной цифрой значение переменной останется равным 0.
Указанные действия можно выполнить следующим образом:
fl=0
text=form.text1.value;
for (i=0;i for (j=0;j<10;j++){
if (text.substr(i,1)==j) {fl=1}}}
Первый цикл предназначен для просмотра всех символов строки – переменная цикла i используется в методе substr и необходима для просмотра каждого символа. Второй цикл необходим для перебора всех десяти цифр от 0 до 9.
Но пользователь может вообще не ввести никакой строки 0 это необходимо также учесть. Для этого достаточно переменную text (в ней и содержится ведённая строка) сравнить с пустой строкой т.е. с «». Если окажется, что введённая пользователем строка пустая, установим значение переменной равное 2. Т.е. если fl=2, следовательно, введённая строка является пустой.
if (text == "") fl=2
Теперь для сообщения достаточно проанализировать значение переменной fl и в зависимости от этого значения выдать сообщение:
if (fl==0) alert("Имя указано верно")
if (fl==1) alert("В имени не может быть цифр!")
if (fl==2) alert("Пожалуйста, введите строку!")
Теперь перейдём к рассмотрению функции test(2) 0 функция для анализа корректности введённого электронного адреса. Непременным символом в адресе электронной почты является знак «@». Поэтому условимся считать адрес корректным если в нём присутствует указанный символ, и не корректным – если такой символ не присутствует. Также необходимо, чтобы этот знак не стоял в конце строки, после него должно быть указано ещё одно имя, поэтому этот момент тоже надо учесть.
Итак, сначала введём переменную fl, которой присвоим значение 0 – это будет означать, что введённый адрес верен. Теперь необходимо проверить, ввели пользователь строку вообще, т.е. не является строка адреса пустой. Как это сделать мы уже знаем:
if (form.text2.value == "") {alert("Ведите текстовую строку!");fl=1}
Кроме вывода сообщения об ошибке, переменной fl присвоим значение 1, что будет означать, что введённая строка содержит ошибку.
Теперь проверим, присутствует ли в строке адреса знак @. Для этого используем метод indexOf(“@”): если он вернёт значение -1, значит знак @ в данной строке отсутствует:
if (form.text2.value.indexOf('@', 0) == -1) {alert("Адрес должен содержать знак @");fl=1}
Не забываем переменной fl присвоить значение 1 и в этом случае.
Осталось проверить, не стоит ли знак @ на последнем месте:
if (form.text2.value.indexOf('@', 0) == form.text2.value.length-1 ) {alert("После знака @ должно быть указно ещё одно имя!!!");fl=1}
Здесь мы использовали то, что метод indexOf() вернёт номер позиции на которой стоит знак @. Номер последний позиции вернёт свойство length. Не забываем, что метод indexOf() возвращает номер позиции начиная с 0, поэтому сравним это значение с значением, которое вернуло свойство length уменьшенным на 1.
Если же ни одно из трёх выше указанных условий не выполнилось, т.е. адрес корректен, то переменная fl так и останется равной 0 и в этом случае можно выводить сообщение об отсутствии ошибки:
if (fl==0) alert("Адрес верный!!!");
Рассмотрим ещё один пример – бегущая строка. Пример 29
Пусть на странице расположен элемент для ввода текста, и в него будем выводить бегущую строку.
Что же представляет собой бегущая строка? Это обыкновенная строка, которая меняется следующим образом: первый символ удаляется и ставиться на место последнего – в итоге длина строки остаётся неизменной и создаётся эффект бега.
Рассмотрим, как это сделать на JavaScript. Сначала создадим экземпляр объекта string и инициализируем его текстом, который мы хотим сделать бегущим, например, так:
var msg = "Это бегущая строка. Ха-Ха-Ха ";
Теперь оформим отдельно функцию, которая и будет менять эту строку, например функцию scroll.
Договорились, что текст будет выводиться в текстовом поле – например поле имеет имя scrolling и принадлежит форме с именем form1:
<form name="Form1">
<input type="text" name="scrolling" value="" size="25">
</form>
Итак, осуществим первый вывод строки msg в текстовое поле:
document.Form1.scrolling.value = msg;
Теперь необходимо изменить эту строку указным выше способом: сначала у строки msg убираем первую букву а затем её прибавляем в конец строки:
msg = msg.substr(1, msg.length-1) + msg.substring(0, 1);
Метод substr(1, msg.length) вернёт подстроку, которая начинается с первого символа строки msg и содержит количество символов на единицу меньше чем вся длина строки msg. Иначе говоря – эта вся строка msg без первого символа. Затем к ней прибавляется подстрока которую вернёт метод msg.substring(0, 1) – т.е. первый символ строки msg. В результате переменная msg будет содержать уже изменённую строку. Поэтому теперь снова необходимо вызвать функцию scroll для вывода новой строки msg и очередного её изменения. Сделаем это с помощью метода setTimeout():
setTimeout("scroll()", 150)
Функция scroll() будет вызываться через каждые 150 миллисекунд.
Теперь достаточно вызвать функцию scroll() один раз при загрузке документа:
<body onLoad="onLoad=scroll()">
Рассмотрим ещё один похожий пример. Пример 30.
В этом примере анимация строки будет происходить в заголовке окна и строка изменятся следующим образом: отображение строки начинается с первой буквы и на каждом шаге прибавляется по одной букве, пока вся строка не отобразиться целиком. Затем происходит всё сначала.
Так как анимацию хотим сделать в заголовке окна, следовательно, сообщение в заголовке необходимо задать явно, например, так:
<TITLE>Java scripts примеры -[ Анимация в заголовке документа]</TITLE>
Теперь рассмотрим скрипт.
Прежде всего необходимо считать текст из заголовка окна. Доступ к нему можно получить через свойство Title объекта document:
var tit = document.title;
Теперь переменная tit содержит строку из заголовка строки.
Также сразу объявим переменную, которая будет указывать на количество отображаемых символов из заголовка, в начале этот номер 0, т.к. сначала в заголовке не будет выводиться ни один символ:
var c = 0;
Перейдём к созданию функции вывода и преобразования строки (функция wt). Начнём с того, что выведем первый символ строки tit:
document.title = tit.substring(0,c);
Свойство title объекта документ доступно и для изменения. Поэтому присвоим ему значение, которое равно строке возвращённой методом substring(tit,c). Переменная с=0, значит возвращено будет 0 символов строки tit. В результате в заголовке документа не отобразиться ни одного символа этой строки . Теперь проверим, не были ли отображены все символы строки tit, т.е. сравним переменную c с длинной строки tit. Если окажется, что выведенная строка содержит все символы строки tit, то снова обнуляем переменную c и через 3 секунды вызываем функцию wt. Если окажется, что выведены не все символы, то просто увеличиваем значение переменной c на 1 (т.е. в следующий раз будет возвращена строка в которой символов на 1 больше чем в предыдущей) и вызываем функцию wt через 200 миллисекунд:
if(c==tit.length)
{c = 0;
setTimeout("wt()", 3000)}
else
{c++;
setTimeout("wt()", 200)}}
Завершив, таким образом функцию wt, не забываем вызвать её из скрипта.
Wt()
</script>
Но в основном методы класса string служат для работы с кодом HTML. К этим методам относятся fixed(), fontcolor(), fontsize(), italics(), small(), strike(), sup(), sup(). Действие этих методов описано в главе 1, но для большей наглядности рассмотрим пример: Пример 31
Сначала мы создали несколько экземпляров объекта string:
var st1="Текст в теге TT"
var st2="Текст в теге fontcolor(red)"
var st3="Текст в теге fontsize(6)"
var st4="Текст в теге i"
var st5="Текст в теге small"
var st6="Текст в теге strike"
var st7="Текст в теге sub"
var st8="Текст в теге sup"
var st9=" Комбинированный Текст в заголовок"
var st10=" Комбинированный Текст1"
var st11=" Комбинированный Текст1"
var st12=" Комбинированный Текст1"
Затем выводим каждый из них на страницу, применив к ним один из методов:
document.write(st1.fixed()+"<br>");
document.write(st2.fontcolor('red')+"<br>");
document.write(st3.fontsize(6)+"<br>");
document.write(st4.italics()+"<br>");
document.write(st5.small()+"<br>");
document.write(st6.strike()+"<br>");
document.write("Обычный текст"+st7.sub()+"<br>");
document.write("Обычный текст"+st8.sup()+"<br>");
В результате текст будет отображён так как будто его поместили в один из указанных тегов.
Заметим, что можно применять метод к уже изменённому ранее другим методом объекту, в результате чего текст с предыдущими тегами будет помещён в новые теги:
document.write("Обычный текст"+st10.sup().strike()+"<br>");
document.write("Обычный текст"+st11.strike().sup()+"<br>");
document.write("Обычный текст"+st12.sup().small()+"<br>");
Чтобы убедится, что текст действительно помещается в теги, выведем его в заголовок, применив к нему два различных метода:
document.title=st9.fixed().strike();
Видно, что в результате применения к тексту st9 метода fixed() текст был помещён в парный тег <TT>. Затем мы снова к нему применили метод strike() – в результате текст st9, вместе с тегами <TT> помещён в другой парный тег <STRIKE>.