Discussion :

[jumbay]

Salut,


Je suis en train de lutter pour supprimer des attributs de certaines balises en utilisant les expressions régulières.
J'aimerais garder seulement les attributs tilte et href d'une balise <a>.
Ex :
<a href="http://monsite.com" onclick="..." onmouseover="..." title="le titre">lien</a>

devient :
<a href="http://monsite.com" title="le titre">lien</a>

Et ce quelque soit les attributs présent ainsi que leur place dans la balise.

Je pense que cela est possible avec les expressions régulières mais je n'y arrive pas


Merci d'avance.

JumBay

[Auteur]

bonjour,

voici une solution :

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
19
20
21
 
 var chaine = '<a onmousedown="" href="http://monsite.com" onclick="..." onmouseover="..." title="le titre">lien</a>;';
 var lien, titre, msg, pos1, pos2;
 
 var exp_href = /(href=\"[a-z0-9.\/:-_]+\")/gi;
 var exp_Title = /(title=\"[a-z0-9.\/:-_\s]+\")/gi;
 
 var sortie;
 
 lien = chaine.match(exp_href);  //extraction du href
 titre = chaine.match(exp_Title);  //extration de title
 
 pos1 = chaine.indexOf(">");    // position de >
 pos2 = chaine.indexOf("<", pos1);   // position de < qui vient apres le >
 msg = chaine.substring(pos1+1, pos2);  // extraction du message
 
//reconstitution du lien 
 sortie = "<a "+lien+" "+titre+">"+msg+"</a>";
 
 
 alert(lien+"\n"+titre+"\n"+msg+"\nRésultat=\n"+sortie);

remarque : il faut que le contenu de href et de title soient encadrés par des " "

[jumbay]

Merci pour ta solution mais j'ai oublié de préciser que j'aimerais faire ceci dans un texte contenant différentes balises dont des balises <a> et celles-ci peuvent être présente plusieurs fois.

Sinon dans ce que tu m'as donnée pour extraire le title ou le href on peut faire comme ceci aussi:

Code :

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

var exp_href = /(href="[^"]+")/gi;

on gagne 3 charactères

J'ai pensé à entouré les href et les title avec des [] pour les récupérer plus facilement par la suite:

Code :

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

<a onmousedown="" href="http://monsite.com" onclick="..." onmouseover="..." title="le titre">lien</a>

devient :

Code :

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

<a onmousedown="" [href="http://monsite.com"] onclick="..." onmouseover="..." [title="le titre"]>lien</a>

... mais je n'y arrives pas :s

[Auteur]

match retourne un tableau :

Code x :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
var chaine = "";
chaine  = '<a onmousedown="" href="http://monsite1.com" onclick="..." onmouseover="..." title="le titre 1">lien 1</a>;';
chaine += '<p>bla bla bla';
chaine += '<a href="http://monsite2.com" title="le titre 2">lien 2</a>;';
chaine += 'bla bla <span> bla bla bla</span> bla';
chaine += '<a onmouseover="..."  href="http://monsite3.com" onclick="..." title="le titre 3">lien 3</a>;';
chaine += '</p>';


 var lien, titre, msg, n;
 var sortie;

 var exp_href = /(href="[^"]+")/gi;
 var exp_Title = /(title="[^"]+")/gi;
 var exp_msg = /(>[^<]+<\/a>)/gi;


 lien = chaine.match(exp_href);  //extraction du href
 titre = chaine.match(exp_Title);  //extraction de title
 msg = chaine.match(exp_msg);  //extraction du message

 n = lien.length;

 sortie = "";
 for (i=0; i<n; i++)
 {
    sortie += "<a "+lien[i]+" "+titre[i] + msg[i]+"\n";
 }

 alert(sortie);

J'ai ajouté des balises p et span dans la chaine pour le test
Néanmoins, il faut supposer que toutes les balises <a> ont les attributs href et title (sinon les tableaux title, href et msg n'auront pas la même taille).

[jumbay]

C'est bon j'ai trouvé la solution.

Bon c'est peut être pas ce qui a de plus beau mais ça marche :

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
19
20
21
22
23
 
var text = '<a title="titre seul" ><a href="lien seul" ><a title="[titre] et lien"  href="titre et [lien]"  ><a  href="[lien] et titre" title="lien et [titre]" ><a onmousedown="" href="http://monsite1.com" onclick="..." onmouseover="..." title="le titre 1">lien 1</a>';
 
text.replace(/<a[^th>]*(href=".*?"|title=".*?"|)*[^th>]*(href=".*?"|title=".*?")*[^>]*>/gi, '<a $1 $2>');
 
// affiche : 
// <a title="titre seul" ><a href="lien seul" ><a title="[titre] et lien" href="titre et [lien]"><a href="[lien] et titre" title="lien et [titre]"><a href="http://monsite1.com" title="le titre 1">lien 1</a>
 
 
// Et avec d'autres balises ça marche aussi :
 
var chaine = "";
chaine  = '<a onmousedown="" href="http://monsite1.com" onclick="..." onmouseover="..." title="le titre 1">lien 1</a>;';
chaine += '<p>bla bla bla</p>';
chaine += '<a href="http://monsite2.com" title="le titre 2">lien 2</a>;';
chaine += 'bla bla <span> bla bla bla</span> bla';
chaine += '<a onmouseover="..."  href="http://monsite3.com" onclick="..." title="le titre 3">lien 3</a>;';
chaine += '</p>';
 
chaine.replace(/<a[^th>]*(href=".*?"|title=".*?"|)*[^th>]*(href=".*?"|title=".*?")*[^>]*>/gi, '<a $1 $2>');
 
// affiche :
// <a href="http://monsite1.com" title="le titre 1">lien 1</a>;<p>bla bla bla</p><a href="http://monsite2.com" title="le titre 2">lien 2</a>;bla bla <span> bla bla bla</span> bla<a href="http://monsite3.com" title="le titre 3">lien 3</a>;</p>

[Auteur]

que signifie

Code javascript :

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

1
2
 
.*?

dans ton expression régulière ?

.* signifie "tous les caractères", mais .*? là je ne vois pas

[SpaceFrog]

sinon en passant par le DOM pas besoin de regExp ...

Code :

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

for (attrib in maBaliseA)

[jumbay]

que signifie

Code javascript :

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

1
2
 
.*?

dans ton expression régulière ?

.* signifie "tous les caractères", mais .*? là je ne vois pas

Oui en fait ça ne sert à rien mais après tellement de test je ne savais plus ce que j'écrivais :s

Et aussi j'ai remarqué que ça ne marchait pas dans le cas ou il existe un "t" ou un "h" avant l'attribut href/title.

Ex :

Code :

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

1
2
 
<a ref="title" href="href" title="ok">lien</a>

Sinon je veux bien passer par DOM mais comment faire ?
Sachant que je ne veux garder que les attributs href et title sans perdre le parent et enfant du a.

[jumbay]

? ?

[Auteur]

La seule idée que je peux te proposer : parcourir ta chaine et réaliser des subtring pour supprimer les événements

[jumbay]

Salut,

J'ai enfin trouvée la solution .
Il suffisait d'utiliser une expression régulière combinée avec une autre fonction, ce qui donne :

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
19
20
 
text = text.replace(/<(\/?)a([^>]*)>/gi, cleanATags);
 
function cleanATags(str, p1, p2, offset, s) {
	var exp_href = /(href="[^"]+")/gi;
	var exp_Title = /(title="[^"]+")/gi;
	var lien = p2.match(exp_href);  //extraction du href
 	var titre = p2.match(exp_Title);  //extraction de title
 
	var text='';
	if(lien) {
		text += ' '+lien[0];
	}
	if(titre) {
		text += ' '+titre[0];
	}
	text = '<'+p1+'a'+text+'>';
 
	return text;
};

[Auteur]

là je suis scié Tu peux nous expliquer un peu les paramètres de cleanATags s'il te plait.

[jumbay]

Pour la fonction je me suis inspiré d'un script trouvé sur un document Mozilla.

Je débute tout juste en javascript donc je ne sais pas trop comment les paramètres de la fonction cleanATags sont initialisés vu que je l'appel sans lui donner de paramètres...
Sinon pour ceux qui ne veulent pas aller lire la doc :
- str : chaine trouvée qui correspond à l'expression régulière (ex: <a href=".." title="..." ...> ou </a>) ;
- p1 et p2 : les éléments sauvegardés de l'expression régulière ;
- offset : la position de la chaine trouvée (par rapport à la chaine dans laquelle on cherche) ;
- s : la chaine complète dans laquelle on cherche.

D'ailleurs si quelqu'un peut me dire comment ces paramètres sont initialisés ça serait sympa

[Auteur]

D'ailleurs si quelqu'un peut me dire comment ces paramètres sont initialisés ça serait sympa

cette fonction est sans doute un objet javascript (la syntaxe pour déclarer un objet et une fonction est la même) à qui on passe toujours le même nombre de paramètres

[jumbay]

J'ai bien lu le post que tu m'as donné mais je n'ai trop compris comment cette fonction/objet fait pour avoir un nombre de paramètre variable

[Shinuza]

Code :

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

1
2
3
4
5
6
7
		    function filterAttributes(element,attributes) {
				var i;
				for(i = 0; i < attributes.length;i++) {
					element.removeAttribute(attributes);
				}
				return element;
			}

Pourtant Spacefrog vous à donnez la solution, pourquoi ne pas l'écouter?

[Auteur]

Pourtant Spacefrog vous à donnez la solution, pourquoi ne pas l'écouter?

j'ai testé sans succès

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
function Test()
{
  alert(arguments.length);   
}
 
 
// appel d'une méthode
Test("a", "b");   // affiche 2
Test("a", "b", "c", "d");  // affiche 4

source : http://developer.mozilla.org/fr/docs...bjet_arguments


[edit]
Je viens à l'instant de comprendre le script de Shinuza
[/edit]

[jumbay]

Pourtant Spacefrog vous à donnez la solution, pourquoi ne pas l'écouter?

Ben dans un de mes posts j'ai demandé des détails sur comment il fallait faire mais n'ayant pas eut de réponse j'ai fais autrement.

Et j'avais pensé à faire comme tu as fait mais il me semblait que ça supprimait les enfants, parents... du a

Et puis ma façon marche très bien aussi avec ou sans DOM et dans mon cas je dois le faire sur une chaine et non sur des éléments présents dans la page.