замените \ n на юникод, чтобы правильно отображать новую строку в html - PullRequest
Новая
       12

замените \ n на юникод, чтобы правильно отображать новую строку в html

0 голосов
/ 03 мая 2018

У меня есть многострочная строка: 

let str = 'line first \n     line-second-preceded-with-a-few-spaces';

Я хотел бы добавить его в код HTML. Мне удалось заменить все пробелы на replace(/ /g, '\u00a0'), и я хотел бы сделать то же самое с \n, но ни одно из значений Unicode, упомянутых в Wikipedia , похоже, не работает.

Стандарт Unicode определяет количество символов, соответствующих приложения должны распознавать в качестве ограничителей строки: 

LF:    Line Feed, U+000A
VT:    Vertical Tab, U+000B
FF:    Form Feed, U+000C
CR:    Carriage Return, U+000D
CR+LF: CR (U+000D) followed by LF (U+000A)
NEL:   Next Line, U+0085
LS:    Line Separator, U+2028
PS:    Paragraph Separator, U+2029

{str.replace(/ /g, '\u00a0').replace(/(?:\r\n|\r|\n)/g, '\u000a')}

Как правильно это сделать?

1 Ответ

0 голосов
/ 03 мая 2018

Вы можете заменить \n на разрывную строку <br/>, а затем добавить как innerHTML как 

let str = 'line first \n     line-second-preceded-with-a-few-spaces';
str = str.replace(/ /g, '\u00a0');
str = str.split("\n").join("<br/>")
document.getElementById("d").innerHTML = str;
<div id="d"></div>

Или вы используете replace(/\n/g, "<br/>");. Это также сделало бы то же самое 

let str = 'line first \n     line-second-preceded-with-a-few-spaces';
str = str.replace(/ /g, '\u00a0').replace(/\n/g, "<br/>");
document.getElementById("d").innerHTML = str;
<div id="d"></div>

Или вы также можете заключить строку, содержащую \n и " " в тег pre, чтобы рассматривать их как символы новой строки и пробелы 

let str = 'line first \n     line-second-preceded-with-a-few-spaces';

document.getElementById("d").innerHTML = `${str}
`; 
<div id="d"></div>

Примечание. Элемент pre следует использовать для текста, имеющего типографское форматирование, которое влияет на значение содержимого, например в стихах, ASCII-произведениях, стенограммах и, конечно же, компьютерном коде

...