jQuery-Text () und Zeilenumbrüche

Ich möchte sagen können

$(someElem).text('this\n has\n newlines);

und es wird mit Zeilenumbrüchen im Browser gerendert. Die einzige Problemumgehung, die ich gefunden habe, besteht darin, die CSS-Eigenschaft 'white-space' für someElem auf 'pre' zu setzen. Das funktioniert fast, aber dann habe ich einen ärgerlich großen Abstand zwischen dem Text und der Oberseite von someElem, selbst wenn ich den Abstand auf 0 setze. Gibt es eine Möglichkeit, dies loszuwerden?

Es ist das Jahr 2015. Die richtige Antwort auf diese Frage lautet derzeit CSS white-space: pre-lineoder white-space: pre-wrap. Sauber und elegant. Die niedrigste Version von IE, die das Paar unterstützt, ist 8.

https://css-tricks.com/almanac/properties/w/whitespace/

PS Bis CSS3 üblich wird, müssen Sie wahrscheinlich anfängliche und / oder nachfolgende Leerzeichen manuell abschneiden.

Wenn Sie das jQuery-Objekt in einer Variablen speichern, können Sie Folgendes tun:

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Wenn Sie möchten, können Sie auch eine Funktion erstellen, um dies mit einem einfachen Aufruf zu tun, genau wie es jQuery.text () tut:

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

Folgendes benutze ich:

function htmlForTextWithEmbeddedNewlines(text) {
    var htmls = [];
    var lines = text.split(/\n/);
    // The temporary <div/> is to perform HTML entity encoding reliably.
    //
    // document.createElement() is *much* faster than jQuery('<div></div>')
    // http://stackoverflow.com/questions/268490/
    //
    // You don't need jQuery but then you need to struggle with browser
    // differences in innerText/textContent yourself
    var tmpDiv = jQuery(document.createElement('div'));
    for (var i = 0 ; i < lines.length ; i++) {
        htmls.push(tmpDiv.text(lines[i]).html());
    }
    return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));

Alternativ versuchen Sie es mit .htmlund dann wickeln mit <pre>Tags:

$(someElem).html('this\n has\n newlines').wrap('<pre />');

Sie können htmlanstelle textund ersetzen jedes Vorkommen von \ndurch <br>. Sie müssen Ihren Text jedoch korrekt maskieren.

x = x.replace(/&/g, '&')
     .replace(/>/g, '>')
     .replace(/</g, '&lt;')
     .replace(/\n/g, '<br>');

Ich würde vorschlagen, someElemdirekt mit dem Element zu arbeiten , da das Ersetzen .html()durch auch andere HTML-Tags innerhalb der Zeichenfolge ersetzen würde.

Hier ist meine Funktion:

function nl2br(el) {
  var lines = $(el).text().split(/\n/);
  $(el).empty();
  for (var i = 0 ; i < lines.length ; i++) {
    if (i > 0) $(el).append('<br>');
    $(el).append(document.createTextNode(lines[i]));
  }
  return el;
}

Nennen Sie es bei:

someElem = nl2br(someElem);

Versuche dies:

$(someElem).html('this<br> has<br> newlines);

Die Verwendung der CSS-Leerraum-Eigenschaft ist wahrscheinlich die beste Lösung. Verwenden Sie die Firebug- oder Chrome Developer Tools, um die Quelle der zusätzlichen Polsterung zu ermitteln, die Sie gesehen haben.