texte jQuery() la fonction perd des sauts de ligne dans IE

C'est assez parlé de problème sur le jQuery, forums, mais je ne peux pas trouver un solution pour ma situation.

J'ai une liste non ordonnée avec certains éléments de texte dans... l'utilisateur peut créer de nouveaux éléments de la liste via jQuery, qui sont enregistrées dans une base de données SQL. Ils peuvent également modifier les éléments de liste. Aussi, parce que le texte de chaque élément de la liste peut être assez longue, ils ont la possibilité de "cacher" chaque élément de la liste et afficher une version tronquée de la chaîne. Ceci est géré par un plugin jQuery qui tronque les éléments de la liste qui sont sur une certaine longueur... voici ce que chaque élément de la liste ressemble une fois le tronquer plugin a mis en forme:

<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>

Le problème que j'ai, c'est que l'utilisateur clique sur "modifier" et il prend le contenu de la div avec la classe "note", et il l'attribue à une zone de texte. L'utilisateur peut ensuite modifier le texte, et de l'enregistrer. J'utilise le script suivant pour saisir le contenu de la div et de l'affecter à la 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();

});

Une fois que c'est enregistré, je suis en utilisant une fonction que j'ai trouvé en ligne pour convertir les sauts de ligne pour BRs, avant d'affecter le contenu de la zone de texte à la 'note' div à l'intérieur de la liste appropriée 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');
}

Tout cela fonctionne très bien dans firefox /chrome /opera /safari... cependant, c'est à dire se débarrasser de la ligne des pauses quand il attrape le texte par le texte jQuery() fonction. Cette question est abordée dans les commentaires de cette page sur le jQuery documentation:

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

Certaines personnes ont eu du succès par le clonage de l'élément source, en l'enveloppant dans le " pré " balises, puis prendre le contenu et de le mettre dans la zone de texte. Cela fonctionne pour les sauts de ligne, mais amène également sur les espaces, les tabulations, etc. et il semble un peu de désordre. Une meilleure solution semble être d'utiliser le html() fonction jQuery pour récupérer le texte, puis remplacez br pour les sauts de ligne, et d'en extraire toute autre mise en forme html.

Je suis nouveau sur le Javascript cependant, et je suis ordures dans les expressions régulières donc je n'aurais pas la moindre idée de comment le faire et je suis en cours d'exécution hors du temps! J'ai besoin d'une expression régulière, ou juste un peu d'aide avec la chaîne de mise en forme pour effectuer les opérations suivantes:

• supprimer toutes les balises span partir d'une chaîne SANS supprimer le contenu du span (mon tronquer fonction ajoute un span avec la classe "truncate_more" ... voir le code html ci-dessus)

• supprimer les br et les remplacer par des caractères de saut de ligne qui permettra d'afficher correctement dans un textarea élément et être compatible sur tous les navigateurs

OU.. si quelqu'un sait d'une meilleure solution de contournement à ce IE /textarea /linebreak problème, j'apprécierais vraiment une des idiots guide 🙂

Tout à fait un peu d'information pour ce qui est probablement une solution simple, mais je pensais que je voudrais essayer d'expliquer la situation du mieux que je pouvais! Toute aide serait très appréciée....

MODIFIER: 'TheJuice la réponse ci-dessous a travaillé pour le br /IE les sauts de ligne en question (merci!), mais j'ai besoin de proposer une regex pour se débarrasser des travées, comme ils ne encapsuler un peu le texte. J'ai essayé la suivante, ce qui semble bien fonctionner dans firefox, mais sous IE, les travées demeurent:

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

Un AUTRE MODIFIER : 'TheJuice' résolu ce problème aussi... ignorer mon horrible regex, et juste faire ce qu'il dit, si vous vous trouvez dans la même situation! Merci à tous ceux qui ont fait des suggestions...

OriginalL'auteur Mr_Beagle | 2010-12-21