Извлечение подстроки между двуми символами в 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);
Полезные материалы
- String.prototype.substring() – JavaScript | MDN — официальная документация по методу
substring
. - JavaScript String substring() Method — подробное руководство с примерами использования
substring
. - Как получить доступ к группам в регулярном выражении в JavaScript? – Stack Overflow — актуальное обсуждение работы с подстроками с помощью регулярных выражений, полезно для освоения сложных шаблонов.
- regex101: создание, тестирование, отладка регулярных выражений — интерактивный инструмент для тестирования регулярных выражений и упрощения работы с подстроками.
- 20 методов работы со строками за 7 минут – Бо учит JavaScript – YouTube — быстрое видеоурок о методах работы со строками, в том числе подробно рассматривается обработка подстрок.