Transformation de pages html avec tableau en pages responsives

**patlabar** · 02/12/2021, 12h35

Bonjour,

Je suis à peine un peu plus que débutant en bash...
Je suis en train d'écrire un script pour transformer des pages html qui contiennent des tableaux afin de les rendre responsives via bootstrap.
La composition des tableaux varient au sein d'une même page et d'une page à l'autre.

Voici les étapes que j'ai repérées :
1 - Pour chaque ligne de tableau encadrée par les balises <tr> et </tr>, je dois compter le nombre de fois où la balise <td> est présente.

J'arrive à compter le nombre de fois ou un motif apparaît sans un fichier de la manière suivante :
grep -c "motif" nom_du_fichier

mais il faudrait que je puisse travailler dans mon fichier sur ce qui est entre les <tr> et </tr>

2 - Si entre les balises <tr> et </tr>, il y a une image, récupérer la valeur de width pour savoir la proportion que prend l'image par rapport à la page.
3 - A partir de ces infos, je vais faire des calculs : avoir une valeur pour la cellule qui contient l'image et une autre pour les autres cellules
et réinjecter mes résultats pour remplacer les <td> par des <div> avec des classes adaptées.
Pour réinjecter ces résultats, il faut aussi que je puisse sélectionner la ou les balises <td> qui sont suivies d'une image.

Voici le code avant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<tr> 
        <td> 
        	<img src="fichier_image.jpg" alt="" width="299" height="319"> 
        </td>
        <td>
        	<p>Texte</p>	
        </td>
        <td>
        	<p>Texte</p>	
        </td>
        <td>
        	<p>Texte</p>	
        </td>
 </tr>

et ce que je veux obtenir :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="row"> 
        <div class="col-$largeur_image> 
        	<img src="fichier_image.jpg" alt="" width="299" height="319"> 
        </div>
        <div class="col-$largeur_texte>
        	<p>Texte</p>	
        </div>
        <div class="col-$largeur_texte>
        	<p>Texte</p>	
        </div>
        <div class="col-$largeur_texte>
        	<p>Texte</p>	
        </div>
 </div>

Voici le script provisoire que j'ai écrit :

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
 
nom=fichier.html
 
# pour isoler une ligne comprise entre <tr> et </tr> et compter le nombre d'occurences <td> puis les affecter dans une variable :
nb_cellules=$(tr '\n' '^' <$nom | grep -o -P '(?<=<tr>).*(?=</tr>)' |tr '^' '\n' |  grep -c "<td>")
 
colonne_bootstrap=$((12/nb_cellules))
 
# pour connaître la largeur de l'image
long=$(tr '\n' '^' <fichier.html | grep -o -P '(?<=width=").*(?=")')
largeur_image="${long:0:3}"
 
echo $long
echo $largeur_image
 
# pour remplacer le <td avec la classe bootstrap adaptée :
tr '\n' '^'<fichier.html | tr -d [:blank:] | sed -i "s/<td>^<img/<div class=\"col-'$largeur_image'\"\ /g" fichier.html | tr '^' '\n'
# cette commande fonctionne quand je l'utilise seule dans le terminal mais pas dans mon script, sans doute un pb de sortie/entrée des processus...
 
sed -i "s/<td/\<div class="col-$colonne_bootstrap"/g;s/<\/td>/<\/div>/;s/<tr>/<div class=\"row\">/;s/<\/tr>/<\/div>/" fichier.html

Il y a sans doute des erreurs et d'autres manières plus élégantes et économique d'écrire tout cela...
Merci pour vos retours.
Patrick

**N_BaH** · 02/12/2021, 15h46

bonjour,

le HTML étant un langage balisé sans aucune obligation de format (les balises peuvent être n'importe où, les lignes vierges ne sont pas significatives, et tout le fichier peut être sur une seule ligne), le shell n'est pas un langage adapté à son traitement.
il est préférable d'utiliser xmllint.

**Dens1** · 02/12/2021, 17h09

Bonjour,
oui mais je crois l'objectif est de modifier vite fait un fichier html en le réécrivant (rien à voir avec le html ou le php ou quoique ce soit d'autre ....).
Le problème me semble juste de réécrire massivement un ou plusieurs fichiers avec des valeurs modifiées, et remplacer les tableaux par des div.

Si c'est le cas, à vue de nez sed est ton ami. Mais de toute façon il faut un script avec des boucles si plusieurs fichiers.
Si tu découvres Sed, ça va prendre un peu de temps. AMHA

Il est facile de remplacer tous les <tr> par <div> et les </tr> par </div>, etc ...
il faudrait grep toues les <img> et récupérer avec sed les valeurs de width et height, ...
Quoique ... Vu que <img ne varie pas, pourquoi récupérer les valeurs ? width je vois, c'est $largeur_image, mais $largeur-texte c'est quoi ?

PS: et responsives ? c'est à dire ?

**N_BaH** · 02/12/2021, 17h27

modifier vite fait un fichier html [...]rien à voir avec le html

le shell n'est pas adapté au traitement d'un langage balisé (html, xml, json...). J'ai expliqué pourquoi, je ne sais pas comment le dire autrement.
le script shell qui va fonctionner pour un fichier html (ou autre balisage) peut ne pas fonctionner pour un autre; c'est dommage pour du traitement par lot* !
alors que xmllint (ou python, ou perl, avec la bibliothèque ad'hoc (si nécessaire)) n'aura pas de souci.

PS: et responsives ? c'est à dire ?

+1

--
* il est bien question de "transformer des pages" dans le premier message.

**Dens1** · 02/12/2021, 18h01

Envoyé par N_BaH

alors que xmllint (ou python, ou perl, avec la bibliothèque ad'hoc (si nécessaire)) n'aura pas de souci.

j'ignore tout ça, aucune notion. Si c'est plus simple, un jour j'explorerai si j'ai besoin (c'est tellement vaste).

**patlabar** · 02/12/2021, 18h20

Envoyé par Dens1

Bonjour,
oui mais je crois l'objectif est de modifier vite fait un fichier html en le réécrivant (rien à voir avec le html ou le php ou quoique ce soit d'autre ....).
Le problème me semble juste de réécrire massivement un ou plusieurs fichiers avec des valeurs modifiées, et remplacer les tableaux par des div.

C'est bien ça.

Si c'est le cas, à vue de nez sed est ton ami. Mais de toute façon il faut un script avec des boucles si plusieurs fichiers.
Si tu découvres Sed, ça va prendre un peu de temps. AMHA

Je commence à me familiariser au sed.

Il est facile de remplacer tous les <tr> par <div> et les </tr> par </div>, etc ...
il faudrait grep toues les <img> et récupérer avec sed les valeurs de width et height, ...
Quoique ... Vu que <img ne varie pas, pourquoi récupérer les valeurs ? width je vois, c'est $largeur_image, mais $largeur-texte c'est quoi ?

Sur les différentes pages que j'ai à traité (12 000 environ), je vais avoir un nombre varié d'images par page avec des width différentes et un nombre de colonnes différent.

PS: et responsives ? c'est à dire ?

C'est à dire que la mise en page puisse s'adapter aux différentes tailles d'écran. D'où l'utilisation de bootstrap.

**patlabar** · 02/12/2021, 18h21

Envoyé par N_BaH

bonjour,

le HTML étant un langage balisé sans aucune obligation de format (les balises peuvent être n'importe où, les lignes vierges ne sont pas significatives, et tout le fichier peut être sur une seule ligne), le shell n'est pas un langage adapté à son traitement.
il est préférable d'utiliser xmllint.

Merci pour ce retour.

Je vais creuser xmllint mais cela m'a l'air complexe.

**chrtophe** · 02/12/2021, 18h22

Je rejoint N_BaH.

Tu pourras y arriver mais en galérant, alors que tu as des outils adaptés à cela.

**patlabar** · 02/12/2021, 18h29

Envoyé par chrtophe

Je rejoint N_BaH.

Tu pourras y arriver mais en galérant, alors que tu as des outils adaptés à cela.

Des outils ? Est-ce qu'il y en a d'autres que xmllint ?

**Dens1** · 02/12/2021, 18h42

je ne doute pas qu'il y a des outils mieux appropriés. Je ne les connais pas mais tu as eu les réponses.
perso je ferais avec bash (et donc, sed, awk, au besoin) parce que je connais mieux cela que l'inconnu

ps: par contre il faudrait un fichier en exemple, pour "tuer le temps".

**patlabar** · 02/12/2021, 19h00

Envoyé par Dens1

je ne doute pas qu'il y a des outils mieux appropriés. Je ne les connais pas mais tu as eu les réponses.
perso je ferais avec bash (et donc, sed, awk, au besoin) parce que je connais mieux cela que l'inconnu

ps: par contre il faudrait un fichier en exemple, pour "tuer le temps".

Merci pour un accompagnement avec bash (c'est ce sur quoi j'essaye de me former).
J'avais mis dans mon message initial le code à transformer et le résultat voulu.
Est-ce ce suffisant ou bien faut-il un fichier en plus en exemple ?

**Dens1** · 02/12/2021, 19h16

un fichier, du concret (c'est peut-être délicat parce que tu rechignerais à montrer un fichier, mais il faut un fichier qui reproduit tous les cas possibles dans un dit fichier à traiter).
ps: sans y passer mon temps, je peux aider sans doute avec sed, vu que je suis dessus en ce moment. Le traitement d'un fichier est déjà probablement en plusieurs étapes, puis les fichiers suivants ...

**Dens1** · 02/12/2021, 19h33

par cas possibles, j'entendais des formes différentes de ton exemple (qui présente juste des <tr> et un <img>), sans égards aux espaces, aux tabulations , ou autres. Juste les syntaxes html divergentes des données que tu dois filtrer.
edit encore: tout dépend ce que tu dois filtrer, récupérer, modifier, vers un fichier "définitif"

**balkany** · 02/12/2021, 19h37

Quitte à investir un peu de temps dans quelque chose, tu ferais mieux de faire ça en python à mon avis.
C'est largement utilisé pour faire ce genre de choses, tu trouveras donc aussi bien les outils que l'aide nécessaires.
Car xmllint ou équivalent, ça va bien pour extraire quelques petits trucs simples, mais c'est vite limité, et c'est lent

Sachant qu'avec sed c'est possible (et c'est rapide), mais il faut bien reconnaitre que ça n'est pas fait pour.

**Dens1** · 02/12/2021, 22h30

Déjà sed te permet de sélectionner tout se qui ce trouve entre <tr> et </tr> (mais je retrouve pas dans mes codes et de mémoire là, je sais plus), | tout ça envoyé dans un pipe qui boucle sur les <img> et qui traite tes valeurs, ça me paraît simple. Le tout c'est de se renseigner sur le comment.
en tout cas, tu tâtonnes et perseveres. Un peu de lecture ?
http://sed.sourceforge.net/sed1line_fr.html
https://linuxhint.com/50_sed_command_examples/

**N_BaH** · 02/12/2021, 22h37

sed te permet de sélectionner tout se qui ce trouve entre <tr> et </tr>

à condition qu'ils ne soient pas sur la même ligne.

**papajoker** · 03/12/2021, 01h18

Bonjour,

tout a fait, un balisage est souvant sur plusieurs lignes (pour les 'tr' en particulier)
Et on peut trouver des tableaux dans des tableaux

Il faudrait avant modification , dans un premier temps vérifier avec un outil, si tous les fichiers sont valides car souvant l'html n'est pas strict (pas obligation d'un /tr par exemple)

Mais je ne vois pas comment tu pourrais remplacer un TD par un <div class="col-x'>, ici c'est une logique responsive impossible à déduire donc l'intéret de la convertion auto me semble très douteuse - ou, au plus simple elle est liée au nombre de colonnes dans le tableau (pas forcément le tr) / 12 (mais ici on fait une croix sur le passage au responsive ! ce qui est le but non ?)

si se sont 12 000 fiches produit pratiquement identique, il serait alors plus simple et propre d'extraire les données et de les injecter dans un modèle ?

**patlabar** · 03/12/2021, 11h00

Envoyé par Dens1

un fichier, du concret (c'est peut-être délicat parce que tu rechignerais à montrer un fichier, mais il faut un fichier qui reproduit tous les cas possibles dans un dit fichier à traiter).
ps: sans y passer mon temps, je peux aider sans doute avec sed, vu que je suis dessus en ce moment. Le traitement d'un fichier est déjà probablement en plusieurs étapes, puis les fichiers suivants ...

Voici un fichier avec différents cas de figures en terme de mise en page.

**patlabar** · 03/12/2021, 11h16

Envoyé par papajoker

Bonjour,

tout a fait, un balisage est souvant sur plusieurs lignes (pour les 'tr' en particulier)
Et on peut trouver des tableaux dans des tableaux

[
Il faudrait avant modification , dans un premier temps vérifier avec un outil, si tous les fichiers sont valides car souvant l'html n'est pas strict (pas obligation d'un /tr par exemple)

Est-ce que vous avez des exemples d'outils ?

Mais je ne vois pas comment tu pourrais remplacer un TD par un <div class="col-x'>, ici c'est une logique responsive impossible à déduire donc l'intéret de la convertion auto me semble très douteuse - ou, au plus simple elle est liée au nombre de colonnes dans le tableau (pas forcément le tr) / 12 (mais ici on fait une croix sur le passage au responsive ! ce qui est le but non ?)

Dans ma logique, il s'agit de travailler entre les balises <tr> et </tr>
Là, compter le nombre de balises <td> pour connaître le nombre de colonnes, et de compter le nombre d'images et récupérer leur largeur.
Ensuite, comme bootstrap considère la largeur d'une page comme faisant 12 colonnes, il s'agit de réaffecter les infos collectées dans "div class="col-x".

Un exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<tr> 
        <td> 
        	<img src="fichier_image.jpg" alt="" width="299" height="319"> 
        </td>
        <td>
        	<p>Texte</p>	
        </td>
        <td>
        	<p>Texte</p>	
        </td>
        <td>
        	<p>Texte</p>	
        </td>
 </tr>

Là, il y a 4 balises <td> et une image.
La <td> contenant une image serait remplacée par <div class="col-4">
[INDENT]Là, je prends ma largeur d'image divisée par la largeur du body (tout le temps 860px) et le multiplie par 12 pour savoir combien de colonnes l'image va prendre.
ici on aura 299/860X12=4
Pour les td, on aurait (12-4)/3=2,6667
Les 3 <td> contenant du texte seraient remplacées par <div class="col-2">

si se sont 12 000 fiches produit pratiquement identique, il serait alors plus simple et propre d'extraire les données et de les injecter dans un modèle ?

D'un fichier à l'autre, il y a des différences sur le nombre de colonne, leur largeur, les largeurs d'images... et des fichiers avec parfois une succession de tableau.
Je ne sais pas si on peut du coup les injecter dans des modèles.