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:
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
Vous devez vous connecter pour publier un commentaire.
Ici est beaucoup plus simple solution de convertir n'importe quel format HTML en texte brut avec des sauts de ligne, basé sur l'utilisation de
<br>
ou<p>
balises.Par exemple, l'appel de la méthode suivante:
retourne:
Espère que ça aide 😉
cheerio
pour Node.js - voir github.com/cheeriojs/cheerio/issues/839OriginalL'auteur Matthew O'Riordan
Je pense que quelque chose comme cela fonctionne pour vous. http://jsfiddle.net/6qbxn/2/. J'ai testé sous IE 7 & 8 & 4 FF.0b7 et il fonctionne comme prévu.
JS:
HTML:
Edit: Cela répond à votre deuxième point.
Merci beaucoup les gars, c'est exactement ce que je cherchais! Je savais que ce serait quelque chose de simple. Cependant, j'ai encore un léger problème; la durée n'a pas d'encapsuler tout le texte, il commence mi-chemin à travers. La div s'ouvre, puis il y a un peu de texte, puis il y a un intervalle contenant le reste du texte, donc j'ai fait foirer l'ouverture et la fermeture des balises span (bare à l'esprit du css est ajouté à la balise d'ouverture via jQuery pour la vider de fonction - voir le balisage ci-dessus). Est-il un moyen facile de le faire avec un semblable fonction remplacer? Je suis nouveau sur regex si mes efforts sont assez pathétique!
Je voudrais sélectionnez le code HTML à partir de la première travée puis ajouter le code HTML à partir de la deuxième travée (en supposant que vous avez toujours juste les 2 travées). Après que faire de votre <br> remplacer des trucs. Vous voulez probablement pour éviter d'utiliser des regex si vous pouvez comme même le code que je vous ai montré seront susceptibles de se briser si quelqu'un fait un tag "<br >".
Ah ouais c'est probablement plus facile... pour le moment il n'y a pas de "premier" span.. la div s'ouvre, puis il y a un peu de texte (pas de durée), alors il y a un peu plus de texte avec la durée autour d'elle. Mais oui, je vois votre point de vue... je pourrais juste pop une durée de autour de, le premier bit de texte, puis les saisir à la fois et de la pop dans la zone de texte l'un après l'autre. Je vais essayer cela et voir comment je passer (mon maigre effort à une regex pour supprimer les balises span a été ajouté à l'original post ci-dessus) 🙂
Yep... qui a travaillé un régal! Un immense merci... marquera votre réponse que l'on a accepté la réponse.
OriginalL'auteur offner