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

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

Поделись записью