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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| // --------------
// variables globales
var le_textarea = document.querySelector('#le-textarea');
var le_button = document.querySelector('#le-button');
// --------------
// categories : objet contenant les catégories, sous-catégories et sous-sous-catégories
var les_categories = [];
// chaque ligne est de la forme : idx:{ txt:"Sous-Sous-Catégorie 1.3.1", lvl:2, par:11 }
// idx : index de la ligne
// txt : le texte (nom de la catégorie)
// lvl : niveau de la catégorie (0:catégorie, 1:sous-catégorie ,2:sous-sous-catégorie)
// par : index de la catégorie parente ('' si pas de parent)
// --------------
// les <select>
var le_select_1 = document.querySelector('#select-lvl-0');
var le_select_2 = document.querySelector('#select-lvl-1');
var le_select_3 = document.querySelector('#select-lvl-2');
// --------------
// clic sur le bouton "Parser"
le_button.addEventListener('click',function(){
// --------
// on récupère le code HTML
var le_html = le_textarea.value.trim();
if( le_html == '' )
{
alert('Le textarea est vide');
return false;
}
// --------
// on vide les <select>
le_select_1.innerHTML = '';
le_select_2.innerHTML = '';
le_select_3.innerHTML = '';
// --------
// on parse le code HTML
var parser = new DOMParser();
var doc_html = parser.parseFromString(le_html, "text/html");
// --------
// on récupère les catégories, sous-catégories et sous-sous-catégories dans UN SEUL objet "les_categories"
// SPECIAL : on NE prend PAS les 2 menus "Connexion" et "Créer un compte" (avec la classe "customer-navlink")
var elts = doc_html.querySelectorAll('#accessibleNav > li:not(.customer-navlink)');
les_categories = get_categories_by_level( [], elts, 0, '' );
console.log( les_categories );
// --------
// on construit les options du 1er <select>
var le_select_categorie_lvl_0 = '';
le_select_categorie_lvl_0 = select_options_categorie_by_level_by_parent( les_categories, 0, '' );
// console.log( le_select_categorie_lvl_0 );
le_select_1.innerHTML = le_select_categorie_lvl_0; // on remplit le 1er <select>
});
// --------------
// fonction récursive de récupération des catégories
function get_categories_by_level( arr=[], elts, lvl=0, par='' )
{
ii = arr.length;
elts.forEach( function(elt){
// si on a des noeuds
if (elt.hasChildNodes())
{
// pour chaque noeud
elt.childNodes.forEach( function(node){
if (node.tagName && node.tagName.toLowerCase() == 'a') // lien
{
arr[ii] = {'txt':node.textContent.trim(),'lvl':lvl,'par':par};
ii = arr.length;
}
else if (node.tagName && node.tagName.toLowerCase() == 'ul') // sous-menu ?
{
var arr2 = get_categories_by_level( arr, node.childNodes, lvl+1, ii-1 ); // récursivité
// on regroupe les 2 :
arr = json_concat( arr, arr2 );
}
});
}
});
return arr;
}
// --------------
// fonction de fusion de 2 objets en un seul
function json_concat( o1, o2 )
{
for (var key in o2) {
o1[key] = o2[key];
}
return o1;
}
// --------------
// 1er <select> : on affiche les options dans le 2ème (sous-catégories)
le_select_1.addEventListener('change',function(elt){
// console.log( this.value );
if( this.value != '')
{
le_select_2.innerHTML = select_options_categorie_by_level_by_parent( les_categories, 1, this.value );
le_select_3.innerHTML = '';
} else {
le_select_2.innerHTML = '';
le_select_3.innerHTML = '';
}
});
// --------------
// 2ème <select> : on affiche les options dans le 3ème (sous-sous-catégories)
le_select_2.addEventListener('change',function(elt){
// console.log( this.value );
if( this.value != '')
{
le_select_3.innerHTML = select_options_categorie_by_level_by_parent( les_categories, 2, this.value );
} else {
le_select_3.innerHTML = '';
}
});
// --------------
// fonction de création des <option> par niveau et catégorie parente
function select_options_categorie_by_level_by_parent( arr=[], lvl=0, par='' )
{
var options = [];
var option = '<option value="">...</option>'; // option vide
options.push( option );
arr.forEach( function(elt,idx){
if( elt.lvl == lvl && elt.par == par )
{
// console.log( elt.txt,elt.lvl,elt.par,idx );
var option = '<option value="'+idx+'">'+elt.txt+'</option>';
options.push( option );
}
});
return options.join("\n");
}
// -------------- |
Répondre avec citation
Envoyé par jreaux62
"javascript parser code html"
Partager