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

Question

Мне нужно, чтобы jQuery взял текстовое содержимое и вставил его в библиотеку.

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

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

Answer 1

демо: 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

Answer 2

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

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

Answer 3

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

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

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

var myString = "test\ntest2";

myString.nl2br();

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

Answer 4

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

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

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

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

Answer 5

Решение

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

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

Answer 6

Эта функция 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

Answer 7

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

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

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

Answer 8

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

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