Bonjour à toutes & tous !

J'étais déjà passé sur le forum pour d'anciens problèmes sur mon projet JS qui échange le genre des mots (grande -> grand, et inversement) dans tout les textes.

Il s'agit d'une extension propre à Google Chrome à la base Américaine, dont je dois faire la traduction FR dans le cadre de mon stage. Je suis donc stagiaire, et avec peu de compétences en JS.
A savoir que je dois rendre l'extension accessible au public avant le 3 avril dans le cadre d'une exposition publique sur le thème du genre.


Mon premier problème, comme le dit le titre, est que j'aimerai que les mots échangés soient affichés en gras pour qu'ils soient reconnaissables dans le texte. "complete" correspond au nom de la variable JSON où se trouvent mes mots.
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
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
//Variables
var map = {};
var maps = [ complete ];
//Remplissage du tableau des valeurs
for (var i = 0; i < maps.length; i++) {
  for (attr in maps[i]) {
  map[attr] = maps[i][attr];
  }
}
 
//Concaténation des chaines
var concatString = function(obj) {
  var parts = [];
  for (key in obj) {
   parts.push(key);
  }
  return parts.join('|');
};
 
var regex = '\\b(' + concatString(complete) + ')\\b';
 
var searchFor = new RegExp(regex, 'ig');
 
//Fonction pour mettre un mot en majuscules
function capitalize(word) {
  var first = word.charAt(0);
  var rest = word.slice(1);
 
  return first.toUpperCase() + rest.toLowerCase();
}
 
//Fonction qui remplace un mot par un autre
function matchCase(old_word, replacement) {
  if (replacement.toLowerCase() == old_word.toLowerCase()) return old_word;
 
  var first = old_word.charAt(0);
  var second = old_word.charAt(1);
 
  if (/[a-z]/.test(first)) return replacement.toLowerCase();
  if (/[A-Z]/.test(second)) return replacement.toUpperCase();
 
  return capitalize(replacement); 
}
 
//Fonction qui recherche un mot dans notre tableau de mots
function findMatch(word) {
  return map[word];
}
 
//Fonction qui remplace un mot par un autre en utilisant la fonction matchCase
function swapWord(word) {
  return matchCase(word, word.toLowerCase().replace(searchFor, findMatch));
}
 
//Fonction qui translate les mots masculins/féminin
function genderswap(text) {
  return text
   .replace(/\b([a-z][\w\']+)\b/gi, swapWord);
}
 
// Fonction de recherche des mots pour les traduire (= genderswap();)
function jailbreak(node){
  var treeWalker = document.createTreeWalker(
     node,
     NodeFilter.SHOW_TEXT,
     null,
     false
  );
  while(treeWalker.nextNode()) {
   var current = treeWalker.currentNode;
   current.textContent = genderswap(current.textContent);
  }
}
 
// Fonction pour le fonctionnement du bouton d'activation de l'extension
chrome.runtime.sendMessage({name: "isPaused?"}, function(response) {
  if (response.value != 'true') {
   jailbreak(document.body);
 
   document.body.addEventListener('DOMNodeInserted', function(event) {
      jailbreak(event.target);
   });
  }
});
les mots changés sont pris dans la fonction ligne 47. J'ai beau avoir tenté de remplacer
Code : Sélectionner tout - Visualiser dans une fenêtre à part
return map[word];
par
Code : Sélectionner tout - Visualiser dans une fenêtre à part
return '<strong>' + map[word] + '</strong>';
Code : Sélectionner tout - Visualiser dans une fenêtre à part
return map[word].bold();
, ça ne fonctionne pas...
En fait, lors de l'affichage, il récupère bien les balises (le .bold() ajoutant des balises <b></b>) mais les considère comme étant de simples strings, et je finis donc par avoir un texte rempli de <strong></strong> un peu partout autour des mots qui ont été modifiés.

Nom : Sans titre2.png Affichages : 3602 Taille : 60,7 Ko

Dans ce screen, on peut voir que les mots ont correctement été transformés, mais les balises sont écrites en dur plutot que de rendre mon texte gras.
(Oui, certains mots peuvent ne pas être traduits et donc certaines phrase mal écrites car je n'ai pas fini de rentrer tout les mots dans ma variable JSON)

Je voudrais donc que ces balises soient bien prises en compte par le html, et non pas utilisées en tant que simple texte.



==================================================================================

2ème problème :
Ma variable json est dans ce format la :
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
var complete = {
	//Last Update : Line = 864
	//Total Words : 17.122 Words
  // -A-
  'abéché': 'abéchée', 'abéchée': 'abéché', 'abéchés': 'abéchées', 'abéchées': 'abéchés',
  'abaissé': 'abaissée', 'abaissée': 'abaissé', 'abaissés': 'abaissées', 'abaissées': 'abaissés',
  'abalourdi': 'abalourdie', 'abalourdie': 'abalourdi','abalourdis': 'abalourdies', 'abalourdies': 'abalourdis',
  'abandonné': 'abandonnée', 'abandonnée': 'abandonné', 'abandonnés': 'abandonnées', 'abandonnées': 'abandonnés',
  'abasourdi': 'abasourdie', 'abasourdie': 'abasourdi','abasourdis': 'abasourdies', 'abasourdies': 'abasourdis',
  'abasourdissant': 'abasourdissante', 'abasourdissante': 'abasourdissant', 'abasourdissants': 'abasourdissantes', 'abasourdissantes': 'abasourdissants',
  'abattu': 'abattue', 'abattue': 'abattu','abattus': 'abattues', 'abattues': 'abattus',
  'abat-carré': 'abat-carrée', 'abat-carrés': 'abat-carrées',
  'abbatial': 'abbatiale', 'abbatiale': 'abbatial', 'abbatiaux': 'abbatiales', 'abbatiales': 'abbatiaux',
  'abbé': 'abbesse', 'abbesse': 'abbé', 'abbés': 'abbesses', 'abbesses': 'abbés',
  'abcédé': 'abcédée', 'abcédée': 'abcédé', 'abcédés': 'abcédées', 'abcédées': 'abcédés',
  'abdominal': 'abdominale', 'abdominale': 'abdominal',
  'aberrant': 'aberrante', 'aberrante': 'aberrant', 'aberrants': 'aberrantes', 'aberrantes': 'aberrants',
  'aberré': 'aberrée', 'aberrée': 'aberré', 'aberrés': 'aberrées', 'aberrées': 'aberrés',
  'abêtissant': 'abêtissante', 'abêtissante': 'abêtissant', 'abêtissants': 'abêtissantes', 'abêtissantes': 'abêtissants',
l'échange des mots fonctionne parfaitement bien... Ou presque !
En gros, toutes les données JSON dans ce format sont bien échangées :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
  'accommodant': 'accommodante', 'accommodante': 'accommodant', 'accommodants': 'accommodantes', 'accommodantes': 'accommodants',
  'accompagnateur': 'accompagnatrice', 'accompagnatrice': 'accompagnateur', 'accompagnateurs': 'accompagnatrices', 'accompagnatrices': 'accompagnateurs',
  'accompli': 'accomplie', 'accomplie': 'accompli','accomplis': 'accomplies', 'accomplies': 'accomplis',
Ensuite, ça se corse un peu, avec des accents, mais ça fonctionne toujours :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
  'dieu': 'déesse', 'dieux': 'déesses',

Et la arrive mon problème, que je suis incapable de comprendre :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
 
  'déesse': 'dieu', 'déesses': 'dieux',
  'arrivé': 'arrivée',
//etc....

En gros, tout les échanges de mots se font correctement dans ces formats la :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
  'sansAccents': 'sansAccents',
  'sansAccents': 'avecAccents',

Mais une fois arrivé sur ce dernier format, les échanges ne se font plus, alors que cela concerne au moins 80% de mes mots à échanger...
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
 
  'avecAccents': 'sansAccents',
  'avecAccents': 'avecAccents',


Si quelqu'un à la moindre solution pour l'un de mes 2 problèmes, je vous en serait grandement reconnaissant, étant donné que le temps m'est imparti...