Выделите слово на странице html, если слово определено в базе данных

Question

Мы разрабатываем мультимедийную систему словарей. Идея состоит в том, что, если вы находитесь на веб-странице, и есть слово, которое вы не знаете, вы дважды щелкаете по слову, и появляется словарь.

Словарь отличается от google's dictionary for chrome, в котором содержится мультимедиа, многоязычный и содержит дополнительную информацию, выходящую за пределы простого значения слова.

Наша проблема заключается в следующем: мы не можем определить все слова на каждой странице в Интернете в нашей базе данных. Это означает, что многие слова на странице не могут быть определены. Вместо того, чтобы пользователи дважды щелкали по слову, чтобы узнать, есть ли определение, мы хотим проверить нашу базу данных, какие слова на странице определяются как загружаемая страница. Затем мы хотим выделить определенные слова на веб-странице, чтобы читатели могли видеть, какие слова определены.

У нас есть всплывающее окно, в основном работающее так, как мы этого хотим. Задача состоит в том, что он должен работать на веб-страницах, где мы не являемся владельцами страниц (например, когда мы развиваем нашу систему как расширение браузера), это означает, что мы не можем сделать

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

Вот что мы До сих пор - работает только в Chrome: gwizz demo page. Щелкните по безопасности, сервер еще не безопасен.

На нашей странице указаны большинство слов, поэтому вы можете дважды щелкнуть любое слово, и на нем отобразится всплывающее окно. Однако на большинстве страниц в базе данных будет много слов, которые не определены. Читатели в конечном итоге разочаруются, если они нажмут на слишком много слов без определения в базе данных. Этого мы хотим избежать, указав слова, которые определены.

На мой взгляд, для этого потребуется начать в верхней части страницы и протестировать каждое слово против базы данных, и если оно определено, например, hgihlight слово в другом цвете, а затем тестирование следующего слова , Это звучит для меня так, как будто это будет довольно медленный процесс. Мне было интересно, будет ли более быстрый способ?

Answer 1

Вы должны использовать AJAX для этого, это довольно просто

Так что вы обернуть любое слово в теге как то

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

Для облегчения AJAX вы можете использовать JQuery, это наиболее часто используемые библиотеки для это, так что это будет выглядеть так:

$('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! 
     } 
    }); 
}); 

И ваш lookup.php должно быть очень просто тоже:

<?php 

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

Помните, что это пример кода! Не безопасно, не проверено. Но он показывает, как решить вашу проблему :)