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