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

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

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

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

7 98
javascript jquery line-breaks

7 ответов:

демо: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, ''+ breakTag +'');
}
150

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

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

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

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

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

var myString = "test\ntest2";

myString.nl2br();

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

26

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

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

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

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

19

решение

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

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

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

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

0

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

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

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

0