Expression r�guli�res en javascript

Version imprimable

Bonjour � tous,

suite � une discution sur ce post

je souhaite d�cortiquer une chaine de caract�re qui est du script code HTML afin d'en faire un tableau (ou object) de tags et l'attribues afin des les remettre en forme proprement via les fonctions de JS. Je me suis donc cr�er un code test que voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 var docHTML = '<form id="form1" name="form1" method="post" action="http://url/index.php">' + '<div class="bloc" id="bloc-name">' + '<label>name' + '<input type="text" name="name" id="name" />' + '</label>' + '</div>' + '<div class="bloc" id="bloc-pass">' + '<label>password' + '<input type="text" name="pass" id="pass" />' + '</label>' + '</div>' + '<div class="bloc" id="bloc-send">' + '<input id="send" name="submit" type="submit" value="send" />' + '</div>' + '</form>';
Pour commencer, j'ai beau lire les tutoriels sur les expressions r�guli�res, c'est une chose qui m'est vraiment pas facile � assimiler et c'est pour �a que je viens vous demander de l'aide. Et je s�che d�s le d�but. D'ailleurs s'il existe une fonction qui fait d�j� ce que je cherche je suis preneur ;)

J'ai donc commenc� par cela :
Code:

1 2 3 4 5 6 7 window.onload = function() { var expReg = new RegExp(/<(\w+)>/ig); var matches = expReg.exec(docHTML); alert(matches) }
Mais l� �a commence d�j� mal il me retourne le premier label, voici le message alert :

Code:

<label>,label

avez-vous une id�e pour m'aider a commencer ?

Merci d'avance de votre aide.
Bien cordialement.

04/11/2009, 09h26
nicko_73

Bon quelques minutes plus tard am�lioration de l'expression. Je les mets se sera peut �tre utile � d'autres.

Code:

/<(\w+)([\w ="\/:\.]+)?>/ig

qui m'affiche ceci :

Code:

<form id="form1" name="form1" method="post" action="http://url/index.php">,form, id="form1" name="form1" method="post" action="http://url/index.php"

et si je supprime

Code:

id="form1" name="form1" method="post" action="http://url/index.php"

ca m'affiche :

Code:

<form>,form,

Donc pour le moment ca fonctionne.

pour matcher ... �a passe mieux avec match ...

Code:

1
2
3
4
5
6
7
var docHTML = '<form id="form1" name="form1" method="post" action="http://url/index.php">'+'<div class="bloc" id="bloc-name">'+'<label>name' +'<input type="text" name="name" id="name" />' +'</label>' +'</div>' +  '<div class="bloc" id="bloc-pass">' +    '<label>password' +      '<input type="text" name="pass" id="pass" />' +    '</label>' +  '</div>' +  '<div class="bloc" id="bloc-send">' +    '<input id="send" name="submit" type="submit" value="send" />' +  '</div>' +'</form>';
 
window.onload = function() {
        var expReg = /<([^\>])+>/ig;
		 matches = docHTML.match(expReg)
		 alert(matches)
		}

04/11/2009, 09h39
nicko_73

Merci pour cette information, �a m'enl�ve une tr�s grosse �pine du pied ta solution, c'est d�j� en tableau, il n'y a plus qu'a d�cortiquer chaque balises.

Je vais voir �a, encore merci.
04/11/2009, 10h20
nicko_73
Gr�ce � ta solution, je pense avoir fait une bonne partie. Mais avant de faire les boucles qui mettrons en forme dans un objet la structure, je voulais avoir un avis ext�rieur afin de voir si je n'ai rien oubli�.

j'ai donc commenc� par reprendre la solution de SpaceFrog :
Code:

1 2 3 var expReg = new RegExp(/<([^\>])+>/ig); var matches = docHTML.match(expReg)
ensuite pour les test, j'ai un seul exemple :
Code:

1 2 var exemple = matches[0];
qui ne prend que ceci :
Code:

1 2 <form id="form1" name="form1" method="post" action="http://url/index.php">
ensuite, j'ai fait ceci :
Code:

1 2 3 4 5 var newExpReg1 = new RegExp(/<(\w+)(.*)>/ig) exemples = newExpReg1.exec(exemple); test = exemples[2].trim().split(' ');
trim() est une fonction �quivalent au trim() en php. (\w+) me permet de r�cup�rer le nom de la balise et (.*), je reste pour prendre les attribues par le biais de "exemples[2]".

enfin, je fait le code suivant :
Code:

1 2 3 var newExpReg2 = new RegExp(/(\w+)="(\w+)"/ig); tests = newExpReg2.exec(test);
Qui me permet de r�cup�rer le nom de l'attribue puis �a valeur. Pour ma part �a � l'air de fonctionner, mais comme je ne suis pas un expert des expressions r�guli�res, il y a des choses qui peuvent m'�chapp�es. Donc je vous demande votre avis.

voila j'ai terminer la boucle qui � l'air de fonctionner, elle est actuellement en d�bug, il reste plus qu'a cr�er l'objet. Je vous laisse jeter un �il afin de me dire le code vous parait correcte :

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
var docHTML = '<form id="form1" name="form1" method="post" action="http://url/index.php">' +
  '<div class="bloc" id="bloc-name">' +
    '<label>name' +
      '<input type="text" name="name" id="name" />' +
    '</label>' +
  '</div>' +
  '<div class="bloc" id="bloc-pass">' +
    '<label>password' +
      '<input type="text" name="pass" id="pass" />' +
    '</label>' +
  '</div>' +
  '<div class="bloc" id="bloc-send">' +
    '<input id="send" name="submit" type="submit" value="send" />' +
  '</div>' +
'</form>';
 
String.prototype.trim = function() {
	return this.replace( /^\s+|\s+$/g, '' );
}
 
window.onload = function() {
	var expReg = new RegExp(/<([^\>])+>/ig);
	var expReg1 = new RegExp(/<(\w+)(.*)>/i);
	var expReg2 = new RegExp(/^(\w+)="(.*)"$/i);
 
	var matches = docHTML.match(expReg)
	var nMatches = matches.length;
 
	for(var i = 0; i<nMatches; i++) {
		var element = matches[i];
		var tagAttr = expReg1.exec(element);
 
		if(tagAttr !== null) {
			console.log(tagAttr[1]);
			var arrayAttr = tagAttr[2].trim().split(' ');
			var nArrayAttr = arrayAttr.length;
 
			for(var o = 0; o<nArrayAttr; o++) {
				var attr = arrayAttr[o].trim();
				var attribues = expReg2.exec(attr);
 
				if(attribues !== null) {
					console.log(attribues);
				}
 
			}
		}
 
	}
}

04/11/2009, 14h10
nicko_73

Mon code pr�c�dent n'est pas encore bon puisque je ne prends pas en compte les textes entre les balises.

J'ai encore du boulot
04/11/2009, 18h53
nicko_73

Est ce que c'est possible ...

Je souhaitais savoir s'il etait possible de faire quelque chose comme ceci :

Code:

docHTML = docHTML.replace('/<\/' + tags[i] + '>/', '');

Merci d'avance
04/11/2009, 19h14
kimjoa
j'ai modifier la 1er reg , pour inclure les zones de texte
Code:

1 2 var expReg = new RegExp(/<(([^\>])+(>|\>))|([^><]*)/ig);
sinon j'ai compris que tu voulais faire un convertisseur HTML DOM...
Je vois pas l'int�r�t pourquoi ne pas utiliser celui du browser?
04/11/2009, 19h26
nicko_73

Citation:

Envoy� par kimjoa

Je vois pas l'int�r�t pourquoi ne pas utiliser celui du browser?

Tu m'en dire un peu plus, s'il te plais, j'ai pas compris.

Merci pour ta reg je vais la regarder de plus pr�s. ;)

tu pourrais tr�s bien cr�er un �l�ment (sans l'ins�rer) juste pour convertir une chaine en ensemble de n�ud.
Le navigateur int�gre son propre convertisseur autant l'utiliser, c'est la technique que j'ai utilis� ici
http://www.developpez.net/forums/d83...via-innerhtml/

pour faire simple

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
 
   (function(){
       var privateElement = document.createElement('div');
       this.parseHTML = function(string){
           privateElement.innerHTML = string;
           var toReturn = [];    
           while (privateElement.childNodes[0]){
               toReturn.push(privateElement.removeChild(privateElement.childNodes[0]));
           }
           return  toReturn;  
       }
   })();
   var docHTML = '<div class="bloc" id="bloc-name">' +
    'dutexte'+
    '<label>name' +
      '<input type="text" name="name" id="name" />' +
    '</label>' +
  '</div>' +
  '<div class="bloc" id="bloc-pass">' +
    '<label>password' +
      '<input type="text" name="pass" id="pass" />' +
    '</label>' +
  '</div>' +
  '<div class="bloc" id="bloc-send">' +
    '<input id="send" name="submit" type="submit" value="send" />' +
  '</div>';
 
   alert(parseHTML(docHTML))