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

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

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

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

демонстрация: http://so.devilmaycode.it/jquery-convert-line-breaks-to-br-nl2br-equivalent

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

• http://phpjs.org/functions/nl2br:480

вы можете просто сделать:

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

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

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

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

var myString = "test\ntest2";

myString.nl2br();

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

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

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

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

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

Решение

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

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

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

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

/**
 * This function is same as PHP's 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

Я написал для этого небольшое расширение 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);
};

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

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

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

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

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