Discussion :

[lapaupiette]

Bonjour,

Je cherche à supprimer les balises HTML dans le texte d'un textara qunad on y colle quelque chose :

Code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form action="post.php" method="post">
   <p><textarea name="zone" id="zone" rows="20" cols="100"></textarea></p>
   <p>
<input type="submit" value="Envoyer" /></p>
</form>

Et le JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$("#zone").on("paste", function () {
		  var element = this;
		  setTimeout(function() {
	        var sTexte = $(element).val();
		    alert("sTexte (val) : "+sTexte);
 
	        var sTexte2 = $(element).text();
	        alert("sTexte 2 (text) : "+sTexte2);
 
	        $(element).html(sTexte2);	          
     	  }, 100);
		});

Je souhaite enlever les tags html uniquement pour la valeur du textarea, mais je n'arrive pas à appliquer la fonction text() sur cette valeur récupérée avec la fonction val (variable sTexte). La variable sTexte2 ne me renvoie rien, si je lui passe sTexte en paramètres j'ai une erreur du genre 'hiérarchie ne peut être insérée à cet endroit'.

Aute chose, j'ai vu sur le web que text() retourne la chaine complétement concaténée, sans espaces ni points dans les phrases, le texte devient donc incompréhensible. Comment faire pour suppirmer les balises html proprement en conservant la lisibilité du texte ?

[elfamine]

Bonjour lapaupiette

Est ce que ca fonctionne mieux comme ca ?

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$("#zone").on("paste", function () {
		  var element = this;
		  setTimeout(function() {
	        var sTexte = $(element).val();
		    alert("sTexte (val) : "+sTexte);
 
	        var sTexte2 = $(sTexte).text();
	        alert("sTexte 2 (text) : "+sTexte2);
 
	        $(element).html(sTexte2);	          
     	  }, 100);
		});

[Bovino]

Non, ça ne risque pas de marcher.
La méthode .text() sert à récupérer le contenu textuel d'une balise, or quand tu modifies un textarea, ce n'est pas le contenu de la balise que tu modifies mais le value, la méthode .text() ne peut donc pas s'appliquer.

Une solution (à tester), pourrait être de créer un nouvel élément, lui coller le value via la méthode .html() et en récupérer le .text() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$("#zone").on("paste", function () {
	var element = this;
	setTimeout(function() {
	        var sTexte = $(element).val();
 
	        var sTexte2 = $('<div>').html(sTexte).text();
	        alert("sTexte 2 (text) : "+sTexte2);
 
	        $(element).html(sTexte2);	          
     	  }, 100);
});

[lapaupiette]

Merci pour vos réponses, cela m'a aidé : partant du constat qu'il est impossible d'appliquer la méthode text() à la valeur du textarea, je me suis dit qu'il fallait traiter cette valeur telle qu'elle est intrinsèquement, c'est-à-dire une chaîne de texte, j'ai donc trouvé sur le web une fonction qui supprime les balises html dans la chaîne et ça marche nickel (j'ai testé que sous Firefox, je testerai dans d'autres navigateurs demain mais sur le papier ça ne devrait pas poser de problèmes).

Voici le code final :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
function strip_tags(str){
   t = str.replace(/<(\/)?(html|head|title|body|h1|h2|h3|h4|h5|h6|p|br|hr|pre|em|strong|code|b|i|a|ul|li|ol|dl|dd|table|tr|th|td)([^>]*)>/gi, "");
   t = t.replace(/<(\/)?(iframe|frameset|form|input|select|option|textarea|blackquote|address|object)([^>]*)>/gi, "");
   return t; 
}  
 
$(document).ready(function() {
  $("#zone").on("paste", function () {
  var element = this;
  setTimeout(function() {
     var sTexte = $(element).val();
     var t = strip_tags(sTexte);  
     $(element).val(t);	           
   }, 100);     	  
   });	   	   	
});   
</script>

[danielhagnoul]

Bonsoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
 * La méthode de Bovino est plus efficace,
 * elle traite tous les cas (pas seulement les tags 
 * 	HTML historiques).
 * 
 * Plus 1 pour Bovino pour l'événement "paste".
 */
$( "textarea" ).on( "focus blur paste", function(){
	var jObj = $( this ),
		jObjDiv = $( "<div/>", {
			"html" : jObj.val()
		});
 
	jObj.val( jObjDiv.text() );
});