JQuery конвертировать разрывы строк в br (эквивалент nl2br)

У меня есть jQuery для получения некоторого содержимого textarea и вставки его в li.

Я хочу, чтобы он визуально сохранял разрывы строк.

Должен быть действительно простой способ сделать это...

ОТВЕТЫ

Ответ 2

вы можете просто:

textAreaContent=textAreaContent.replace(/\n/g,"<br>");

Ответ 3

Поместите это в свой код (желательно в общую библиотеку функций js):

String.prototype.nl2br = function()
{
    return this.replace(/\n/g, "<br />");
}

Использование:

var myString = "test\ntest2";

myString.nl2br();

создание функции прототипа строки позволяет использовать ее для любой строки.

Ответ 4

В духе изменения рендеринга вместо изменения содержимого следующий CSS заставляет каждую новую строку вести себя как <br>:

white-space: pre;
white-space: pre-line;

Почему два правила: pre-line влияет только на новые строки (спасибо за подсказку, @KevinPauli). IE6-7 и другие старые браузеры возвращаются к более экстремальной pre nowrap которая также включает в себя nowrap и отображает несколько пробелов. Подробности об этих и других настройках (pre-wrap) в Mozilla и css-tricks (спасибо @Sablefoste).

Хотя я, как правило, не склонен к склонности SO ко второму угадыванию вопроса, а не к ответу на него, в этом случае замена символов новой строки на разметку <br> может повысить уязвимость к атакам с помощью инъекций с немытым пользовательским вводом. Вы пересекаете ярко-красную линию всякий раз, когда обнаруживаете, что меняете вызовы .text() на .html() что подразумевает буквальный вопрос. (Спасибо @AlexS за выделение этого момента.) Даже если вы исключите угрозу безопасности в то время, будущие изменения могут непреднамеренно представить ее. Вместо этого этот CSS позволяет получать жесткие разрывы строк без разметки с помощью более безопасного .text().

Ответ 5

Решение

Используйте этот код

jQuery.nl2br = function(varTest){
  return varTest.replace(/(\r\n|\n\r|\r|\n)/g, "<br>");
};

Ответ 6

Эта функция JavaScript учитывает, использовать ли вставку или заменить для обработки подкачки.

(Вставьте или замените разрывы строк HTML)

/**
 * This function is same as PHP nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

Демо - JSFiddle

Функции JavaScript nl2br & br2nl

Ответ 7

Для этого я написал небольшое расширение jQuery:

$.fn.nl2brText = function (sText) {
    var bReturnValue = 'undefined' == typeof sText;
    if(bReturnValue) {
        sText = $('<pre>').html(this.html().replace(/<br[^>]*>/i, '\n')).text();
    }
    var aElms = [];
    sText.split(/\r\n|\r|\n/).forEach(function(sSubstring) {
        if(aElms.length) {
            aElms.push(document.createElement('br'));
        }
        aElms.push(document.createTextNode(sSubstring));
    });
    var $aElms = $(aElms);
    if(bReturnValue) {
        return $aElms;
    }
    return this.empty().append($aElms);
};

Ответ 8

чтобы улучшить принятый ответ @Luca Filosofi,

если необходимо, изменение начального предложения этого регулярного выражения как /([^>[\s]?\r\n]?) также будет содержать случаи, когда новая строка появляется после тега AND some whitespace, а не только тег, за которым сразу следует новая строка

Ответ 9

Другой способ вставить текст из текстового поля в DOM, сохраняя разрывы строк, заключается в использовании свойства Node.innerText, которое представляет отображаемое текстовое содержимое node и его потомков.

Как получатель, он аппроксимирует текст, который получит пользователь, если он выделит содержимое элемента курсором и затем скопирует его в буфер обмена.

Свойство стало стандартным в 2016 году и хорошо поддерживается современными браузерами. Могу ли я использовать: глобальный охват 97%, когда я отправил этот ответ.