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

Question

Как я могу прочитать разрыв строки из значения с помощью 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."

Answer 1

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

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

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

Answer 2

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

HTML

<div class="white-space-pre">Some test
with linebreaks</div>

CSS

.white-space-pre {
    white-space: pre-wrap;
}

jsfiddle https://jsfiddle.net/yk1angkz/125/

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

Answer 3

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

str = str.split("\n").join("<br />");

Answer 4

Это работает для ввода, поступающего из текстовой области

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

Answer 5

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

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

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

Answer 6

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

my_multiline_text.replace(/$/mg,'<br>');

Answer 7

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

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'));
        }
    }
}

Answer 8

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

string.replace(/\n|\r\n|\r/g, '<br/>');

Answer 9

Для тех из вас, кто просто хочет разрешить макс. 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. Затем замените его на 2 br

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

Answer 10

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

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

<code>var text_with_line_breaks = retrieve_some_text_from_php();
var element = document.querySelectorAll('#output');
element.innerHTML = '<pre>' + text_with_line_breaks + '

';