JavaScript | Как удалить символы переноса строки в строке?

JavaScript | Как удалить символы переноса строки в строке?

За перенос строки на новую линию отвечают специальные символы:

  • возврат каретки — CARRIAGE RETURN (CR)
  • перенос строки — LINE FEED (LF)

Смысл в том, что это именно два символа, а не один. Как правило.

В JavaScript эти символы экранируются специальными последовательностями:

  • \r — возврат каретки — CARRIAGE RETURN (CR)
  • \n — перенос строки — LINE FEED (LF)

Обязательно изучите эту таблицу — https://tc39.es/ecma262/multipage/text-processing.html#table-controlescape-code-point-values

ControlEscape Code Point Values - ECMAScript | JavaScript
ControlEscape Code Point Values — ECMAScript | JavaScript

Способ № 1 — через метод replaceAll()

Есть строка:

let str = `

 

<!DOCTYPE html>

 

<!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—>

<!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—>

<!—[if (gt IE 9)|!(IE)]><!—>`

В метод нужно передать искомое значение \n и заменяемое значение :

str.replaceAll(\n,»)

 

‘<!DOCTYPE html><\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if (gt IE 9)|!(IE)]><\!—>’

 

Способ № 2 — через метод replace() и регулярное выражение с глобальным флагом

Это похоже на первый способ, только мы передаём в качестве первого параметра регулярное выражение в литеральном виде — /\n/g (но можно и через конструктор RegExp()).

str.replace(/\n/g,»)

‘<!DOCTYPE html><\!—[if IE
9 ]> <html class=»ie9 ru home index » dir=»ltr»
lang=»ru»> <![endif]—><
\!—[if IE
10 ]> <html class=»ie10 ru home index » dir=»ltr»
lang=»ru»> <![endif]—><
\!—[if
(gt IE 9)|!(IE)]><
\!—>’

 

Способ № 3 — через метод split() в связке с методом join() — разделитель строки и приведение к массиву

Избавиться от переносов строки можно при помощи метода split() для экземпляров строк, который принимает разделитель и возвращает массив без элементов разделителя. В таком массиве обязательно будут пустые строки.

Так выглядит наша строка с символами переносов:

\n\n<!DOCTYPE html>\n\n\n<\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—>\n<\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—>\n<\!—[if (gt IE 9)|!(IE)]><\!—>’

Так выглядит разделение строки на составные части по разделителю \n:

str.split(\n)

массив, который мы получаем после разделения:

[», », ‘<!DOCTYPE html>’, », », ‘<\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—>’, ‘<\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—>’, ‘<\!—[if (gt IE 9)|!(IE)]><\!—>’]

Видите пустые строки? Это свидетельство того, что когда-то в исходной строке было несколько символов переноса подряд.

Почему так много переносов? Спросите у того разработчика, который писал генератор HTML-разметки для того сайта. 🙂

 

Что теперь делать? Теперь нужно просто склеить все строки внутри массива в одну строку при помощи метода join() с пустой строкой в качестве параметра:

str.split(\n).join(»)

 

‘<!DOCTYPE html><\!—[if IE 9 ]> <html class=»ie9 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if IE 10 ]> <html class=»ie10 ru home index » dir=»ltr» lang=»ru»> <![endif]—><\!—[if (gt IE 9)|!(IE)]><\!—>’

 

Это были три способа того как можно удалить переносы строки в строке JavaScript.

 

Информационные ссылки

Стандарт ECMAScript — Раздел «22.1.3.19 String.prototype.replaceAll ( searchValue, replaceValue )» — https://tc39.es/ecma262/multipage/text-processing.html#sec-string.prototype.replaceall

Стандарт ECMAScript — Раздел «22.1.3.18 String.prototype.replace ( searchValue, replaceValue )» — https://tc39.es/ecma262/multipage/text-processing.html#sec-string.prototype.replace

Стандарт ECMAScript — Раздел «22.1.3.22 String.prototype.split ( separator, limit )» — https://tc39.es/ecma262/multipage/text-processing.html#sec-string.prototype.split

Стандарт ECMAScript — Раздел «23.1.3.16 Array.prototype.join ( separator )» — https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.prototype.join