Замена нескольких пробелов на один в JavaScript: regex

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

Для преобразования последовательностей из двух и более пробелов в единственный пробел, применяйте регулярное выражение / {2,}/g в сочетании с методом String.replace() в JavaScript:

let text = "Текст с   избыточными   пробелами.";
text = text.replace(/ {2,}/g, " ");

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

Разбор регулярного выражения

Для универсальной очистки строки от всех типов пробельных символов (пробелы, табуляции, переводы строк) можно использовать регулярное выражение /\s\s+/g, где символ \s определяет любой пробельный символ.

text = text.replace(/\s\s+/g, ' ');

Тем не менее, если ваш текст включает, помимо пробелов, иные типы пробельных символов, наиболее полным решением будет применение шаблонов /\s\s+/g или /\s{2,}/g.

Ваш инструментарий в борьбе со всеми пробелами

Для строгой нормализации текста, учитывающей все виды пробельных символов, включая табуляцию и переводы строк, правильный подход включает применение /\s+/g:

text = text.replace(/\s+/g, ' ');

При использовании данного подхода все последовательности пробельных символов заменяются на один пробел.

Проверка производительности и оптимизация

Производительность регулярных выражений может варьироваться в зависимости от шаблона. Рекомендуется проведение соответствующего тестирования, например, через JSPerf. В контексте замены пробелов, / {2,}/g обычно представляет собой оптимальный выбор, однако всегда стоит провести тестирование на конкретном наборе данных.

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

Не забывайте обрезать лишние края!

Работа с обрезанием пробелов на концах строки выглядит так:

text = text.replace(/\s+/g, ' ').trim();

Такой подход гарантирует, что итоговый результат не будет испорчен излишними пробелами ни в начале, ни в конце строки.

Не забывайте о переприсвоении строки после замены!

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

text = text.replace(/\s+/g, ' ');

Если пропустить эту операцию, исходная строка останется неизменной.

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

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

До: Смайлик Смайлик Смайлик Смайлик -> (😀  😀   😀     😀)

При применении регулярного выражения:

text.replace(/\s+/g, ' ');

Результат: Смайлик -> (😀) // Теперь для каждого смайлика есть только одно место в ряду.

Таким образом, принцип работы /\s+/g позволяет преобразовать все последовательности пробелов в единообразный формат.

Запутанные сценарии и решения для них

Неразрывные пробелы: незваные гости

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

text = text.replace(/(?:\s| )+/g, ' '); // " " считайте себя пойманным!

Переносы строк: сохраните поэзию

Если требуется сохранить переносы строк, используйте:

text = text.replace(/[^\S\r\n]+/g, ' '); // Лишние пробелы убраны, но переносы строк остались на месте.

Старые браузеры: их мы не забываем

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

Применение в jQuery

В контексте jQuery замена пробелов осуществляется следующим образом:

$('#element').text(function(_, text) {
    return text.replace(/\s+/g, ' ');
});

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

1. String.prototype.replace() – JavaScript | MDN — документация о методе .replace().
2. javascript – Regex для замены множественных пробелов одинм – Stack Overflow — тематическое обсуждение на Stack Overflow.
3. regex101: создание, тестирование и отладка регулярных выражений — онлайн-инструмент для работы с регулярными выражениями.
4. Замена множественных пробелов одиночным в строке JavaScript – Stack Overflow — другой вопрос на Stack Overflow с обсуждением вопроса замены пробелов.
5. Шаблоны и флаги — всестороннее руководство по регулярным выражениям на JavaScript.info.
6. JSHint, инструмент для контроля качества кода JavaScript — JSHint помогает обнаруживать ошибки и предотвращать проблемы в коде.
7. eslint-plugin-regex – npm — пакет для npm, позволяющий создать пользовательские правила в ESLint с помощью регулярных выражений.