JavaScript | Как отобрать строки начинающиеся на что-то в массиве?

JavaScript | Как отобрать строки начинающиеся на что-то в массиве?

Есть массив из строк:

var massiv = [
   "aabbgghh",
   "aazzxx",
   "bbgghhaa",
   "bbzzxx",
   "abctt",
   "bactt"
]

Мы хотим отобрать из этого массива строки, которые начинаются на определённую последовательность символов. Как это сделать?

 

Видео

Что будем использовать?

Мы будем пользоваться методом filter() для объектов-прототипов Array. Мы будем пользоваться методом exec() для объектов-прототипов RegExp.

Нам нужно создать условие, которое будет возвращать true или false, когда мы будем сопоставлять начало строки под определённые последовательности символов.

Регулярное выражение оформляется символами / /(между наклонными линиями должен быть шаблон). В регулярных выражениях граница начала строки обозначается знаком ^. Это называется Утверждением (Assertion). Подобных Утверждений в языке JavaScript 8 штук.

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

 

Отбираем строки, начинающиеся на «a»

Регулярное выражение будет выглядеть так:

/^a/

Выполняем отбор элементов из массива со строками:

massiv.filter(i=>/^a/.exec(i))

В ответ получаем новый массив с нужными нам строковыми элементами.

["aabbgghh", "aazzxx", "abctt"]
Отобрали строки начинающиеся на a - JavaScript
Отобрали строки начинающиеся на a — JavaScript

 

Как это работает?

На нашем массиве (massiv) мы вызываем через точку метод filter(). Этот метод создаст нам новый массив, не повреждая оригинальный. Фильтр пробегает по каждому элементу массива и проверяет условие отбора.

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

Условием у нас является существование объекта, который вернёт нам метод exec(). Если отбор метода возвращает массив, тогда такой элемент попадёт в новый массив. Если возвращает null, то не попадает в новый массив.

 

Другие примеры

Отбираем строки, начинающиеся на «aa»

massiv.filter(i=>/^aa/.exec(i))
Отобрали строки из массива начинающиеся на aa - JavaScript
Отобрали строки из массива начинающиеся на aa — JavaScript

Отбираем строки, начинающиеся на «b»

massiv.filter(i=>/^b/.exec(i))
Отобрали строки из массива начинающиеся на b - JavaScript
Отобрали строки из массива начинающиеся на b — JavaScript

Отбираем строки, начинающиеся на «bb»

massiv.filter(i=>/^bb/.exec(i))
Отобрали строки из массива начинающиеся на bb - JavaScript
Отобрали строки из массива начинающиеся на bb — JavaScript

Отбираем строки, начинающиеся на «ab»

massiv.filter(i=>/^ab/.exec(i))
Отобрали строки из массива начинающиеся на ab - JavaScript
Отобрали строки из массива начинающиеся на ab — JavaScript

Отбираем строки, начинающиеся на «ba»

massiv.filter(i=>/^ba/.exec(i))
Отобрали строки из массива начинающиеся на ba - JavaScript
Отобрали строки из массива начинающиеся на ba — JavaScript

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

Что делать если мы не знаем что ищем? Имеется ввиду то, что нам нужно подставлять последовательность из каких-то строковых переменных, и в конкретный момент времени мы не знаем что будет в этой переменной. Я говорю о функции, которая может решать подобную задачу. Эта функция натравливается на массив и получает любую строку в момент вызова. Как быть?

function getArrStartsOn(str, arr){
   let pattern = `^${str}`;
   let re = new RegExp(pattern);
   return arr.filter(i=>re.exec(i))
}

Пример работы функции с конструктором регулярных выражений:

Пример работы функции с конструктором регулярных выражений JavaScript
Пример работы функции с конструктором регулярных выражений JavaScript

 

Информационные ссылки

JavaScript | Строки (String)

Стандарт ECMAScript — Раздел «22.2.5.2 RegExp.prototype.exec ( string )» — https://tc39.es/ecma262/#sec-regexp.prototype.exec

Стандарт ECMAScript — Раздел «22.2.2.6 Assertion» — https://tc39.es/ecma262/#sec-assertion

Стандарт ECMAScript — Раздел «23.1.3.7 Array.prototype.filter ( callbackfn [ , thisArg ] )» — https://tc39.es/ecma262/#sec-array.prototype.filter