Surbrillance simultanée entre deux textes

Bonjour,
Je débute en PHP. Pour un projet, je dois comparer un texte annoté manuellement et ce même texte annoté automatiquement. Pour le résultat final, je voudrais qu'il y ait une surbrillance parallèle entre les 2 textes lorsque l'on passe la souris sur un morceau de phrase (comme Google Traduction faisait à l'époque il me semble).
Voici un exemple d'illustration sur une phrase.

J'aimerais que les morceaux de même couleur soient surlignés en même temps lorsque l'on passe la souris sur un des deux textes.

Je ne demande pas forcément de code tout fait, mais peut être des idées d'algo d'un point de vu extérieur, car j'ai déjà commencé mais je me bloque un peu dans mes idées. Merci.

Bonjour Joycin,

Comme je te l'ai dit en mp, j'ai déplacé ton sujet dans le forum javascript.

Ton souci n'est pas très difficile. Il suffit de réfléchir un instant. Si tu entoures chaque mot par un élément (<mark> par exemple), ça te donnes un truc comme :

<p id="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae blanditiis aliquid ipsa consequuntur accusantium asperiores illum distinctio modi cumque dolorem voluptas dolor nobis, esse aut ad ok itaque explicabo rem quos!</p>

#txt mark{
  background: transparent;
}

#txt mark:hover{
  background: yellow;
}

var $txt = document.getElementById('txt');
$txt.innerHTML = $txt.textContent.replace(/([\w]+)/g, '<mark>$1</mark>');

Je te laisse imaginer la suite :
- lorsque la souris est sur un élement <mark>, tu récupères le texte
- tu cherches sa correspondance dans l'autre bloc.

ps : Avec cette technique, tu es limité puisque tu es contraint au mot à mot
Modifié par niuxe (08 Apr 2020 - 01:17)

niuxe a écrit :
Bonjour Joycin,

Comme je te l'ai dit en mp, j'ai déplacé ton sujet dans le forum javascript.

Ton souci n'est pas très difficile. Il suffit de réfléchir un instant. Si tu entoures chaque mot par un élément (&lt;mark&gt; par exemple), ça te donnes un truc comme :

<p id="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae blanditiis aliquid ipsa consequuntur accusantium asperiores illum distinctio modi cumque dolorem voluptas dolor nobis, esse aut ad ok itaque explicabo rem quos!</p>

#txt mark{
  background: transparent;
}

#txt mark:hover{
  background: yellow;
}

var $txt = document.getElementById('txt');
$txt.innerHTML = $txt.textContent.replace(/([\w]+)/g, '<mark>$1</mark>');

Je te laisse imaginer la suite :
- lorsque la souris est sur un élement &lt;mark&gt;, tu récupères le texte
- tu cherches sa correspondance dans l'autre bloc.

ps : Avec cette technique, tu es limité puisque tu es contraint au mot à mot

Merci de ta réponse.

En fait, le texte annoté à la main j'ai réussi à le baliser avec <mark> sur chaque bloc, mais pour le second texte :
- Je dois partir du texte brut.
- Celui-ci sera ensuite annoté par la machine (donc avec les crochets [ ] qu'on peut voir).
- Enfin, (c'est là où je bloque) j'aimerai le baliser <mark> aux mêmes endroits que le premier texte pour faire correspondre les blocs.

Désolée si je m'exprime mal ! Mais je sais pas si j'ai mal commencé mon raisonnement ou bien si le problème d'algo est tout simple.

Merci.

joycin a écrit :

En fait, le texte annoté à la main j'ai réussi à le baliser avec &lt;mark&gt; sur chaque bloc, mais pour le second texte :
- Je dois partir du texte brut.
- Celui-ci sera ensuite annoté par la machine (donc avec les crochets [ ] qu'on peut voir).
- Enfin, (c'est là où je bloque) j'aimerai le baliser &lt;mark&gt; aux mêmes endroits que le premier texte pour faire correspondre les blocs.

Désolée si je m'exprime mal ! Mais je sais pas si j'ai mal commencé mon raisonnement ou bien si le problème d'algo est tout simple.

Je comprends trop le contexte. Il faudrait que tu édites ton code sur le forum. Si j'ai bien saisi, tu vas éditer un texte à la main et dans un bloc, tu as du texte. Ce texte que tu as édité devrait faire correspondre au texte "témoin" (déjà saisi). Le problème étant que dans un textearea tu ne peux pas insérer des balises html (avec le rendu). Par contre dans un element html, tu peux éditer du texte.