Discussion :

[juju62]

Bonjour,

Je vous sollicite pour une question (un peu spéciale je l'accorde) que je me pose.

Nous travaillons avec un module de vues éclatées de véhicules et nous avons intégré ce module sur notre site internet avec le code html du type :

<script type="text/javascript" id="xxxx" src="xxxxxxxxxxx?appKey=abcdefgh"></script>

Voici une version du module (le même que celui intégré sur notre site) :

http://www.motorspeed.no/?partstream

Ce module présente certaines informations en anglais et nos clients nous contactent souvent par téléphone car ils ne trouvent pas leur pièce (à cause de l'anglais).

L'éditeur du programme n'est pas en mesure, pour le moment, de nous apporter cette traduction hors il n'existe pas d'autre éditeur qui fait un service comparable en français.

Ce que l'on souhaiterait, c'est pouvoir traduire par nous même les termes anglais et surtout ceux concernant les différentes parties du véhicules (termes situés après les icônes (Cf image ci-jointe).

Auriez-vous une idée de script (probablement en javascript) nous permettant de faire cette manipulation (str.replace ?) ?

En vous remerciant par avance.

[SylvainPV]

On peut toujours remplacer à la volée avec un string.replace mais ça me paraît peu recommandable: la traduction mot à mot a ses limites et sans connaître le code de ce module on risque des régressions. Idéalement il faudrait traduire à la source et non à l'arrivée. Mais bon, si vous n'avez pas le choix...

[juju62]

Je vous remercie pour votre réponse,

Ce que je pensais faire c'était définir dans un objet Array toutes mes traductions par "phrase" préalablement :

exemple : remplacer "00- Model Numbers _00T1523" par "00- Numéros de modèle_00T1523".

[SylvainPV]

Oui c'est ça, et un simple objet JavaScript est plus indiqué pour une map plutôt qu'une Array.

Attention aux patterns de traduction, il ne faudrait pas que "Brands" soit traduit en "Brets" ou "Motor" en "Motou". Essaie de faire correspondre la totalité des contenus texte plutôt que des fragments. Aussi, passe par textContent plutôt que innerHTML car il y a sûrement des event listeners / propriétés configurées par le module sur ces éléments DOM.

[juju62]

Oui c'est ça, et un simple objet JavaScript est plus indiqué pour une map plutôt qu'une Array.

Attention aux patterns de traduction, il ne faudrait pas que "Brands" soit traduit en "Brets" ou "Motor" en "Motou". Essaie de faire correspondre la totalité des contenus texte plutôt que des fragments. Aussi, passe par textContent plutôt que innerHTML car il y a sûrement des event listeners / propriétés configurées par le module sur ces éléments DOM.

Je reviens vers vous quelques jours plus tard... J'ai cherché mais je n'ai pas trouvé grand chose mis à part du JQuery avec :

Code :

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

$("a:contains('"+val+"')").html(array[val]);

Prenons la val = "la fraise" et array[val] = "ananas"

Problème, si les mots "la fraise" se trouvent dans les deux codes html suivants :

Code :

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

1
2
<a href="#">la fraise</a>
<a href="#">la fraise du jardin</a>

Tout cela devient :

Code :

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

1
2
<a href="#">ananas</a>
<a href="#">ananas</a>

Comment je peux faire pour dire que je veux non pas "ce qui contient les mots 'la fraise' " mais plutôt "ce qui contient exactement 'la fraise' " ?

Merci d'avance

[danielhagnoul]

Code :

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

1
2
3
4
5
6
7
8
9
var
    valeur = "la fraise",
    ObjTraductions = {
        "la fraise" : "ananas"
    };
 
$( "a:contains('" + valeur + "')" ).each( function( i, item ){
    $( item ).text( $( item ).text().replace( valeur, ObjTraductions[ valeur ] ) );
});

[SylvainPV]

Pour gagner en performances, on peut aussi faire le remplacement "en un seul coup" :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var html = document.body.innerHTML;
var translations = {
   "00- Model Numbers _00T1523" : "00- Numéros de modèle_00T1523",
   "autre label à traduire": "traduction"
};
for(var stringToTranslate in translations){
      html.replace(new RegExp(stringToTranslate, 'g'), translations[stringToTranslate]);
}
document.body.innerHTML = html;

Attention, le fait de réinitialiser le HTML de tout le body peut casser de précédentes initialisations ou recharger des éléments, il faut donc le faire le plus tôt possible.

[juju62]

Code :

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

1
2
3
4
5
6
7
8
9
var
    valeur = "la fraise",
    ObjTraductions = {
        "la fraise" : "ananas"
    };
 
$( "a:contains('" + valeur + "')" ).each( function( i, item ){
    $( item ).text( $( item ).text().replace( valeur, ObjTraductions[ valeur ] ) );
});

Merci daniel !

Votre code permettait de remplacer "la fraise" par "ananas" mais le problème c'est qu'il donnait pour :

Code :

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

1
2
<a href="#">la fraise</a>
<a href="#">la fraise du jardin</a>

Une fois le code appliqué :

Code :

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

1
2
<a href="#">ananas</a>
<a href="#">ananas du jardin</a>

Alors que je souhaitais que ce soit traduit uniquement si la phrase est identique. ex. :

Que

Code :

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

1
2
<a href="#">la fraise</a>
<a href="#">la fraise du jardin</a>

Une fois le code appliqué, devienne :

Code :

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

1
2
<a href="#">ananas</a>
<a href="#">la fraise du jardin</a>

Du coup j'ai modifié le code comme ceci :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function exec_traduction()
{	
 
	for (var val in array)
	{
 
		$( "a:contains('" + val + "')" ).each( function( i, item ){
			var txt_contains = $( item ).text().replace(/^\s+/g,'').replace(/\s+$/g,'');
			if (txt_contains == val)
			{$( item ).html("<ins class=\"jstree-icon\">&nbsp;</ins>"+array[val]);}
		});
 
	}
}

Et cela fonctionne Vous m'avez grandement aidé Merci.

[juju62]

Pour gagner en performances, on peut aussi faire le remplacement "en un seul coup" :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var html = document.body.innerHTML;
var translations = {
   "00- Model Numbers _00T1523" : "00- Numéros de modèle_00T1523",
   "autre label à traduire": "traduction"
};
for(var stringToTranslate in translations){
      html.replace(new RegExp(stringToTranslate, 'g'), translations[stringToTranslate]);
}
document.body.innerHTML = html;

Attention, le fait de réinitialiser le HTML de tout le body peut casser de précédentes initialisations ou recharger des éléments, il faut donc le faire le plus tôt possible.

Merci Sylvain,

J'avais testé cette méthode mais elle était trop lourde et plantait tout le module externe.

Ma "traduction" doit se faire au fur et à mesure de l'incrémentation des textes/menus déroulants sur la page (pour le moment je lance la fonction toutes les x secondes mais je vais essayer de trouver un "événement" pour exécuter ma fonction moins souvent).

Encore merci pour votre aide.