Convertir des listes à la syntaxe particulière en HTML

Version imprimable

Bonjour.

J'ai créé une syntaxe pour générer des listes en HTML plus rapidement qu'en HTML.

La voici (les chiffres en fin de lignes sont juste là pour abréger l'écriture HTML dans le second code, ils ne servent à rien autrement) :
Code:

1 2 3 4 5 6 7 1- Item 1 - liste A ordonnée (1) -- Sous-item 1 - liste B non-ordonnée (2) -- Sous-item 2 - liste B non-ordonnée (3) 1--- Sous-sous-item 1 - liste C ordonnée (4) --- Sous-sous-item 2 - liste C ordonnée (5) - Item 2 - liste A ordonnée (6) - Item 3 - liste A ordonnée (7)
Ce qui est censé donner ceci en HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ol> <li>1 <ul> <li>2</li> <li>3 <ol> <li>4</li> <li>5</li> </ol> </li> </ul> </li> <li>6</li> <li>7</li> </ol>
Petite explication :

quand il y a un 1, on a une liste ordonnée (mais attention, on ne le met que pour le premier élément de cette liste puisqu'une liste ne peut être ordonnée et non-ordonnée à la fois);
le nombre de tirets indique le niveau d'imbrication de la liste.

J'ai cependant un problème lorsque j'ai une liste de niveau 3 et que le prochain élément appartient à la liste de niveau 1.
J'ai réalisé ce JSFiddle pour y voir plus clair : https://jsfiddle.net/fa2qn54q/
On y voit que l'élément nommé "2" se place deux fois, dont une fois au mauvais endroit.

Quelqu'un peut-il m'aider ?
Merci.

02/02/2018, 17h59
Beginner.

Bonjour,

Je n'ai pas encore regardé votre code mais ce que vous voulez faire me fait penser à Emmet (https://emmet.io/), vous connaissez ?
02/02/2018, 18h18
linwan

Bonjour.
Je connais un peu. Ce que je veux faire est un peu comme ce que propose le Markdown, Textile ou SkrivML.

je ne connais pas toute les subtilités de Babel donc voilà un hybride avec du JavaScript préhistorique qui fonctionne et je vous laisse faire l'optimisation

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
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
const
  decoupage = (lines) => {
    let i = 0, l, id, parent,
    decoupage = {
      0 : {
        "type" : "ol",
        "enfants" : [],
      },
    },
    parentParNiveau = {
      1 : 0,
    },
    niveauPrecedent = 0
 
 
    while (i < lines.length) {
      l = lines[i]
      id = i+1
 
      const
      type = l[0] === '-' ? 'ul' : 'ol',
      level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
      name = l.substring(level + 1).trim()
 
      if (level !== niveauPrecedent) {
        parent = parentParNiveau[level]
      }
 
      decoupage[parent]["enfants"].push(id)
 
      parentParNiveau[level + 1] = id;
 
      decoupage[id] = {
        "type" : type,
        "texte" : name,
        "enfants" : [],
      }
 
      niveauPrecedent = level
      i++
    }
 
 
    return decoupage
  } 
 
 
let lines = [
  '- A',
  '-- A.1',
  '1--- A.1.a',
  '---- A.1.a.1',
  '---- A.1.a.2',
  '--- A.1.b',
  '- B',
]
 
const res = decoupage(lines) //Objet qui contient le résultat, non formaté en HTML
 
 
// Le code suivant convertit l'objet "res" en HTML (ce code fonctionne bien)
const
  getHTML = id => {
 
    const e = res[id]
    let html = ""
 
    if (e["texte"]) {
      html += e["texte"]
    }
 
    if (e["enfants"]) {
      html += "<" + e["type"] + ">"
 
      for (let idEnfant of e["enfants"]) {
        html += "<li>"
        html += getHTML(idEnfant)
        html += "</li>"
      }
 
      html += "</" + e["type"] + ">"
 
    }
 
    return html
  },
  html = getHTML(0)
 
document.body.innerHTML = html

02/02/2018, 21h24
linwan

Merci Mathieu.

JSFiddle semble ne pas comprendre le javascript en version ES6, mais ça reste du javascript.
Merci beaucoup pour cette solution. J'ai juste un petit problème :

Comme le 1 dans votre exemple est sur la ligne A.1.a, cela veut dire que A.1.a est ordonné (avec A.1.b). Or, avec ce code, il se trouve que c'est la liste de niveau 4 qui est ordonnée alors qu'elle ne devrait pas.

Pouvez-vous y voir ?
02/02/2018, 21h43
mathieu
Citation:

Envoyé par linwan

Comme le 1 dans votre exemple est sur la ligne A.1.a, cela veut dire que A.1.a est ordonné (avec A.1.b). Or, avec ce code, il se trouve que c'est la liste de niveau 4 qui est ordonnée alors qu'elle ne devrait pas.

c'est un peu bizarre comme fonctionnement puisque ça voudrait dire que s'il y a un "1" c'est le type de l'élément parent qui ordonné
donc vous devriez avoir une de ces 2 configurations :
Code:

1 2 3 4 5 6 pour une liste ordonnée '1--- A.1.a', '1--- A.1.b', ou alors pour une liste non ordonnée '--- A.1.a', '--- A.1.b',
mais avec un "1" sur une seule de ces lignes ce n'est pas logique puisqu'une ligne dit que le parent est ordonné et l'autre dit le contraire.
02/02/2018, 22h03
linwan
Non, c'est plutôt logique puisqu'une liste ne peut pas être à la fois ordonnée et non-ordonnée. Le premier item prend la marque (1), mais il est inutile de la mettre aux autres.

Pour obtenir ce que l'on obtient dans l'exemple, il aurait fallut faire ça :
Code:

1 2 3 4 5 6 7 8 9 10 let lines = [ '- A', '-- A.1', '--- A.1.a', '1---- A.1.a.1', '---- A.1.a.2', '--- A.1.b', '- B', ]
03/02/2018, 00h34
psychadelic
oui, ta boucle est mal pensée.
la fermeture des sous-listes précédentes ne peut être déterminé que par la ligne suivante qui n'est pas encore lue (ou la fin).

avant d'écrire la ligne N, il faut connaître son écart d'indentation avec la ligne N-1

et donc de fermer les "</ul>" ou "</ol>" autant de fois qu'il faut pour se retrouver au même niveau d'indentation

ton code avec
Code:

1 2 while (i < lines.length) { next = lines[i+1] // --> devient hors table si i == lines.length-1
03/02/2018, 10h26
linwan

Merci Psychadelic.
J'ai du mal à comprendre ce qu'il faut faire.
Avec le dernier "else" de la boucle "while", j'arrête la boucle qui ajoutent des li à lis. Et ensuite, les lis sont retournés. SI on enlève l'élément de niveau 3, le programme fonctionne bien (il comprend donc qu'il est face à un niveau d'imbrication inférieur).
Peux-tu m'en dire un peu plus ?

Citation:
Envoyé par linwan
Ce qui est censé donner ceci en HTML :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <ol> <li>1 <ul> <li>2</li> <li>3 <ol> <li>4</li> <li>5</li> </ol> </li> </ul> </li> <li>6</li> <li>7</li> </ol>
J'ai regardé certains éditeurs et il ne mettent pas de ul ou ol dans un li, les enfants d'un ol/ul sont des li ou/et des ul/ol...

Pour le rendu de votre exemple j'ai cela :

http://www.image-heberg.fr/files/151...1879239615.png

Mais dans les éditeurs cela correspond à ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <ol> <li>1</li> <ul> <li>2</li> <li>3</li> <ol> <li>4</li> <li>5</li> </ol> </ul> <li>6</li> <li>7</li> </ol>
Je pense que c'est comme ça car ça facilite la gestion (notamment de la tabulation pour "descendre" ou "monter" )...

03/02/2018, 19h05
linwan

Beginner : La bonne façon de faire en HTML est de mettre les listes imbriquées dans les "li". Cela permet également aussi, avec un peu de CSS, de numéroter les "ol" de cette façon : 1.1.1, 1.1.2, ...

https://developer.mozilla.org/en-US/...amentals#Lists

Je ne parviens toujours pas à résoudre mon problème. Je vois bien qu'il faut faire quelque chose pour vérifier dans quel niveau on se trouve, mais je n'y arrive pas.

Ah bon c'est étrange, ce n'est pas ce que font les éditeurs...
Du coup j'ai fait un code (en partant en partie du votre) qui correspond à ce que font les éditeurs :

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
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
 
L = l => { //l = line
    const
        type = l[0] === '-' ? 'ul' : 'ol',
        level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
        content = l.substring(level + 1).trim()
    return {
        type,
        level,
        content
    };
};
 
 
 
function getList(lines) {
    let res = [],
        tabOlOrUl = [],
        currentLevel,
        precedentLevel,
        currentOlorUl;
 
    addOlorUl(res, lines[0]);
    currentOlorUl = tabOlOrUl[0] = res[0];
 
    for (let i = 1, l = lines.length; i < l; i++) {
 
        currentLevel = lines[i].level;
        precedentLevel = lines[i - 1].level;
 
        if (currentLevel === precedentLevel) { // si true on ajoute un li au parent courant      
 
            currentOlorUl = tabOlOrUl[currentLevel - 1];
            currentOlorUl.children.push({
                type: "li",
                content: lines[i].content,
                children: []
            });
 
        } else if (currentLevel > precedentLevel) { // si true on ajoute un ol/ul à l'enfant du parent courant
 
            currentOlorUl = tabOlOrUl[precedentLevel - 1].children;
            addOlorUl(currentOlorUl, lines[i]);
            tabOlOrUl.push(currentOlorUl[currentOlorUl.length - 1]);
 
        } else { // sinon on remonte au ol/ul correspondant au currentLevel...
 
            currentOlorUl = tabOlOrUl[currentLevel - 1];
            currentOlorUl.children.push({
                type: "li",
                content: lines[i].content,
                children: []
            });
        }
    }
    return res;
}
 
function addOlorUl(parent, elem) { // Ajoute un ol ou un ul...
    parent.push({
        type: elem.type,
        level: elem.level,
        children: [{
            type: "li",
            content: elem.content,
            children: []
        }]
    });
}
 
let lines = [
    '1- 1',
    '-- 1.1',
    '--- 1.1.1',
    '- 2'
].map(l => L(l));
console.log(lines);
console.log(getList(lines));
 
lines = [
    '1- 1',
    '-- 1.1',
    '--- 1.1.1',
    '--- 1.1.2',
    '--- 1.1.3',
    '- 2',
    '- 3'
 
].map(l => L(l));
console.log(lines);
console.log(getList(lines));

Il y a deux tests et ça fonctionne bien apparemment...

03/02/2018, 21h13
linwan

Merci pour ce code, mais j''étais déjà parvenu à placer des u/ol sous des li.
Je ne sais pas de quels éditeurs tu parles, mais Stackedit.io ou SkrivML insèrent bien des u/ol dans des li.
J'ai cherché dans le code de Stackedit, mais pas moyen de mettre la main sur le code qui génère les listes :roll:
03/02/2018, 22h11
Beginner.

Par exemple openOffice et bluegriffon... Mais je viens de voir CKEditor et effectivement il ne fait pas pareil...
03/02/2018, 23h35
linwan

Je viens de trouver.
Merci à tous ;)
04/02/2018, 10h02
Beginner.

C'était quoi le problème alors ?

J'ai repris mon ancien code où je glissais un u/ol sous une liste. Et avec la méthode array.pop(), j'injecte l'ul/ol dans le dernier li de mon tableau plutot que dans un nouvel élément de tableau.

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
const
	createUOL = ({type = 'ul', lis = []} = {}) => ({type, lis}),
	createLI = ({name = ''} = {}) => ({name}), //+ uol (0,1)
	L = l => { //l = line
		const
			type = l[0] === '-' ? 'ul' : 'ol',
			level = l.split(' ')[0].length - (type === 'ul' ? 0 : 1),
			name = htmlize(l.substring(level + 1).trim())
		return {type, level, name}
	},
	getUOL = lines => {
		const lis = getLIs(lines)
		return [
			createUOL({type: lines[0].type, lis: lis[0]}),
			lis[1]
		]
	},
	getLIs = lines => {
		let lis = [], li, i = 0, l1 = lines[0]
		while (i < lines.length) {
			let l = lines[i]
			const li = createLI({name: l.name})
			if (l.level > l1.level) {
				let uol = getUOL(lines.slice(i))
				let myLi = lis.pop()
				myLi.uol = uol[0]
				lis.push(myLi)
				i += uol[1]
			} else if (l.level === l1.level) {
				lis.push(li)
				i ++
			} else break
		}
		return [lis, i]
	}
 
let lines = [
	'1- elt1',
	'-- EL1',
	'-- EL2',
	'1--- ele1',
	'--- ele2',
	'- elt2',
	'- elt3',
	'-- EL1',
	'-- EL2',
	'1--- ele1',
	'--- ele2',
	'- elt4',
].map(l => L(l))
 
const res = getUOL(lines)[0] //Objet qui contient le résultat, non formaté en HTML
console.log(JSON.stringify(res))
 
// Le code suivant convertit l'objet "res" en HTML
const
	getHTML = uol => {
		const uol1 = document.createElement(uol.type)
		for (let li of uol.lis) {
			const
				li1 = document.createElement('li'),
				name = document.createTextNode(li.name)
			li1.appendChild(name)
			if (li.uol) li1.appendChild(getHTML(li.uol))
			uol1.appendChild(li1)
		}
		return uol1
	},
	html = getHTML(res).outerHTML
 
document.body.innerHTML = html

Ok merci je vais regarder votre code...

Entre temps j'étais en train d'essayer d'adapter mon code précédent afin qu'il corresponde à ce vous souhaitiez et j'obtiens cette fonction :

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
function getList(lines) {
    let res = {}, tabUol = [], currentLevel, precedentLevel , currentUol;
 
    res = {
        type: lines[0].type,
        lis: [{name: lines[0].name, uol: undefined}]        
    };
    currentUol = tabUol[0] = res; 
 
    for (let i = 1, l = lines.length; i < l; i++) {
 
        currentLevel = lines[i].level;
        precedentLevel = lines[i - 1].level;
 
        if (currentLevel === precedentLevel) { // si true on ajoute un li au uol courant 
            currentUol = tabUol[currentLevel - 1];
            addLiToLisOfUol(currentUol.lis, lines[i]);
 
        } else if (currentLevel > precedentLevel) { // si true on affecte* un uol au dernier li (du lis) du uol courant. *(ou plutôt on le défini)            
            currentUol = addUolToLi(currentUol.lis[currentUol.lis.length - 1], lines[i]);            
            tabUol.push(currentUol);
 
        } else { // sinon on remonte au uol correspondant au currentLevel...
            currentUol = tabUol[currentLevel - 1];
            addLiToLisOfUol(currentUol.lis, lines[i]);
        }
    }
    return res;
}
 
function addLiToLisOfUol(lisOfUol, elem) {
    lisOfUol.push({name: elem.name, uol: undefined });
}
function addUolToLi(li, elem) { 
    li.uol = {
        type: elem.type,
        lis: [{name: elem.name, uol: undefined}]       
    };
    return li.uol;
}

Voici un lien pour tester : http://jsbin.com/capavesozo/1/edit?js,output (il y a trois exemples (listes) de tests).

Est-ce que vous pouvez me dire si cela correspond bien à ce que vous vouliez ?
Merci.

04/02/2018, 11h46
linwan

C'est le bon résultat :)
C'est chouette d'arriver au même résultat avec deux codes différents. Merci pour ton implication.
Je réalise ceci pour une petite application aide-mémoire / liste de tâches qui est disponible ici en opensource : https://bitbucket.org/svenseitan/memolist
(je n'ai pas encore mis à jour les listes).
04/02/2018, 11h52
Beginner.

Oui c'est vrai, un code classique et un autre avec fonction récursive...Ce n'est pas simple les fonctions récursives, c'était un problème plus difficile qu'il ne parait...

Merci pour le lien je vais regarder ça...