jQuery text () - Funktion verliert die Zeilenumbrüche im IE

Dies ist eine Recht gesprochen über Probleme, die auf der jQuery-Foren, aber ich kann nicht herausfinden, eine Lösung für meine situation.

Ich habe eine ungeordnete Liste mit einigen text-Elemente in sich... kann der Benutzer neue Liste erstellen Elemente über jQuery, die gespeichert werden auf einer SQL-Datenbank. Sie können auch Bearbeiten Sie vorhandene Einträge. Auch, weil der text in jedem Punkt der Liste kann man ziemlich lange, haben Sie die option 'versteckt' jedes Listenelement, so zeigt es eine verkürzte version der Zeichenfolge. Dies erfolgt durch eine benutzerdefinierte jQuery-plugin, das kürzt Liste der Elemente, die über eine gewisse Länge haben... hier ist, was jedes Listenelement aussieht, wenn der truncate plugin hat es formatiert:

<li id="item_1">
<div class="note">
    This is the text that shows when this element is truncated <span style="display: none;" class="truncate_ellipsis">...</span>
<span style="display: inline;" class="truncate_more">This is the text that will be hidden if the user clicks on the 'hide' button</span>
</div>  
<div class="toggle_wrapper"> 
    <div class="note_toggle">
        <a href="#" class="truncate_more_link">Hide note</a>
    </div> 
    <div style="display: block;" class="note_controls"> 
        <span class="edit_note"><a href="#note_textfield" id="edit_note_1">Edit</a></span> | <span class="delete_note"><a href="#" id="delete_note_1">Delete</a></span> 
    </div> 
</div> 
</li>

Das problem, das ich habe, ist, dass der Benutzer klickt auf 'edit' und es nimmt den Inhalt des div mit der Klasse "Hinweis" und ordnet ihn einem text-Bereich. Der Benutzer kann dann Bearbeiten Sie den text, und speichern Sie es. Ich bin mit dem folgenden Skript zu packen, den Inhalt des div und weisen Sie auf die textarea:

$('.edit_note a').click(function(event){

    //Get the parent li of the 'edit' link that was clicked 
    var parentLi = $(this).closest('li');

    //fade out the li that's being edited
    parentLi.fadeOut('fast');

    //remove the '...' that shows when the note is truncated
    parentLi.find('.truncate_ellipsis').remove();

    //find the 'note' div within the li that's being edited
    var currentNote = parentLi.find('.note');

    //grab the id of this note... used when saving to the DB
    var noteId = $(this).attr('id').substr(10);

    //Set the current note id variable and editing status
    currentNoteId = noteId;
    currentNoteStatus = 'edit';

    //add the note ID as a hidden field to the text editor form
    $('input[name$="note_id"]').val(noteId);

    //grab the text from this note and add it to the text area
    //(textarea id is 'notes_content')
    $('#notes_content').val($.trim(currentNote.text()); //this is the text area

    //fade in the text area so the user can edit
    $('div.notes_textarea').fadeIn();

});

Sobald es gespeichert, ich verwende eine Funktion, die ich online gefunden zu konvertieren Zeilenumbrüche zu BRs, bevor er den Inhalt des Textfeldes zurück, um die 'Hinweis' - div-Element in der entsprechenden Liste item:

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

Dies alles funktioniert in firefox /chrome /opera /safari... im IE allerdings wird entfernen Sie die Zeilenumbrüche, wenn es schnappt sich den text über die jQuery text () - Funktion. Dies wird diskutiert in den Kommentaren von dieser Seite auf die jQuery-Dokumentation:

http://api.jquery.com/text/

Einige Leute haben Erfolg durch das Klonen der Quell-element, wickelte Sie in 'pre' - tags, dann nehmen Sie den Inhalt und setzen Sie in den text-Bereich. Dies funktioniert für Zeilenumbrüche, sondern bringt auch über zusätzliche Leerzeichen, tabs, etc. und es sieht ein bisschen Durcheinander. Eine bessere Lösung scheint es zu sein, verwenden Sie das html() jQuery-Funktion zu packen, die den text, ersetzen Sie dann die br ' s für Zeilenumbrüche und Streifen, aus anderen html-Formatierung.

Ich bin neu in Javascript jedoch, und ich bin Abfall reguläre Ausdrücke, so würde ich nicht haben eine Ahnung, wie dies zu tun und ich bin läuft die Zeit davon! Ich brauche einen regulären Ausdruck, oder einfach nur etwas Hilfe mit der string-Formatierung zu tun, die folgenden:

• entfernen Sie alle span-tags aus einem string OHNE entfernen der Inhalt des span-Tags (mein truncate-Funktion fügt einen span mit der Klasse "truncate_more" ... siehe html-code oben)

• entfernen, br, und ersetzen Sie Sie durch neue-Zeile-Zeichen wird korrekt angezeigt, in einem textarea-element, und seien Sie konsistent in allen Browsern

.. ODER ob jemand weiß eine bessere Lösung für das IE /textarea /linebreak Thema, ich würde wirklich zu schätzen eine Idioten Anleitung 🙂

Einiges an Informationen für Sie, was ist wohl eine einfache Lösung, aber ich dachte, ich würde versuchen, die situation zu erklären, so gut ich konnte! Jede Hilfe wäre enorm geschätzt....

BEARBEITEN: 'TheJuice Antwort unten arbeitete für den br' s /IE Zeilenumbrüche Ausgabe (danke!), aber ich brauche die Durchführung einer ähnlichen regex, um loszuwerden, das reicht, da Sie nur Kapseln Teil des Textes. Ich habe Folgendes versucht, das scheint zu funktionieren, im firefox aber im IE die Spannweiten bleiben:

        var withBRs = currentNote.html();
    var textWithBreaks = withBRs.replace(/\<br\>/gi,'\r');
    textWithBreaks = textWithBreaks.replace(/\<.*span.*\>/g, '');

Noch ein EDIT : 'TheJuice' dieses problem gelöst zu... ignorieren meine schreckliche regex und nur das tun, was er sagt, wenn Sie sich in der gleichen situation! Vielen Dank an alle die angebotenen Vorschläge...