Discussion :

[nicko_73]

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 :

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

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

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 :

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

<label>,label

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

Merci d'avance de votre aide.
Bien cordialement.

[nicko_73]

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

Code :

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

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

qui m'affiche ceci :

Code :

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

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

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

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

ca m'affiche :

Code :

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

<form>,form,

Donc pour le moment ca fonctionne.

[SpaceFrog]

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

Code :

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

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

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

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

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

1
2
3
 
	var expReg = new RegExp(/<([^\>])+>/ig);
	var matches = docHTML.match(expReg)

ensuite pour les test, j'ai un seul exemple :

Code :

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

1
2
 
	var exemple = matches[0];

qui ne prend que ceci :

Code :

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

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

ensuite, j'ai fait ceci :

Code :

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

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 :

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

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.

[nicko_73]

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 :

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

[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

[nicko_73]

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

Code :

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

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

Merci d'avance

[kimjoa]

j'ai modifier la 1er reg , pour inclure les zones de texte

Code :

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

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?

[nicko_73]

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.

[kimjoa]

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 :

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