Javascript comparer et afficher les différences entre deux chaînes de caractères

Version imprimable

17/10/2021, 19h27
Jiijiii

Javascript comparer et afficher les différences entre deux chaînes de caractères
Bonjour ! Je cherche un programme en Javascript qui permettrait de corriger la dictée qu'a fait un utilisateur, en comparant deux chaînes de caractères qui sont :
1) le texte original utilisé pour la dictée,
2) et le texte qu'il a écrit.
Donc de dire à l'utilisateur où sont les erreurs qu'il a faites dans la dictée.

Exemple :
Code:

1 2 var texteDeBase= "Je suis un texte"; var entreeUtilisateur= "Je suis une textes";
Quand il appuie sur le bouton de soumission, lui dire qu'il a fait 2 fautes et lui montrer lesquelles.
C'est vraiment sur cette partie que je coince.

Merci d'avance.
17/10/2021, 21h39
Beginner.

Salut,

Cela peut être plus ou moins compliqué selon ce que l'on souhaite, par exemple c'est plus simple si on part du principe qu'il y a le même nombre de mots dans les deux textes à comparer car dans ce cas on peut signaler chaque mot erroné en précisant le mot correct qu'il aurait fallu utiliser à la place...

Sinon si on veut être général on peut toujours signaler les différences entre les deux textes (en mettant en rouge les différences par exemples).

Il existe déjà des éditeurs qui utilisent plusieurs couleurs pour indiquer les parties en plus ou en moins...
17/10/2021, 23h37
Jiijiii

Salut, est-ce que je pourrais passer par une fonction simple ? du style, intégrant des conditions for/if :
" Dans la boucle avec i commençant à 0, jusqu'à la longueur totale du texte, et s'incrémentant,
à chaque fois qu'un caractère différent de celui du texte de base est trouvé,
alors incrémenter i de 1
puis donner à la fin le total des caractères différents trouvés "

J'ai essayé de passer par des fonctions de ce genre mais en vain.
17/10/2021, 23h54
Beginner.

Oui c'est faisable et c'est assez simple mais le problème c'est de savoir si par exemple on a un deux caractères différents pour un même mot est-ce qu'on a deux fautes (car il y a deux caractères différents) ou bien une faute (car un seul mot est erroné) ?
18/10/2021, 00h09
Beginner.

Pour se fixer les idées et savoir ce que l'on veut on peut s'aider de ces sites :

- https://www.diffchecker.com/diff
- https://www.w3docs.com/tools/code-diff/
- https://text-compare.com/

Le premier semble plus complet, il compare les mots mais on peut aussi choisir la comparaison par caractère (mais c'est payant apparemment)...

On voit bien que c'est plus compliqué qu'il n'y parait car il peut y avoir plus ou moins de mot dans le texte original que dans le texte entré par l'utilisateur...
18/10/2021, 00h13
Jiijiii

Okay merci pour les liens, je vais aller les voir et reviens plus tard sur le forum !
C'est bien que tu m'en parles parce-que je n'y avais pas pensé. Je pense que je vais m'orienter vers un mot erroné = 1 faute, qu'il ait un ou plusieurs caractères différents. En effet si on fait l'inverse on peut vite tomber dans une somme d'erreurs assez conséquente, par exemple écrire "ortografe" au lieu d' "orthographe" compterait 3 fautes...
18/10/2021, 00h24
Beginner.

Le premier semble plus complet, il compare les mots mais on peut aussi choisir la comparaison par caractère (mais c'est payant apparemment)...

On voit bien que c'est plus compliqué qu'il n'y parait car il peut y avoir plus ou moins de mot dans le texte original que dans le texte entré par l'utilisateur...
18/10/2021, 00h40
Jiijiii

Bon, je suis allée jetée un œil aux sites et ça ne va vraiment pas être une mince affaire... Etant en études de design web, je n'ai vu que la base de Javascript et je commence à voir jQuery mais j'ai l'impression que ce que je veux coder (c'est un petit projet perso), ce n'est pas encore dans mes cordes...
Mais le dernier site que tu m'as donné, https://text-compare.com/, j'ai inspecté son code et il est vraiment très propre, du coup il y a peut-être un début que je pourrais exploiter...
18/10/2021, 08h44
ProgElecT

Salut

Une idée comme cela en passant, rechercher les mots sans fautes et ne marquer/souligner que les mots "étrangers" au texte de base.
18/10/2021, 15h58
SpaceFrog

Autre idée, faire un split ou match sur regex pour ne retenir que les mots et les comparer au même split sur le texte de référence.
18/10/2021, 19h05
Beginner.

Oui cela me semble de bonnes idées...
Dans le cas où on a le même nombre de mots pour les deux textes, ça va mais dans le cas contraire* cela se complique...

* C'est-à-dire si le texte entré a plus ou moins de mots que le texte original.
20/10/2021, 22h00
Beginner.

Citation:

Envoyé par ProgElecT

Une idée comme cela en passant, rechercher les mots sans fautes et ne marquer/souligner que les mots "étrangers" au texte de base.

Par rapport à cette idée, je pense que "rechercher les mots sans fautes" revient à chercher les mots communs entre les deux textes... Or justement j'ai vu un article à propos de la "distance de Levenshtein" que je ne connaissais pas : https://fr.wikipedia.org/wiki/Distance_de_Levenshtein

Il y a des implantations dans plusieurs langages ici : https://en.wikibooks.org/wiki/Algori...nce#JavaScript

Une différence c'est que cela travail au niveau du caractère et non au niveau du mot...

Salut

Moi j'en suis là

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
<!DOCTYPE html>
<html lang="fr"> <!-- EtudeDicter-.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Ici mon titre</title>
	</head>
	<body>
		Le modéle de dictée, <span style="color:red">ATTENTION</span>, il ne doit contenir aucune faute.
		<br />
 		<textarea id="TxtSource" style="position:relative;height:50px;width:450px">Ici le texte de la dictée à reproduire.
L'élève devra faire attention aux fautes d'orthographe.</textarea>
		<br /><br />
		L'ardoise ou faire la dictée
		<br />
 		<textarea id="TxtArdoise" style="position:relative;height:70px;width:450px">A que pas coucou</textarea>
		<br /><br />
		<button id="BtnCorrection" onclick="VerifOrtho()">Analyzer</button>
		<div id="Result" style="position:relative;width:450px;border-style:double;padding:5px;">L'analyse sera affichée ICI</div>
		<script>
                //---------------------------------------------------------------------------------------
                        function VerifOrtho() {
                                //--------------------------------- création de 2 tableaux, dictée et rédaction --------------------------
                                document.getElementById("Result").innerHTML = "En cours d'analyse ..... . .";
                                // partie dictée soumise
                                let Txt = document.getElementById("TxtSource").value;
                                let TxtSrc = Txt.trim();
                                if (TxtSrc.length === 0){ alert("Aucune dicté proposée");return;}
                                let TblMotSrc = Prepare(TxtSrc).split(" ");
                                
                                // partie rédaction de l'utilisateur
                                Txt = document.getElementById("TxtArdoise").value;
                                let TxtArd = Txt.trim();
                                if (TxtArd.length === 0){ alert("Aucune rédaction de la dictée");return;}
                                let TblMotArd = Prepare(TxtArd).split(" ");
                                
                                let NbrIdxSrc = TblMotSrc.length;
                                let NbrIdxArd = TblMotArd.length;
                                
                                // **************** Partie analyse ****************
                                let Trouver=false, Result="", NbrF=0;
                                for (let i = 0, iMax  = NbrIdxSrc; i < iMax; i++) {
                                        Trouver=false;
                                        for (let t = 0, tMax  = NbrIdxArd; t < tMax; t++) {
                                                if (TblMotArd[t]===TblMotSrc[i]){
                                                        Result = Result + " " + TblMotArd[t];
                                                        Trouver=true;
                                                        break;
                                                }
                                        }
                                        if (Trouver===false){
                                                NbrF++;
                                                if(TblMotArd[i]==undefined){
                                                }else{
                                                        Result = Result + "<span style='color:red'> " + TblMotArd[i] + "</span>";
                                                }
                                        }
                                }
                                console.log("NbrF = ",NbrF);
                                let comentaire = "<span style='color:green'>Bravo, 0 faute</span><br /><br />";
                                if (NbrF>=1){
                                        let faute=" faute";
                                        if (NbrF>1){faute=" fautes"}
                                        comentaire = "<span style='color:red'>Pas bien, " + NbrF + faute +"</span><br /><br />";
                                }
                                document.getElementById("Result").innerHTML = comentaire + Result;
 
                        }//---------------------------------------------------------------------------------------
                        function Prepare(LeTexte){
                                let Txt0 = LeTexte.replace(/\n/g," ");//remplace tout retour à la ligne par un espace
                                let Txt = Txt0.replace(/[\t|.|,|;]/g,"");//remplace toutes tabulations point virgule ou point-virgule par rien
                                Txt0 = Txt.replace(/( ){2,}/g," ");//remplace les espaces de plus de 2 caractères par un seul espace
                                return Txt0.trim();
                        }
     </script>
     <!-- --------------------------------------------------------------------------------------- -->
	</body>
</html>

Cela fonctionne si il y a le même nombre de mot dans l’énoncé et la rédaction, par contre si il y a une différence, ben c'est plus vraie.

21/10/2021, 15h29
SpaceFrog

Ce qui est en effet complexe est de déterminer si lorsqu'il y a différence, il s'agit d'une faute d'orthographe ou de frappe sur le mot ou si c'est un autre mot ...
Et si c'est un autre mot, comment retomber sur une synchronisation des indexes à comparer ...
21/10/2021, 17h42
Beginner.

Salut,

Citation:

Envoyé par ProgElecT

Moi j'en suis là

C'est un bon début, j'ai testé ton code et il fonctionne effectivement bien si on respecte la condition du même nombre de mots.

J'en ai fait un aussi (pour tester : https://jsbin.com/kurituvaxi/edit?js,output) mais il est assez lourd, je me suis compliqué les choses, j'ai vu par la suite qu'il est possible de faire plus simple, plus concis et même plus lisible... En plus il y a quelques bugs à corriger (pour l'instant il faut que le dernier mot soit correcte sinon ça bogue...).

Les mots en trop sont en vert, ceux qui sont différents en rouge et il y a aussi les mots manquants (le code fournit le tableau mais c'est plus compliqué à afficher avec la méthode compliquée que j'ai utilisée...).

J'ai vu aussi qu'il valait mieux découper les mots comme tu as fait (selon les espaces) plutôt que comme j'ai fait car on perd plusieurs infos (ponctuation, nombres, les lettres spéciales...). Par exemple si on avait toto33 ben il faudrait le garder, et si on avait d'ailleurs il faudrait le garder tel quel aussi de sorte que si on entre dailleurs l’erreur soit bien repérer avec le bon indice...

J'ai vu que tu avis aussi "prépare" le texte en enlevant certains signes de ponctuation, c'est un choix mais peut-être qu'on pourrait aussi les laisser si on veut aussi détecter les fautes de ponctuation alors du coup si on a (dans le texte d'origine) maison, et qu'on tape maison cela indiquera une erreur car il manque la virgule...

Citation:

Envoyé par SpaceFrog

Ce qui est en effet complexe est de déterminer si lorsqu'il y a différence, il s'agit d'une faute d'orthographe ou de frappe sur le mot ou si c'est un autre mot ...
Et si c'est un autre mot, comment retomber sur une synchronisation des indexes à comparer ...

Oui il y a beaucoup de cas : quand il y a une différence sur une portion donnée je mets tout ensemble car parfois le nombre de mots différents n'est pas le même dans les deux textes même pour une portion donnée.

Par exemple :

Je suis un texte pour faire des tests.
Je suis une textes pour faire des tests.

Je fait correspondre un texte à une textes même si on pourrait faire correspondre un à une et texte à textes car le nombre de mots pourrait ne pas être le même.

Exemple si on ajoutait un mot en plus : plus cela donnerait :

Je suis un texte pour faire des tests.
Je suis une plus textes pour faire des tests.

Là aussi je fait correspondre un texte à une plus textes... Si on faisait du mot à mot ce serait plus difficile : ce serait assez facile (car on respecte juste l'ordre des mots) de faire correspondre un à une, texte à plus et texte à un mot vide (à supprimer donc)...

Mais on voit bien que le mieux serait de faire correspondre un à une, texte à textes et plus à un mot vide (à supprimer donc) mais c'est plus de boulot...
22/10/2021, 23h59
Beginner.

Salut,

Voici une nouvelle version : https://jsfiddle.net/stndch39/3/ avec un bogue en moins...

Le résultat s'affiche automatiquement à chaque changements des deux textes...

On peut survoler les différentes parties pour afficher des infos...

Si quelqu'un constate un bug ou une amélioration il est le bienvenu...