[DOM] RegEx - Suppression d'attributs dans une balise

Version imprimable

07/10/2007, 14h32
jumbay

[DOM] RegEx - Suppression d'attributs dans une balise

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

Merci d'avance.

JumBay

bonjour,

voici une solution :

Code:

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

07/10/2007, 19h23
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:

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

on gagne 3 charactères :P

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

Code:

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

devient :

Code:

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

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

match retourne un tableau :

Code:

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

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

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

Code:

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>

08/10/2007, 08h52
Auteur
que signifie
Code:

1 2 .*?
dans ton expression régulière ? :koi:

.* signifie "tous les caractères", mais .*? là je ne vois pas :oops:
08/10/2007, 09h04
SpaceFrog

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

Code:

for (attrib in maBaliseA)
08/10/2007, 14h28
jumbay
Citation:
Envoyé par Auteur

que signifie

Code:

1 2 .*?

dans ton expression régulière ? :koi:

.* signifie "tous les caractères", mais .*? là je ne vois pas :oops:
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:

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.
10/10/2007, 12h38
jumbay

? ?
11/10/2007, 22h25
Auteur

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

Salut,

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

Code:

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

13/10/2007, 17h54
Auteur

là je suis scié 8O :aie: Tu peux nous expliquer un peu les paramètres de cleanATags s'il te plait.
:merci:
13/10/2007, 19h49
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 ;)
13/10/2007, 21h44
Auteur

Citation:

Envoyé par jumbay

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 :?
15/10/2007, 00h15
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

Code:

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?

15/10/2007, 13h31
Auteur
Citation:

Envoyé par Shinuza

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

j'ai testé sans succès :aie:
Code:

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]
:boulet: Je viens à l'instant de comprendre le script de Shinuza :oops:
[/edit]
17/10/2007, 20h40
jumbay

Citation:

Envoyé par Shinuza

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.