Удаление всех переносов строки в JavaScript: .replace и regex

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

Для того чтобы убрать из текста все переводы строки в JavaScript, применяйте .replace(/\s+/g, ' ') для замены на пробелы или .replace(/\r?\n|\r/g, '') для полного изъятия:

let cleanString = yourString.replace(/\r?\n|\r/g, '');

Заменяйте yourString на произвольную строку и вот вы на пути к идеально однострочной строке.

Разгадывание тайн регулярных выражений

Операционные системы используют разные символы для перевода строки: \r\n (Windows), \n (Unix/Linux) и \r (старые версии Mac). Регулярное выражение /\r?\n|\r/g эффективно удаляет переводы строки во всех вышеперечисленных случаях.

Для удаления лишних пробелов в начале и в конце строки используйте метод .trim():

let cleanString = yourString.replace(/\r?\n|\r/g, '').trim();

Наконец-то ваша строка абсолютно чиста.

Преимущества работы с текстовыми полями

При работе с <textarea> в веб-формах, вы можете получить текст через .value, а затем применить наш регулярный шаблон:

const textareaContent = document.querySelector('textarea').value;
const tidyText = textareaContent.replace(/\r?\n|\r/g, '');

Таким образом, наводить порядок в содержимом текстовых полей довольно просто!

Комбинации и подбор шаблонов

Применение нашего шаблона всегда успешно, но в соответствии с задачей вы можете рассмотреть вариации:

• Для удаления комбинаций перевода строки и возврата каретки подойдёт /(\r\n|\r)/g.
• Используйте .replace(/\s+/g, ' '), для замены переводов строки и других последовательностей пробельных символов одним пробелом.

Вы также можете использовать цепочку функций:

let processedText = yourString
  .replace(/\r?\n|\r/g, ' ') // Устраняем раздражающие переводы строк
  .trim(); // Затем избавляемся от лишних пробелов в начале и в конце

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

Представьте ваш текст как состав поезда 🚂, где каждый вагон 🚃 разделён переводами строк.

До: 🚂—🚃\n—🚃\n—🚃

Теперь давайте с этим расправимся:

trainsWithoutPains = text.replace(/\r?\n|\r/g, "");

После: 🚂—🚃🚃🚃
Как приятно мы теперь движемся, не так ли?

За рамками стандартов — особые случаи и тонкая настройка

CSV и HTML

В CSV рекомендуется оставлять переводы строки между записями, но удалять их внутри полей. В HTML множественные пробелы приводят к слиянию, так что вместо них используйте  .

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

Особенности предварительной обработки

Переводы строк не влияют на кодировку, однако, если в этом вопросе есть необходимость, проведите соответствующую предварительную обработку. К слову, JavaScript обрабатывает строки в кодировке UTF-16.

Важность читаемости

Код должен быть не только функциональным, но и понятным. Сплошная запутанность? Создайте функцию, например, stripLineBreaks(yourString). Это легче воспринимается, и коллеги будут довольны.

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

1. String.prototype.replace() – JavaScript | MDN — Mozilla описывает все нюансы метода replace.
2. javascript – How to remove all line breaks from a string – Stack Overflow — Обсуждение наиболее эффективных способов удалить переводы строк.
3. regex101: build, test, and debug regex — Полигон для тестирования ваших регулярных выражений.
4. Strings – JavaScript.info — Подробное объяснение работы со строками в JavaScript.
5. JSHint, a JavaScript Code Quality Tool — Инструмент для отслеживания ошибок в коде JavaScript.
6. ECMA-262 – Ecma International — Официальная спецификация языка ECMAScript.