Markieren Sie das Wort auf der HTML-Seite, wenn das Wort in einer Datenbank definiert ist

Question

Wir entwickeln ein Multimedia-Wörterbuchsystem. Die Idee ist, dass, wenn Sie auf einer Webseite sind, und es gibt ein Wort, das Sie nicht wissen, doppelklicken Sie auf ein Wort und ein Wörterbuch erscheint.

Das Wörterbuch unterscheidet sich von google's dictionary for chrome darin, dass es Multimedia enthält, mehrsprachig ist und zusätzliche Informationen enthält, die über die bloße Bedeutung des Wortes hinausgehen.

Unser Problem ist das: Wir können nicht alle Wörter auf jeder Seite im Web in unserer Datenbank definieren. Das bedeutet, dass viele Wörter auf einer Seite möglicherweise nicht definiert sind. Anstatt dass Benutzer auf ein Wort doppelklicken, um zu sehen, ob es eine Definition gibt, wollen wir mit unserer Datenbank vergleichen, welche Wörter auf der Seite definiert sind, während die Seite geladen wird. Wir möchten dann die definierten Wörter auf der Webseite hervorheben, damit die Leser sehen können, welche Wörter definiert sind.

Wir haben das Pop-up funktioniert so, wie wir es wollen. Die Herausforderung ist, dass es auf Web-Seiten zu arbeiten, wo wir nicht die Seite Besitzer (wie wenn wir unser System als Browser-Erweiterung entwickeln), was bedeutet, wir nicht

<span class="dict">consetetur</span>

Hier ist, was tun wir habe bisher gemacht - funktioniert nur in Chrome: gwizz demo page. Klicken Sie sich durch die Sicherheit, der Server ist noch nicht sicher.

Auf unserer Seite sind die meisten Wörter definiert, so dass Sie auf ein beliebiges Wort doppelklicken können, und das Popup wird angezeigt. Auf den meisten Seiten wird es jedoch viele Wörter geben, die nicht in der Datenbank definiert sind. Leser werden schließlich frustriert, wenn sie zu viele Wörter ohne Definition in der Datenbank anklicken. Das wollen wir vermeiden, indem wir die Wörter signalisieren, die definiert sind.

Meiner Meinung nach müsste das oben auf der Seite beginnen und jedes Wort gegen die Datenbank testen, und wenn es definiert ist, das Wort beispielsweise in einer anderen Farbe anzeigen und dann das nächste Wort testen . Das klingt für mich wie ein ziemlich langsamer Prozess. Ich habe mich gefragt, ob es einen schnelleren Weg geben würde?

Answer 1

Sie sollten AJAX verwenden für diese, ist es ziemlich einfach

Damit Sie ein beliebiges Wort in einem Tag wickeln wie die

Lorem ipsum dolor sit amet, <span class="dict">consetetur</span> sadipscing elitr. 

Für eine einfachere AJAX Sie jQuery verwenden können, dann ist es das am häufigsten verwendete Bibliothek für dies, so würde es wie folgt aussehen:

$('span.dict').bind('click', function() { 
    $.ajax("lookup.php", { 
     data: {word: $(this).text()}, // the word 'consetetur' in this example 
     success: function(data) { 
      /* show your popup - data contains here the content of lookup.php 
      you can use something like bootstrap modals or sweetalert for this 

      */ 
     }, 
     error: function(error) { 
      alert('Error:\n' + JSON.stringify(error)); 
      // always handle your ajax errors! 
     } 
    }); 
}); 

Und Ihre lookup.php sollte sehr einfach sein zu:

<?php 

/* setup the database connection*/ 
$word = $_POST['word']; 
$result = $db->query("SELECT text FROM dict WHERE word = '$word'); 
echo $result; 

Denken Sie daran, dies ist Beispielcode! Nicht sicher, nicht getestet. Aber es zeigt, wie man dein Problem löst :)