Лекция 5. Методы объекта String

Метод getElementById()

Для проверки корректности вводимых в форму данных требуется способ получения этих данных со страницы. Ключом, дающим JS доступ к элементам страницы, является атрибут id в теге HTML:

<input type=”text” id=”example01” name=”test” />

JS позволяет восстанавливать элементы веб-страницы по их номеру ID при помощи метода getElementById(). Этот метод не забирает данные напрямую, а представляет поле HTML в виде объекта JS. Для доступа к данным достаточно воспользоваться свойством value этого поля.

Формально, getElementById() не самостоятельная функция, а метод объекта документа.

document.getElementById(“example01”)
document.getElementById(“example01”).value

Доступ к элементам страницы возможен только при условии уникального значения атрибута id.

Свойство innerHTML

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

Свойство innerHTML применяется только для задания значений таких элементов, как div, span, p и прочих контейнеров. Свойство innerHTML полностью переписывает предыдущее значение атрибута. Нельзя добавить значение в innerHTML.

Свойство innerHTML не входит в стандарт. Изначально оно было создано Microsoft как функция браузера Internet Explorer. Постепенно с ним научились работать и другие браузеры, и свойство стало неофициальным стандартом быстрого и удобного изменения веб-элементов.

Объект String

В javascript работа со строками является привычным делом, так как это самый обычный тип данных. Существует не мало методов воздействия на объект String (строка)

Создание

var a = 'my string'

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

var str = "string literal"

В строковых литералах можно использовать escape-последовательности для представления особых знаков, которые нельзя напрямую использовать в строках, например символа перевода строки или знаков Юникода. При компиляции сценария каждая escape-последовательность в строковом литерале преобразуется в знаки, которые она представляет.

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

var str = "\u1234"

Свойства

length

Описание

Для null-строки длина будет равна 0.

Пример

Будет выведена цифра 8 в диалоговом окне Alert:

var x="Netscape"
alert("The string length is " + x.length)
"12345".length // 5

Методы

split

Синтаксис

var arr = str.split([separator][, limit]);

Аргументы

separator – регулярное выражение или строка, по которой делить str

limit – максимальное количество кусков, на которые может быть разбита строка. Части строки после limit частей теряются.

Описание, примеры

Метод split возвращает новый массив.

Строка бьется по separator, при разбивании separator пропадает:

arr = "a,b,c".split(',')  // массив ["a", "b", "c"]

Если separator не указан или совпадений нет, то возвращаемый массив состоит из одного элемента - исходной строки.

Если separator является регулярным выражением со вложенными скобками, то каждый раз при совпадении separator все результаты захвата скобками, включая undefined результаты, добавляются в выходной массив.

Если вызывающая строка пуста, то split возвращает массив из одной пустой строки, а не пустой массив.

Следующий пример делит по ',' и убирает лишние пробелы вокруг запятой.

Пример: по регулярному выражению

var tags = "Лето, зима, осень 2014 года"
var re = /\s*,\s*/
var tagList = tags.split(re);
alert(tagList) //  ["Лето", "зима", "осень 2014 года"]

При делении с ограничением limit - элементы массива свыше limit будут отброшены.

Пример: Ограничение массива

var str ="a b с d"
str.split(' ',2)
// ["a", "b"], а не ["a" "b c d"]

Следующий пример иллюстрирует добавление в массив результатов захвата вложенными скобками.

Пример: Вложенные скобки

var myString = "Hello 1 word. Sentence number 2."
var splits = myString.split(/(\d)/)
// splits =  ["Hello ", "1", " word. Sentence number ", "2", "."]

Благодаря скобкам, найденный разделитель separator сохранился и вошел в результирующий массив.

charCodeAt

Синтаксис 

var codepoint = string.charCodeAt(index)

Аргументы

index – целое число от 0 до длины строки-1

Описание, примеры

Юникодное значение от 0 до 1,114,111. Первые 128 значений Unicode совпадают с кодировкой ASCII.

charCodeAt() всегда возвращает значение, меньшее 65536. Это - из за того, что более высокие юникод-символы представлены парой вспомогательных псевдо-символов, которые вместе составляют реальный символ.

charCodeAt() возвращает NaN, если указанный индекс меньше нуля или больше/равен длине строки.

Пример: Использование charCodeAt

// возвратит 65, unicode-код для А
"ABC".charCodeAt(0) // 65

String.fromCharCode

Синтаксис

String.fromCharCode(num1, ..., numN)

Аргументы

num1, ..., numN – последовательность чисел, представляющих собой коды Unicode-символов

Описание, примеры

Этот метод возвращает элементарную строку, а не объект типа String.

Так как fromCharCode - статический метод String, он всегда вызывается как String.fromCharCode().

Пример: Использование fromCharCode

// вернет строку "ABC".
String.fromCharCode(65,66,67)

charAt

Синтаксис

str.charAt(index)

Аргументы

index – Целое число от 0 до количества символов в строке минус 1

Описание, примеры

Символы идут слева направо. Первый символ имеет позицию 0, а последний string.length-1.

Если указанный index лежит за пределами этого диапазона, яваскрипт вернет пустую строку.

Пример: перечисление символов в строке

var anyString="Привет, мир"
alert("Символ на позиции 0 '" + anyString.charAt(0) + "'");
alert("Символ на позиции 3 '" + anyString.charAt(3) + "'");
alert("Символ на позиции 77 '" + anyString.charAt(999) + "'");

Выведет:

Символ на позиции 0 'П'
Символ на позиции 3 'в'
Символ на позиции 77 ''

concat

Синтаксис

result = string1.concat(string2, string3[, ..., stringN])

Аргументы

string2...stringN – сроки, которые будут прибавлены к string1

Описание, примеры

Выполняет действие, аналогичное оператору + для строк.

a = "строка"
b = " очень"
с = " длинная"
alert(a.concat(b,c)) // строка очень длинная

lastIndexOf

Синтаксис

str.lastIndexOf(searchValue[, fromIndex])

Аргументы

searchValue – искомая подстрока

fromIndex – индекс, от которого начинать поиск по направлению к началу строки. От 0 до str.length-1. Значение по умолчанию: str.length

Описание, примеры

Символы в строке идут слева направо. Позиция первого символа 0, последнего - длина строки минус один.

"canal".lastIndexOf("a")   // 3
"canal".lastIndexOf("a",2) // 1
"canal".lastIndexOf("a",0) // -1
"canal".lastIndexOf("x")   // -1

Метод lastIndexOf чувствителен к регистру символов.

Пример: регистр важен

"Привет".lastIndexOf("п") // -1

search

Синтаксис

idx = str.search(regexp)

Аргументы

regexp – объект типа RegExp или строка

Описание, примеры

Этот метод удобен, когда нужно проверить, есть ли совпадения с регулярным выражением (аналогично RegExp#test).

Возвращает индекс первого совпадения, или -1 , если не найдено

Пример: Проверка на совпадение

function testinput(re, str){
   if (str.search(re) != -1)
      return true
   else
      return false
}
alert(testinput(/something/, "somestr")) // false

match

Метод str.match работает по-разному, в зависимости от наличия или отсутствия флага g, поэтому сначала мы разберём вариант, когда его нет.

В этом случае str.match(reg) находит только одно, первое совпадение.

Результат вызова — это массив, состоящий из этого совпадения, с дополнительными свойствами index — позиция, на которой оно обнаружено и input — строка, в которой был поиск.

У этого массива не всегда только один элемент. Если часть шаблона обозначена скобками, то она станет отдельным элементом массива.

Синтаксис

str.match(regexp)

Аргументы

regexp – регулярное выражение в виде объекта RegExp или строка

Описание, примеры

Если регулярное выражение без флага "g", то возвращает такой же результат, как regexp.exec(str).

Если же для регулярного выражения указан флаг "g", то метод возвращает массив, содержащий все совпадения.

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

Замечания

Если вы хотите только проверить, совпадает ли строка с регулярным выражением - используйте regexp.test(string). Если вам нужно только первое совпадение - вам может лучше подойти regexp.exec(string)

Пример без глобального поиска

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

str = "За информацией обратитесь: Глава 3.4.5.1";
re = /глава (\d+(\.\d)*)/i
found = str.match(re)
document.write(found)

Возвратит массив из трех элементов:

["Глава 3.4.5.1", "3.4.5.1", ".1"]

"Глава 3.4.5.1" - полное совпадение с регулярным выражением /глава (\d+(\.\d)*)/i,

"3.4.5.1" - первая скобка в совпадении,

".1" - вторая скобка в совпадении

Пример с глобальным поиском

При глобальном поиске результат match - просто массив всех совпадений (и null, если их нет).

Выведет массив из двух элементов:

[ "Глава 3.4.5.1", "Глава 7.5" ]

Скобки при таком поиске не учитываются.

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

toLowerCase

Синтаксис

str.toLowerCase()

Описание, примеры

var upperText="ПриВет"
document.write(upperText.toLowerCase()) // привет

toUpperCase

Синтаксис

str.toUpperCase()

Описание, примеры

var upperText="ПриВет"
document.write(upperText.toUpperCase()) // ПРИВЕТ

substring

Синтаксис

str.substring(indexA, [indexB])

Аргументы

indexA – целое число от 0 до длины строки-1

indexB – целое число от 0 до длины строки-1

Описание, примеры

Метод substring возвращает подстроку, начиная с позиции indexA до, но не включая indexB.

В частности:

    Если indexA = indexB, возвращается пустая строка

    Если indexB не указан, substring возвращает символы до конца строки

    Если какой-то из аргументов меньше 0 или является NaN - он считается равным 0

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

Если indexA > indexB, тогда substring ведет себя, как будто аргументы поменялись местами.

Например, str.substring(1, 0) == str.substring(0, 1).

var str = "Моя строка";
alert(str.substring(0,3)); // Моя              
alert(str.substring(1,2)); // о
alert(str.substring(3,0)); // Моя              
alert(str.substring(4)); // "строка"

slice

Синтаксис

var sub = string.slice(beginSlice[, endSlice])

Аргументы

beginSlice – позиция, начиная от 0, с которой начинается участок

endSlice – позиция, на которой заканчивается участок

Описание, примеры

Метод slice возвращает часть строки от beginSlice до endSlice, но не включая символ под номером endSlice, не меняя вызывающую строку.

Например, string.slice(1,4) возвратит участок строку со 2го по 4й символы, т.е из символов с позицией 1, 2 и 3.

Если параметр endSlice меньше нуля, то он обозначает сдвиг относительно конца строки.

Например, string.slice(2,-1) вернет участок строки, начиная от 3го символа (с индексом 2), и кончая предпоследним.

var str ="Вот такая строка"
str.slice(0,2) // "Во"
str.slice(1,-1) // "от такая строк"

indexOf

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

Синтаксис

str.indexOf(searchValue[, fromIndex])

Аргументы

searchValue – искомая подстрока

fromIndex – позиция, с которой начинать поиск: от 0 до длины строки-1

Описание, примеры

Поиск осуществляется слева направо. Метод чувствителен к регистру символов.

"Привет, мир".indexOf("Привет")    // вернет 0

"Привет, мир".indexOf("Корова")    // вернет -1

"Привет, мир".indexOf("мир")    // вернет 8

"Привет, мир".indexOf("Мир") // вернет -1

Пример: с позицией

"Привет, мир".indexOf("Привет", 0)    // вернет 0

"Привет, мир".indexOf("р", 1)    // вернет 1

"Привет, мир".indexOf("р", 5)    // вернет 10

Пустая подстрока находится в любом случае:

Пример: для пустой подстроки

"Привет, мир".indexOf("", 5)    // вернет 5
"Привет, мир".indexOf("", 7)    // вернет 7
"Привет, мир".indexOf("", 999)  // вернет 11 (длину)

Следующий пример демонстрирует использование indexOf для подсчета количества повторений буквы в строке.

count = 0;
pos = str.indexOf("x");
while ( pos != -1 ) {
   count++;
   pos = str.indexOf("x",pos+1);
}

substr

возвращает подстроку исходной строки

Синтаксис

var sub = string.substr(start[, length])

Аргументы

start – начальная позиция, начиная от 0

length – сколько символов брать с позиции start

Описание, примеры

Метод substr начинает собирать строку с позиции start и заканчивает, когда соберет length или дойдет до конца строки.

Если start больше или равен длине строки, то substr возвращает пустую строку.

Если start < 0, позиция определяется с конца строки. При этом если полученная позиция - до начала строки, то в качестве start берется 0. Это поведение не поддерживается Internet Explorer.

Если параметр length не указан - подстрока берется до конца строки.

Если length <= 0 - возвращается пустая строка.

var str = "abcdefghij";
alert("(1,2): "    + str.substr(1,2));   // (1,2): bc
alert("(-3,2): "   + str.substr(-3,2));  // (-3,2): hi
alert("(-3): "     + str.substr(-3));    // (-3): hij
alert("(1): "      + str.substr(1));     // (1): bcdefghij
alert("(-20, 2): " + str.substr(-20,2)); // (-20, 2): ab
alert("(20, 2): "  + str.substr(20,2));  // (20, 2):

replace

Синтаксис

str.replace(regexp, newSubStr|function)

Аргументы

regexp – объект типа RegExp или строка

newSubStr|function – новая подстрока или функция, которая ее возвращает

Описание, примеры

Этот метод не меняет вызывающую строку, а возвращает новую, после замен.

Чтобы произвести глобальный поиск и замену, используйте regexp c флагом "g".

Строка замены

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

$$ – Вставляет "$"

$& – Вставляет совпавшую подстроку

$` – Вставляет часть строки, которая предшествует совпавшей подстроке

$' – Вставляет часть строки, которая следует за совпавшей подстрокой

$n или $nn, где n/nn - десятичные цифры – Вставляет n-ю скобку в совпадении, если первый аргумент - объект RegExp

Функция замены

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

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

Функция может использовать совпавшие подстроки - она их получает в параметрах вызова. Первый параметр всегда содержит полную совпавшую подстроку.

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

Наконец, последние два параметра - позиция, на которой произошло совпадения и вызывающая строка.

Следующий пример вернет my XX, zz.

function replacer(str, p1, p2, offset, s) {
  return p1 + ", " + p2;
}
newString = "my XXzz".replace(/(X+)(z+)/, replacer)

Значения параметров при вызове replacer:

str – "XXzz" - совпавшая подстрока

p1 – "XX" - первая скобка

p2 – "zz" - вторая скобка

offset – 3 - позиция в тексте для поиска

s – "my XXzz" - вызывающая строка, т.е строка для поиска

В следующем примере используется строка замены. Глобального поиска при этом не происходит.

Пример: строка замены

str = "тест еще тест"
str.replace("тест","прошел") // = "прошел еще тест"

Для глобального поиска используйте регулярное выражение.

Пример: Глобальная замена строки

str = "тест еще тест"
str.replace(/тест/g,"прошел") // = "прошел еще прошел"

// или так

str.replace(new RegExp("тест",'g'),"прошел")

Следующий пример использует при замене сочетания $1 и $2 для ссылок на результат поиска.

Пример: Замена со ссылками

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var newstr = str.replace(re, "$2, $1") // "Smith, John"

Методы объекта string (для оформления текста):

ancor, big, blink, bold, fixed, fontcolor, fontsize, italics, link, small, strike, sub, sup.

Свойства окна браузера clientHeight, clientWidth.