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

Ich lasse jQuery Textinhaltsinhalte in ein Li einfügen.

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

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

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');
}

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

Sie können einfach tun:

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

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

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

Verwendung:

var myString = "test\ntest2";

myString.nl2br();

Durch das Erstellen einer String-Prototyp-Funktion können Sie diese für jeden String verwenden.

Um das Rendering zu ändern , anstatt den Inhalt zu ändern, verhält sich jede neue Zeile mit<br> dem folgenden CSS wie folgt :

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

Warum zwei Regeln: pre-lineBetrifft nur Zeilenumbrüche (danke für den Hinweis, @KevinPauli). IE6-7 und andere alte Browser greifen auf das Extremere zurück, predas auch nowrapmehrere Leerzeichen enthält und rendert. Details zu diesen und anderen Einstellungen ( pre-wrap) bei Mozilla und CSS-Tricks (danke @Sablefoste).

Während ich im Allgemeinen der SO-Vorliebe abgeneigt bin, die Frage zu erraten, anstatt sie zu beantworten, kann in diesem Fall das Ersetzen von Zeilenumbrüchen durch <br>Markup die Anfälligkeit für Injektionsangriffe durch ungewaschene Benutzereingaben erhöhen . Sie überschreiten eine leuchtend rote Linie, wenn Sie .text()Anrufe ändern , für .html()die die wörtliche Frage impliziert, dass dies getan werden müsste. (Vielen Dank an @AlexS, dass Sie diesen Punkt hervorgehoben haben.) Selbst wenn Sie zu diesem Zeitpunkt ein Sicherheitsrisiko ausschließen, können zukünftige Änderungen es unabsichtlich einführen. Stattdessen können Sie mit diesem CSS mit dem Safer harte Zeilenumbrüche ohne Markup erzielen .text().

Lösung

Verwenden Sie diesen Code

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

Diese JavaScript-Funktion berücksichtigt, ob für den Swap Einfügen oder Ersetzen verwendet werden soll.

(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

Ich habe dafür eine kleine jQuery-Erweiterung geschrieben:

$.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);
};

um die akzeptierte Antwort von @Luca Filosofi zu verbessern,

Wenn Sie die /([^>[\s]?\r\n]?)Anfangsklausel dieses regulären Ausdrucks bei Bedarf ändern, werden auch die Fälle berücksichtigt, in denen die neue Zeile nach einem Tag UND einem Leerzeichen steht, anstatt nur nach einem Tag, unmittelbar gefolgt von einer neuen Zeile

Eine andere Möglichkeit, Text aus einem Textbereich in das DOM einzufügen, 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 nähert es sich dem Text an, den der Benutzer erhalten würde, wenn er den Inhalt des Elements mit dem Cursor hervorheben und dann in die Zwischenablage kopieren würde.

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