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