Как заменить все разрывы строк в строке элементами <br />?

536

Как я могу прочитать разрыв строки из значения с помощью JavaScript и заменить все разрывы строки <br />элементами?

Пример:

Переменная, переданная из PHP, как показано ниже:

  "This is man.

     Man like dog.
     Man like to drink.

     Man is the king."

Я хотел бы, чтобы мой результат выглядел примерно так после того, как JavaScript его конвертирует:

  "This is man<br /><br />Man like dog.<br />Man like to drink.<br /><br />Man is the king."
Джин Юн
источник
1
Что-то не так с вашим первоначальным вопросом? stackoverflow.com/questions/784313/…
harto
1
Вы также можете сделать nl2br ($ string) в PHP, прежде чем отправлять его в JavaScript.
Алекс
1
Я собираюсь проголосовать, чтобы закрыть предыдущий вопрос, так как это лучший пример.
век
2
Затем он должен отредактировать первоначальный вопрос
nickf
Я пришел сюда из ошибочного понимания того, что происходит с .text (). Посмотрите stackoverflow.com/q/35238362/1467396, если это то, что вы тоже делаете
Дэвид

Ответы:

1202

Это превратит все результаты в HTML

str = str.replace(/(?:\r\n|\r|\n)/g, '<br>');

Если вам интересно, что ?: означает. Это называется группа без захвата. Это означает, что группа регулярных выражений в скобках не будет сохранена в памяти для последующего обращения к ней. Вы можете проверить эти темы для получения дополнительной информации:
https://stackoverflow.com/a/11530881/5042169 https://stackoverflow.com/a/36524555/5042169

eyelidlessness
источник
77
Просто дополнительное примечание: str.replace("\n", '<br />')(первый аргумент - обычная строка) заменит только первое вхождение.
Серж С.
19
Другая версия (для замены нескольких разрывов строк): str.replace (/ (\ n) + / g, '<br />');
Ritesh
4
@SergeS. Спасибо за этот дополнительный комментарий. Просто спас мне тонну времени! jsfiddle
EleventyOne
4
@SergeS., String#replaceПриводит первый аргумент Stringк экранированному RegExpэкземпляру без флагов. str.replace('\n', '<br />');эквивалентноstr.replace(new RegExp('\n'), '<br />');
век
2
Вот тестовый пример для сравнения с str.split("\n").join("<br />") jsperf.com/split-join-vs-replace-regex RegEx кажется немного быстрее
Aley
391

Если ваша задача - отображать разрывы строк, вы можете сделать это с помощью CSS.

<div style="white-space: pre-line">Some test
with linebreaks</div>

Jsfiddle: https://jsfiddle.net/5bvtL6do/2/

Примечание : обратите внимание на форматирование кода и отступы, так как white-space: pre-lineбудут отображаться все новые строки (кроме последней новой строки после текста, см. Fiddle).

bersling
источник
59
Отличный ответ ... нужно больше катеров!
Ян Куигли
11
Я пришел сюда в поисках регулярного выражения и ушел с этим. Во многих случаях это то, что люди ищут. Мы используем разрывы строк для электронных писем, и нам иногда нужно отображать, что письмо выглядело в html. Perfecto. Спасибо за то, что посмотрели на вопрос в другом свете
Мутматт
1
Это может работать для фактических разрывов строк, но что если у меня есть "\ n", как в вопросе? Могу ли я решить это с помощью CSS тоже?
Froxx
18
Вместо этого white-space: pre-wrap;я предпочитаю использовать white-space: pre-line;(чтобы не добавлять строку окончательного перерыва в конце концов)
jpmottin
5
выглядит хорошо, но как насчет гигантского пространства перед первой линией? странно
Инструментарий
71

Без регулярного выражения:

str = str.split("\n").join("<br />");
paulslater19
источник
2
Если вы сделаете «\\ n», вы избежите проблем с разделением только на «n».
CrowderSoup
10
@CrowderSoup хмм? Я только что попробовал и \\nне соответствует новой строке, потому что он ищет backslash+ n.
paulslater19
1
Я сделал контрольный пример. RegEx немного быстрее, но проверить для себя jsperf.com/split-join-vs-replace-regex
Алей
Я обнаружил, что этот ответ не сработал, если не ударить по слешу. Например: str = str.split ("\ n"). Join ("<br />");
ACOMIT001
@ ACOMIT001 Я думаю, это зависит от того, есть ли у строки новая строка или черная черта и n?
paulslater19
38

Это работает для ввода от текстовой области

str.replace(new RegExp('\r?\n','g'), '<br />');
WSkinner
источник
1
Это лучший ответ для меня, потому что вы не забыли \ r, который используется в некоторых системах
Bartłomiej Zalewski
1
Это лучший ответ на этот вопрос. Но я просто пойду с не <br />. Посмотрите это на stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br
kheya
8

Если принятый ответ не подходит вам, вы можете попробовать.

str.replace(new RegExp('\n','g'), '<br />')

Это сработало для меня.

Джетро Ларсон
источник
2
new RegExp('\n', 'g')идентично /\n/g(за исключением некоторых подробностей об использовании примитивных литералов по сравнению с их конструкторами).
век
2
Безотносительно причины это работало для меня, но принятый ответ не
ник
1
Ах, то же самое здесь ... но моя ошибка была в попытке указать /\n/gв виде строки!
Даниэль Фортунов
7

Независимо от системы:

my_multiline_text.replace(/$/mg,'<br>');
Мишель Онгаро
источник
1
Внимание: это добавит тег «<br>» к любой строке, независимо от того, есть ли в ней символ «\ n».
mkoeller
4

Также важно закодировать остальную часть текста, чтобы защитить от возможных атак внедрения сценария.

function insertTextWithLineBreaks(text, targetElement) {
    var textWithNormalizedLineBreaks = text.replace('\r\n', '\n');
    var textParts = textWithNormalizedLineBreaks.split('\n');

    for (var i = 0; i < textParts.length; i++) {
        targetElement.appendChild(document.createTextNode(textParts[i]));
        if (i < textParts.length - 1) {
            targetElement.appendChild(document.createElement('br'));
        }
    }
}
Дмитрий Дзыгин
источник
4

Это сработало для меня, когда значение пришло из TextBox:

string.replace(/\n|\r\n|\r/g, '<br/>');
Доктор Аарон Дишно
источник
2

Для тех из вас, кто просто хочет, чтобы макс. 2 <br>подряд, вы можете использовать это:

let text = text.replace(/(\r?\n){2,}/g, '<br><br>');
text = text.replace(/(\r?\n)/g, '<br>');

Первая строка: найдите \nИЛИ, \r\nгде хотя бы 2 из них находятся в строке, например \n\n\n\n. Затем замените его на 2br

Вторая строка: поиск всех одинарных \r\nили \nи заменить их на<br>

Максимум
источник
1

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

$string=nl2br($string);
Лука С.
источник
0

Он заменит всю новую строку с разрывом

str = str.replace(/\n/g, '<br>')

Если вы хотите заменить всю новую строку одной строкой разрыва

str = str.replace(/\n*\n/g, '<br>')

Узнайте больше о Regex: https://dl.icewarp.com/online_help/203030104.htm это поможет вам каждый раз.

Риту Гупта
источник
Также можно использовать регулярное выражение, подобное этому, str = str.replace(/\n+/g, '<br>')для второго случая
Маттео Бассо
0

Не отвечая на конкретный вопрос, но я уверен, что это кому-то поможет ...

Если у вас есть вывод из PHP, который вы хотите визуализировать на веб-странице с использованием JavaScript (возможно, результат Ajax-запроса), и вы просто хотите сохранить пробелы и разрывы строк, попробуйте заключить текст в <pre></pre>блок:

var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '</pre>';
osullic
источник
0

Пытаться

let s=`This is man.

     Man like dog.
     Man like to drink.

     Man is the king.`;
     
msg.innerHTML = s.replace(/\n/g,"<br />");
<div id="msg"></div>

Камил Келчевски
источник