JSON : Ajout de balises HTML pour mise en gras / Prise en compte des accents par le JSON

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:

---

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:

---

return map[word];

---

par

Code:

---

return '<strong>' + map[word] + '</strong>';

---

Code:

---

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.

Pièce jointe 172759

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:

---

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:

---

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:

---

1 2	'dieu': 'déesse', 'dieux': 'déesses',

---

Et la arrive mon problème, que je suis incapable de comprendre :

Code:

---

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:

---

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:

---

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...

Citation:

---

mais les considère comme étant de simples strings

---

Code:

---

current.textContent = genderswap(current.textContent);

---

Peut-être parce que dans textContent, text signifie texte. :whistle:

Citation:

---

Envoyé par Gaerhiel

Je suis donc stagiaire, et avec peu de compétences en JS.

---

D'accord, et donc comment je fais pour que mes balises et mes accents soient pris en compte ? :)

Pour ce qui est des accents, c'est normal : ta regex ne les prend tout simplement pas en compte.

Code:

---

replace(/\b([a-z][\w\']+)\b/gi, swapWord);

---

Et pour que tes balises soient prises en compte, ben je pense qu'il suffit de demander gentiment à ton code d'insérer la chaine en tant que contenu HTML (voire, en tant qu'HTML interne)...

J'en arrive donc la :

Code:

---

1 2 3 4 5

//Fonction qui translate les mots masculins/féminin function genderswap(text) { return text .replace(/\b([a-zâêîôûäëïöüéèà][\w\']+)\b/gi, swapWord); }

---

Et cela ne fonctionne toujours pas.


Et, comment puis-je faire pour demander "gentillement" (ou méchamment) à mon code de prendre les balises html ?

Merci pour tes réponses :)

En traduisant "HTML interne" en anglais par exemple...

Citation:

---

Envoyé par Bovino

En traduisant "HTML interne" en anglais par exemple...

---

J'en conclu que tu parles de innerHTML=
J'ai tenté de l'utiliser, mais je n'ai pas vraiment réussi. J'ai lu la page sur innerHTML, mais ça ne m'a pas aidé à comprendre comment l'utiliser et surtout l'adapter à mon code.
Comme je l'ai dit, j'ai très peu de connaissances en JS, et j'ai vraiment de grosses lacunes à ce niveau... J'admet, je dois être assisté, sinon ça ne passera pas.

Tout les tutoriels que j'ai trouvé sur innerHTML vont chercher des elements HTML existants pour ensuite y insérer des balises.

Mon extension est supposée changer le texte dans TOUTES les pages où je l'active, je ne peux donc pas m'en tenir à un élément en particulier...

Si quelqu'un a une idée...

Le problème des accents survient lors de la "lecture" de la page d'origine.

En fait, l'extension ne détecte pas les accents d'origine (bien qu'elle insère sans problème les accents dans les mots échangés). Elle prend les accents probablement pour des caractères de fin de mot.

En fait, le problème n'était pas visible sur "étendard" ou "levé" (qui ne veulent pas se modifier), mais "misère" devient "misesère" à cause de 'mis': 'mise' . Peut-être lit-elle "misère" comme étant "mis re"... Mais comment régler ce problème ?