Работа со строками в javascript

Основные селекторы

Основные селекторы вам знакомы, если вы когда-нибудь создавали хотя бы один шаблон CSS. скорее всего, вы будете использовать данные селекторы на протяжении 90% всего времени работы с jQuery:

Селектор Описание Пример
Все Выбирает все элементы на странице, включая , и так далее.
Элемент Выбирает все элементы с заданным тегом.
Класс Выбирает все элементы с заданным именем класса.
ID Выбирает один элемент с заданным атрибутом .

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

// Выбирает все div с классом .myClass, а также все параграфы
var selectedElements = $("div.myClass, p");

Observable в RxJS

Объект Observable (наблюдаемый), наверное, самая важная часть в RxJS. Он используется для обработки цепочек событий, например, манипуляции с мышью (клики, курсор, скролл) или клавиатурой, перебор значений (числа, строки, объекты или массивы), которые помогают управлять этапами прохождения событий. Примитивной формой наблюдаемого объекта может быть одиночная переменная, например:

Вот так будет выглядеть приведённый ранее пример с реальными командами RxJS и его API:

Конечный результат вернёт значение . Однажды объявленная переменная потока не может поменять своё значение (как в примере ранее). Поэтому нужно объявить новую переменную для потока. Поскольку переменная потока является неизменяемым типом данных, используем ES6 :

Теперь, подписавшись на , получим ожидаемое значение . Как упоминалось ранее, поток — это серия событий в течение определенного периода времени.

Window

Window Object
alert()
atob()
blur()
btoa()
clearInterval()
clearTimeout()
close()
closed
confirm()
console
defaultStatus
document
focus()
frameElement
frames
history
getComputedStyle()
innerHeight
innerWidth
length
localStorage
location
matchMedia()
moveBy()
moveTo()
name
navigator
open()
opener
outerHeight
outerWidth
pageXOffset
pageYOffset
parent
print()
prompt()
resizeBy()
resizeTo()
screen
screenLeft
screenTop
screenX
screenY
scrollBy()
scrollTo()
scrollX
scrollY
sessionStorage
self
setInterval()
setTimeout()
status
stop()
top

Window Console
assert()
clear()
count()
error()
group()
groupCollapsed()
groupEnd()
info()
log()
table()
time()
timeEnd()
trace()
warn()

Window History
back()
forward()
go()
length

Window Location
assign()
hash
host
hostname
href
origin
pathname
port
protocol
reload()
replace()
search

Window Navigator
appCodeName
appName
appVersion
cookieEnabled
geolocation
javaEnabled()
language
onLine
platform
product
taintEnabled()
userAgent

Window Screen
availHeight
availWidth
colorDepth
height
pixelDepth
width

Selection properties

As said, a selection may in theory contain multiple ranges. We can get these range objects using the method:

getRangeAt(i) – get i-th range, starting from 0. In all browsers except Firefox, only 0 is used.

Also, there exist properties that often provide better convenience.

Similar to a range, a selection object has a start, called “anchor”, and the end, called “focus”.

The main selection properties are:

  • – the node where the selection starts,
  • – the offset in where the selection starts,
  • – the node where the selection ends,
  • – the offset in where the selection ends,
  • – if selection selects nothing (empty range), or doesn’t exist.
  • – count of ranges in the selection, maximum in all browsers except Firefox.

Selection end/start vs Range

There’s an important differences of a selection anchor/focus compared with a start/end.

As we know, objects always have their start before the end.

For selections, that’s not always the case.

Selecting something with a mouse can be done in both directions: either “left-to-right” or “right-to-left”.

In other words, when the mouse button is pressed, and then it moves forward in the document, then its end (focus) will be after its start (anchor).

E.g. if the user starts selecting with mouse and goes from “Example” to “italic”:

…But the same selection could be done backwards: starting from “italic” to “Example” (backward direction), then its end (focus) will be before the start (anchor):

Выбор полей формы

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

Аналогично, идентификация выбранных элементов в списке или отмеченных чекбоксов в форме может быть утомительным занятием./

К счастью, jQuery обеспечивает несколько специфических для форм селекторов, которые облегчают жизнь:

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

Кроме того, что написано, можно использовать, например, для выбора всех чекбоксов на странице. Однако, действует быстрее, так как jQuery может использовать функцию JavaScript для быстрого ограничения объемов поиска только элементами . Это действительно для jQuery вообще — для ускорения кода всегда ограничивайте объем для работы селекторов там, где возможно. Например, действует очень медленно, так как jQuery должен найти каждый отдельный элемент  на странице.

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

var selectedElements = $("form input:radio:checked");

Итераторы и итерируемые

Вы уже видели проблему в предыдущем параграфе. Там нет простого способа пройтись по всем авторам заданного кастомного объекта. Нам понадобится какой-нибудь метод с помощью которого мы можем последовательно извлечь все нужные нам данные.

Давайте добавим метод  в , который отдаст нам всех авторов. Например:

Это довольно простой подход. Он решает нашу задачу в том, чтобы получить всех авторов. Тем не менее, несколько проблем всё таки всплывают в такой имплементации. Некоторые из них:

Имя  очень специфичное. Если кто-то ещё сделает свой , то они могут назвать его .

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

 возвращает массив строк, состоящий из всех авторов. А что если другой разработчик возвращает массив объектов в таком формате:

Разработчику нужно будет точно знать имя и тип метода, которые возвращает все данные.

Что если мы сделаем правило, в котором имя метода и его тип будут фиксированными и неизменными?

Давайте назовем этот метод — .

Подобный шаг был сделан ECMA, чтобы стандартизировать этот процесс проведения цикла по кастомным объектам. Однако, вместо использования имени , ECMA использовала имя . Symbols предлагают имена, которые уникальны и не могут конфликтовать с именами других свойств. Также,  вернет объект именуемый . У этого итератора будет метод, под названием , который возвращает объект с ключами  и .

Ключ , будет содержать актуальное значение. Это может быть всё, что угодно. А — это булево значение(логический тип данных). Он определяет все ли значения были отданы.

Схема нарисованная ниже может помочь с выстраиванием отношений между итерируемыми, итераторами и next. Эти отношения называются Iteration Protocol, то есть протокол итерации.

Согласно книге ExploringJS от Dr Axel Rauschmayer —

Итерируемые — это структура данных, которой нужно сделать свои элементы доступными для вне. Это делается выполнением метода, чей ключ — . Этот метод является основой для итераторов. Вот так, он создаст итераторы.

Итератор — это указатель для навигации по элементам структуры данных.

Вешаем onclick на элемент из javascript-кода

Рассмотим еще один способ, на мой взгляд, самый практичный и надежный. Хорош он тем, что событие можно повесить на множество элементов. Для этого требуется выбрать при помощи javascript-селекторов элементы, к которым требуется применить событие onclick.

Код в действии:

Нажмите на ссылку:

Выбору элементов по селекторам можно посвятить отдельную тему, могу сказать только то, что согласно новой спецификации HTML5, их выбор стал прост и в javascript. Если Вы знакомы с jquery или CSS, то выбрать нужные элементы для Вас не составит труда. Например, так просто можно выбрать все элементы с классом «link» и повесить на них нужное действие:

//выбираем нужные элементы
var a = document.querySelectorAll('.link');
    
//перебираем все найденные элементы и вешаем на них события
[].forEach.call( a, function(el) {
    //вешаем событие
    el.onclick = function(e) {
        //производим действия
    }
});

Создания элементов и текстовых узлов

Создание элемента в JavaScript выполняется с помощью метода :

// $elem – переменная, в которую сохраним созданный элемент
const $elem = document.createElement('tag');

Вместо необходимо указать тег того элемента, который нужно создать.

Например, создадим элемент p:

const $elem = document.createElement('p');

Создание текстового узла в JavaScript осуществляется посредством метода :

const text = document.createTextNode('text');

В аргументе необходимо поместить текст, который должен иметь этот текстовый узел.

Например, создадим текстовый узел с текстом «Я новый текстовый узел»:

const text = document.createTextNode('Я новый текстовый узел');

componentFromPoint

Возвращает ссылку на фрагмент элемента страницы, имеющий заданные координаты.

{Объект}.componentFromPoint({X}, {Y});

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

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

  • Пустая строка — один из дочерних элементов текущего элемента страницы;
  • outside — элемент страницы, который расположен за границами текущего элемента;
  • scrollbarDown — нижняя кнопка-стрелка полосы прокрутки;
  • scrollbarHThumb — ползунок горизонтальной полосы прокрутки;
  • scrollbarLeft — левая кнопка-стрелка полосы прокрутки;
  • scrollbarPageDown — область на вертикальной полосе прокрутки, которая расположена ниже ползунка;
  • scrollbarPageLeft — область на горизонтальной полосе прокрутки, которая расположена левее ползунка;
  • scrollbarPageRight — область на горизонтальной полосе прокрутки, которая расположена правее ползунка;
  • scrollbarPageUp — область на вертикальной полосе прокрутки, которая расположена выше ползунка;
  • scrollbarRight — правая кнопка-стрелка полосы прокрутки;
  • scrollbarUp — верхняя кнопка-стрелка полосы прокрутки;
  • scrollbarVThumb — ползунок вертикальной полосы прокрутки;
  • handleBottom — ползунок изменения размера на нижней границе;
  • handleBottomLeft — ползунок изменения размера на нижнем левом углу;
  • handleBottomRight — ползунок изменения размера на нижнем правом углу;
  • handleLeft — ползунок изменения размера на левой границе;
  • handleRight — ползунок изменения размера на правой границе;
  • handleTop — ползунок изменения размера на верхней границе;
  • handleTopLeft — ползунок изменения размера на верхнем левом углу;
  • handleTopRight — ползунок изменения размера на верхнем правом углу.

Поддерживается IE начиная с 5.0

Выбор элементов по содержанию

Если нет возможности сузить область выбора по основным селекторам и по атрибутам, то можно «покопаться» в содержании элемента для определения, подходит он для выбора или нет. jQuery имеет 4 селектора для данного назначения:

Селектор Описание Пример
Выбирает элемент(ы), которые содержат заданный текст. Текст может быть в самом элементе, так и в любом элементе внутри в выбранного элемента. Примечание:  чувствительно к регистру — не соответствует .
Выбирает элемент(ы), которые содержат 1 или более элементов, соответствующих заданной строке. Селектор просматривает на соответствие все элементы внутри заданного элемента.
Выбирает элемент(ы), которые содержат другие элементы или текстовые узлы.
Выбирает элемент(ы), которые не содержат других элементов или текстовых узлов.

Следующий пример показывает, как использовать , наряду с селектором класса для выбора параграфов, которые имеют определенный класс, дополнительным условием служит условие содержания определенной строки (или строк):

// Выбираем все параграфы,которые имеют класс "intro"
// и также содержат текст "MegaWidget"
var selectedElements = $("p.intro:contains('MegaWidget')");

// Выбираем все параграфы, которые имеют класс "intro"
// и содержат и "MegaWidget" и "WonderWidget"
var selectedElements = $("p.intro:contains('MegaWidget'):contains('WonderWidget')");

Отличие target от currentTarget

События в браузере по умолчанию всплывают. Из-за этого:

  • – элемент, который вызвал событие;
  • – элемент, к которому прикреплен обработчик события.

Например, рассмотрим этот код:

<body>
  <div class="outer">
    <div class="inner">...</div>
  </div>
</body>

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

При этом обработчик события мы можем прикрепить к любому из этих узлов (, , , , , ). Разница между и в том, что всегда будет указывать на источник события (), а на элемент к которому мы прикрепили обработчик.

Например, прикрепим обработчик к элементу :

const outer = document.querySelector('.outer');
outer.addEventListener('click', function (e) {
  const $target = e.target;
  const $currentTarget = e.currentTarget;
  // выведем значения в консоль
  console.log($target);
  console.log($currentTarget);
});

При клике на элемент событие будет всплывать. В обработчике, который мы назначили элементу , свойство будет указывать на элемент, который вызвал событие, а — на элемент, к которому этот обработчик добавлен, т.е. на .

[] и charAt

Из любой строки
можно взять отдельный символ. Это делается с помощью оператора [], в которых
указывается индекс нужного символа. Например:

let str = 'Hello!\nI\'m Javascript.';
let ch1 = str;
let ch2 = str7;
console.log(ch1, ch2);
console.log(typeof ch1);

Обратите
внимание, что так как в JavaScript нет символьного типа, то
возвращаемое значение – это строка, состоящая из одного символа. Ту же самую
операцию выделения символа можно выполнить и с помощью метода charAt(pos), но он менее
удобен и существует, скорее по историческим причинам для совместимости со
старыми скриптами:

Ту же самую
операцию выделения символа можно выполнить и с помощью метода charAt(pos), но он менее
удобен и существует, скорее по историческим причинам для совместимости со
старыми скриптами:

let ch1 = str.charAt();
let ch2 = str.charAt(7);

Интересной особенностью
JavaScript является
возможность перебрать строку посимвольно с помощью цикла for of, используемого
для массивов:

for(let ch of "Hello")
   console.log(ch);

Обратите
внимание, что строки в JavaScript изменять нельзя. Например,
нельзя выполнить такую операцию:

str = "h";

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

Делаем объекты итерируемыми

Как мы уже узнали в предыдущей секции, нам нужно выполнить метод под названием . Мы будем использовать синтаксис . Короткий пример:

На 4й строке мы сделали итератор. Это объект с методом . Этот метод возвращает значение в соответствии с переменной . На строке 25, мы получаем iterator. На 27й, мы вызываем . И мы продолжаем вызывать , пока  не станет .

Это именно то, что происходит в  цикле. Циклы  берут итерируемое и создают их итератор.  же продолжает вызываться до то момента, пока , не станет .

Итерируемые в JavaScript

Много всего является итерируемым в JavaScript. Это может быть заметным не сразу, но если вы начнете внимательно вглядываться, то итерируемые начнут постепенно представляться вашему взору.

Вот это всё итерируемые-

Массивы (Arrays) и Типизированные массивы (TypedArrays)

Строки (Strings) — итерируются по каждому символу или кодовому символу в Unicode.

Maps — итерируется по всем парам ключевых значений.

Set — итерируется по всем элементам.

Arguments — массиво-подобная специальная переменная в функциях.

Элементы DOM — тут над этим ещё ведется работа

Другие итерируемые конструкции в JS это —

 цикл —для for-of нужны итерируемые элементы. В противном случае, он выкинет ошибку .

Деструктурицизация массивов — деструктуризация происходит из-за итерируемых. Давайте посмотрим как:

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

Оператор расширения spread. Вот код:

Его можно записать вот так:

 и  принимают итерируемые.

Maps и Set.

Конструктор Map делает итерируемымипары в Map, а конструктор Set делает итерируемыми элементы в Set.

Итераторы также обязательны для понимания функций генераторов

Observer

Observer (наблюдатель) является получателем данных, он обрабатывает и реагирует на значения, передаваемые из Observable. API для Observer простой, функция используется для каждой итерации в последовательности. Она вызывается, когда Observable передаёт событие.

В предыдущем примере — это упрощенная версия, которая фактически использует базовую концепцию Observer. Итак, как создать Observer:

У Observer есть API обработки ошибок, который будет реагировать на возникновение ошибки во время выполнения. Все методы в наблюдателе необязательные и доступны для подписки. В методе следует поместить соответствующее для обработки значений поведение.

includes, startsWith, endsWith

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

str.includes(substr)

он возвращает true, если подстрока
substr была найдена в
строке str и false в противном
случае. Второй необязательный параметр pos указывает
начальный индекс для поиска. Вот примеры использования данного метода:

let str = '<span class="clock">12:34</span>';
console.log( str.includes("span") );
console.log( str.includes("<span>") );
console.log( str.includes("clock", 20) );

Следующие два
метода startsWith и endsWith проверяют, соответственно, начинается ли и
заканчивается ли строка определённой строкой:

console.log( str.startsWith("span") );      //false
console.log( str.startsWith("<span") );        //true
console.log( str.endsWith("span>") );        //true

Немного особенностей

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

Тем не менее, все редактируемые элементы (такие как ) обрабатываются, как если бы они имели . Псевдоэлементы и нельзя выбрать, как если бы у них было установлено . Изменить такое поведение не получится.

Всё вышенаписанное было про CSS, но всё-таки стоит упомянуть JavaScript в контексте выделения текста и копипасты.

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

Range

The basic concept of selection is , that is essentially a pair of “boundary points”: range start and range end.

A object is created without parameters:

Then we can set the selection boundaries using and .

As you might guess, further we’ll use the objects for selection, but first let’s create few such objects.

The interesting thing is that the first argument in both methods can be either a text node or an element node, and the meaning of the second argument depends on that.

If is a text node, then must be the position in its text.

For example, given the element , we can create the range containing the letters “ll” as follows:

Here we take the first child of (that’s the text node) and specify the text positions inside it:

Alternatively, if is an element node, then must be the child number.

That’s handy for making ranges that contain nodes as a whole, not stop somewhere inside their text.

For example, we have a more complex document fragment:

Here’s its DOM structure with both element and text nodes:

Let’s make a range for .

As we can see, this phrase consists of exactly two children of , with indexes and :

  • The starting point has as the parent , and as the offset.

    So we can set it as .

  • The ending point also has as the parent , but as the offset (it specifies the range up to, but not including ).

    So we can set it as .

Here’s the demo. If you run it, you can see that the text gets selected:

Here’s a more flexible test stand where you can set range start/end numbers and explore other variants:

E.g. selecting in the same from offset to gives us the range :

Starting and ending nodes can be different

We don’t have to use the same node in and . A range may span across many unrelated nodes. It’s only important that the end is after the start in the document.

Let’s make a bigger selection in our example, like this:

We already know how to do that. We just need to set the start and the end as a relative offset in text nodes.

We need to create a range, that:

  • starts from position 2 in first child (taking all but two first letters of «Example: «)
  • ends at the position 3 in first child (taking first three letters of “bold”, but no more):

As you can see, it’s fairly easy to make a range of whatever we want.

If we’d like to take nodes as a whole, we can pass elements in . Otherwise, we can work on the text level.

Объединение строк

Конкатенация строк

Вы можете объединить (или «конкатенировать») несколько строк, чтобы создать новую, используя символ +:

Этот подход также можно использовать для разделения создания строки на несколько строк для удобства чтения:

Вы также можете объединять строки с переменными (нестроковые переменные будут преобразованы в строки):

Чтобы создать новую строку, добавив ее в конец существующей, используйте +=:

Повторение строки

Метод repeat() в JavaScript возвращает новую строку, содержащую исходную строку, повторяющуюся несколько раз.

Вы можете использовать string.repeat() в следующих браузерах:

Chrome: 41+

Edge: 12+

Firefox: 24+

Safari: 9+

Opera: 28+

Объединение строк

Вы можете объединить массив строк в одну, используя метод .join() для массива.

По умолчанию элементы разделяются запятой:

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

Передача пустой строки в string.join объединит элементы, между которыми ничего нет:

Когда toString() используется в массиве, он также возвращает список строк, разделенных запятыми.

Разделение строки

Вы можете разделить строку на массив с помощью метода split().

Типичные варианты использования:

Превращаем предложение в массив слов, разбивая его по пробелам:

… или разделение многострочной строки на отдельные строки:

Вы также можете ограничить количество элементов, которые вы хотите вернуть из split(), передав необязательный второй параметр:

В современных браузерах вместо этого можно использовать spread-оператор:

Элементы языков HTML и JAVASCRIPT

Объект TextRange

Объект TextRange (текстовая область) отображает разделы
потока текста, формирующего документ HTML. Может быть использован для
управления текстом внутри страницы.

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

  • htmlText — возвращает
    содержимое TextRange как текст и код HTML;
  • text — простой текст,
    находящийся внутри элемента TextRange или тега <OPTION>.

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

  • collapse — стягивает
    текстовую область в точку в начале или конце текущей области;
  • compareEndPoints
    сравнивает две текстовые области и возвращает значение, показывающее
    результат;
  • duplicate — возвращает
    копию области TextRange;
  • execCommand — выполняет
    команду (операцию) над выделением или областью;
  • expand — расширяет
    текстовую область, добавляя туда новый знак, слово, предложение, или
    указывает, какие неполные блоки полностью содержатся;
  • findText — определяет
    текстовую область, содержащую только искомый текст;
  • getBookmark — возвращает
    значение, позволяющее в дальнейшем идентифицировать данную позицию в
    документе;
  • inRange — определяет,
    находится ли заданная текстовая область внутри текущей;
  • isEqual — определяет, равны ли
    заданная и текущая текстовые области;
  • move —изменяет начальную
    и конечную точки текстовой области для включения в нее различного текста;
  • moveEnd — заставляет
    текстовую область сжаться или расшириться до заданной конечной точки;
  • movestart — заставляет
    текстовую область сжаться или расшириться до заданной начальной точки;
  • moveToBookmark — передвигает
    границы текстовой области для включения другой, определенной ранее с помощью
    getBookmark;
  • moveToElementText
    — передвигает границы текстовой области для включения текста в заданном
    элементе;
  • moveToPoint — передвигает
    границы текстовой области и сжимает ее вокруг выбранной точки;
  • parentElement — возвращает
    родительский элемент для всего, что входит в текстовую область;
  • pasteHTML — вставляет
    текст и/или код HTML в текущую текстовую область;
  • queryCommandEnabled
    сообщает, доступна ли данная команда;
  • queryCommandindeterm
    сообщает, если данная команда имеет неопределенный статус;
  • queryCommandState
    возвращает текущее состояние команды;
  • queryCommandSupported
    сообщает, поддерживается ли данная команда;
  • queryCommandText
    возвращает строку, с которой работает команда;
  • queryCommandVaiue
    — возвращает значение команды, определенное для документа или объекта
    TextRange
    ;
  • scroiiintoview — переносит
    текущую текстовую область в видимую часть окна браузера;
  • select — делает активный
    подсвеченный участок выделения на странице равным текущей текстовой
    области;
  • setEndPoint — переносит
    начальную или конечную точку текущей текстовой области в начало или
    конец заданной области.
Рейтинг
( Пока оценок нет )
Editor
Editor/ автор статьи

Давно интересуюсь темой. Мне нравится писать о том, в чём разбираюсь.

Понравилась статья? Поделиться с друзьями:
Люкс-хост
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: