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

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

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

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

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

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

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

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

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

Подробнее об этом расскажет наш спикер на видео

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

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

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() поможет упорядочить данные:

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

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

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

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

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

🔴 **коричневая** 🔵 => 'коричневая'

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

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

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

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

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() живо показать извлечённую подстроку в процессе отладки:

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 — быстрое видеоурок о методах работы со строками, в том числе подробно рассматривается обработка подстрок.