ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70%Забронировать скидку

Извлечение подстроки между двуми символами в JavaScript

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для извлечения подстроки в JavaScript вы можете использовать метод .match() в сочетании с подходящим регулярным выражением (regex). Ниже представлен пример извлечения текста, запертого между символами { и }:

JS
Скопировать код
let str = 'Пример {подстроки} для иллюстрации';
let match = str.match(/\{([^}]+)\}/);
let substring = match ? match[1] : '';
console.log(substring);  // вывод: 'подстрока'

Регулярное выражение /\{([^}]+)\}/ конструируется следующим образом: символ \{ указывает на начало интересующего нас блока с {, конструкция ([^}]+) захватывает любое количество символов до закрывающей фигурной скобки }, и символ \} означает её конец. Полученная подстрока лёгкой ноги оказывается в match[1].

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

Детали процесса извлечения

Использование строковых методов

JavaScript предоставляет обширный набор методов для работы со строками, таких как .substring(), .slice(), .indexOf() и .lastIndexOf(), которые позволяют извлекать подстроки с использованием простых разделителей:

JS
Скопировать код
let exampleStr = 'Фу:Бар;Баз';
let startIdx = exampleStr.indexOf(':') + 1; // Прибавляем один, чтобы пропустить ":"
let endIdx = exampleStr.lastIndexOf(';');
let result = exampleStr.substring(startIdx, endIdx);
console.log(result); // получим 'Бар'

А что делать с множественными вхождениями?

Если в строке есть несколько разделителей, то циклы и метод .split() смогут успешно справиться с такими ситуациями. Взглянем на пример:

JS
Скопировать код
let data = 'начало:контент1;средина:контент2;конец';
let parts = data.split(';');
for (let part of parts) {
  let content = part.split(':')[1];
  console.log(content); // 'контент1' и 'контент2' успешно извлечены!
}

Регулярные выражения для динамических разделений

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

JS
Скопировать код
let complexStr = 'начало#контент1:конец|контент2:финал';
let delimiterRegex = /[:#|]/g; // RegEx для разделителей
let contents = complexStr.split(delimiterRegex);
contents.pop(); // 'финал' не участвует
console.log(contents); // решение на лицо!

Визуализация

Представьте себе, что наша задача – подобная действиям подводной лодки, выискивающей подстроки в водной стихии между символами 🔴 и 🔵.

JS
Скопировать код
let string = "Быстрая 🔴коричневая🔵 лиса";
let pearl = string.split('🔴')[1].split('🔵')[0];

И наконец, наше сокровище:

Markdown
Скопировать код
🔴 **коричневая** 🔵 => 'коричневая'

Мы раскрываем первую "раковину" с помощью string.split('🔴'), а затем вторую, используя split('🔵'), чтобы извлечь ценную жемчужину.

Техники для работы со строками в любой ситуации

Погружаемся в рекурсивное извлечение

Для сложных рекурсивных шаблонов приходится прибегать к рекурсивным функциям:

JS
Скопировать код
function extractSubstrings(str, startChar, endChar) {
  const results = [];
  let index = 0;
  while ((index = str.indexOf(startChar, index)) !== -1) {
    let endIndex = str.indexOf(endChar, index);
    if (endIndex === -1) break;
    results.push(str.substring(index + 1, endIndex)); // Ценная информация бережно сохраняется
    index = endIndex + 1; // Ищем дальше
  }
  return results;
}

Показываем, а не рассказываем, с помощью alert()

Лучше один раз увидеть, чем сто раз услышать! Дайте функции alert() живо показать извлечённую подстроку в процессе отладки:

JS
Скопировать код
alert('Здесь извлечённая подстрока: ' + substring);

Полезные материалы

  1. String.prototype.substring() – JavaScript | MDNофициальная документация по методу substring.
  2. JavaScript String substring() Methodподробное руководство с примерами использования substring.
  3. Как получить доступ к группам в регулярном выражении в JavaScript? – Stack Overflowактуальное обсуждение работы с подстроками с помощью регулярных выражений, полезно для освоения сложных шаблонов.
  4. regex101: создание, тестирование, отладка регулярных выраженийинтерактивный инструмент для тестирования регулярных выражений и упрощения работы с подстроками.
  5. 20 методов работы со строками за 7 минут – Бо учит JavaScript – YouTubeбыстрое видеоурок о методах работы со строками, в том числе подробно рассматривается обработка подстрок.