web-dev-qa-db-de.com

jQuery konvertiert Zeilenumbrüche in br (nl2br-Äquivalent)

Ich habe jQuery, einige Textbereiche zu nehmen und in ein Li einzufügen.

Ich möchte, dass die Zeilenumbrüche visuell beibehalten werden.

Es muss einen wirklich einfachen Weg geben, dies zu tun ...

99
gbhall

Demo: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');
}
154
Luca Filosofi

sie können einfach tun:

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

Fügen Sie dies in Ihren Code ein (vorzugsweise in eine allgemeine js-Funktionsbibliothek):

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

Verwendungszweck:

var myString = "test\ntest2";

myString.nl2br();

wenn Sie eine Zeichenfolge-Prototypfunktion erstellen, können Sie diese für jede Zeichenfolge verwenden.

27
jnl

Im Sinne des Änderns von Rendering anstelle von Inhalt, führt das folgende CSS dazu, dass sich jede Newline wie ein <br> verhält:

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

Warum zwei Regeln: pre-line betrifft nur Zeilenumbrüche (danke für den Hinweis, @KevinPauli). IE6-7 und andere alte Browser greifen auf die extremere pre zurück, die auch nowrap enthält und mehrere Leerzeichen darstellt. Details zu diesen und anderen Einstellungen (pre-wrap) finden Sie unter mozilla und css-Tricks (Danke @Sablefoste).

Während ich generell abgeneigt bin. Vorliebe für Zweites Erraten der Frage Anstatt sie zu beantworten, kann das Ersetzen von Zeilenumbrüchen durch <br> Markup die Anfälligkeit für injection attack durch ungewaschene Benutzereingaben erhöhen. Sie überqueren eine helle rote Linie, wenn Sie .text()-Aufrufe an .html() ändern, was die wörtliche Frage impliziert. (Danke, @AlexS, dass Sie diesen Punkt hervorgehoben haben.) Selbst wenn Sie ein Sicherheitsrisiko zu diesem Zeitpunkt ausschließen, könnten zukünftige Änderungen es unwissentlich einführen. Stattdessen können Sie mit diesem CSS mit der sichereren .text() harte Zeilenumbrüche ohne Markup erzielen.

20
Bob Stein

Lösung

Verwenden Sie diesen Code

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

um die akzeptierte Antwort von @Luca Filosofi zu verbessern,

falls erforderlich, wird durch Ändern der Anfangsklausel dieser Regex in /([^>[\s]?\r\n]?) auch die Fälle angezeigt, in denen die Zeilenumbrüche nach einem Tag UND ein Leerzeichen stehen, und nicht nur ein Tag, dem unmittelbar ein Zeilenumbruch folgt

0
phlare

Eine andere Möglichkeit zum Einfügen von Text aus einem Textbereich in das DOM, wobei die Zeilenumbrüche beibehalten werden, ist die Verwendung der Node.innerText -Eigenschaft, die den gerenderten Textinhalt eines Knotens und seiner Nachkommen darstellt.

Als Getter approximiert es den Text, den der Benutzer erhalten würde, wenn er den Inhalt des Elements mit dem Cursor hervorhebt und dann in die Zwischenablage kopiert.

Die Eigenschaft wurde im Jahr 2016 zum Standard und wird von modernen Browsern gut unterstützt. Kann ich : 97% globale Abdeckung verwenden, wenn ich diese Antwort gepostet habe.

0
Volo

Diese JavaScript-Funktion prüft, ob Sie den Swap mit insert oder replace ersetzen möchten. 

(HTML-Zeilenumbrüche einfügen oder ersetzen)

/**
 * 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);
}

Demo - JSFiddle

JavaScript nl2br & br2nl Funktionen

0
Nick Tsai