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

В данном конкретном случае описывается, как создать простой инструмент, который поможет автоматически заменить неправильное написание слова пользователем на правильное. Хотя здесь мы будем работать с JavaScript, вы можете создать подобный инструмент на других языках.

Вот что мы будем делать:

  • Создайте простую веб-страницу с полем ввода, где пользователь может вводить текст.
  • Добавьте CSS для стилизации веб-страницы.
  • Добавьте JavaScript, чтобы проверять, что вводит пользователь, на наличие орфографической ошибки, и исправлять ошибку в режиме реального времени.

Я предполагаю, что у вас уже есть небольшой опыт работы с HTML, CSS и JavaScript.

Подготовка сцены

Вот HTML-код веб-страницы, с которой мы будем работать:

Начнем с связывания файлов CSS (main.css) и JS (main.js). Конечно, вы можете называть их как хотите. Затем мы добавляем на страницу текстовое поле ввода, где пользователь вводит текст. Обратите внимание, что его идентификатор называется «текст» и что у него есть обработчик событий onkeyup, поэтому при каждом нажатии и отпускании клавиши браузер вызывает функцию JavaScript submit (). (см. ниже).

Наконец, мы добавляем тег div, чтобы показать, что набрал пользователь.

Теперь давайте изменим стиль:

а теперь немного предварительного JavaScript:

Вот как выглядит веб-страница:

Итак, что делает весь приведенный выше код?

Пользователю отображается текстовое поле, в котором он может вводить текст, и если они это делают, вызывается функция JavaScript submit (). Функция копирует то, что пользователь ввел, в выходной тег div и очищает тег div, если текстовое поле пусто.

А теперь давайте сделаем нашу страницу немного умнее.

Автокоррекция

В настоящее время функция submit () просто копирует то, что пользователь вводит, в выходной div. Мы хотим, чтобы он также проверял, не допустил ли пользователь орфографическую ошибку.

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

Во-первых, давайте добавим функцию JavaScript, которая вызывается только после того, как пользователь завершил слово:

Мы добавили новую функцию под названием autoCorrect (), которая принимает слово, записывает его в консоль и возвращает слово. Мы также добавили код в функцию submit (), которая проверяет, является ли последний символ в тексте пользователя пробелом, если это так, то последнее слово в тексте передается в autoCorrect (), и результат используется для замены последнего слова в тексте.

Позже мы увидим, что функция autoCorrect () вернет правильное написание последнего слова, и, исправляя написание слов по одному, пользователь получает правильно написанное приговор.

Далее мы хотим, чтобы функция autoCorrect () проверяла орфографию переданного ей слова и, если оно неверно, возвращала правильное написание.

Сначала мы должны определить массив всех ожидаемых слов. Это будет зависеть от того, что пользователь должен ввести. Например, если ожидается, что пользователь введет предложение на английском языке, массив может содержать все слова на английском языке.

В нашем случае, для простоты, мы просим пользователя указать некоторые популярные технологические компании (Google, Apple и т. Д.).

Давайте обновим заполнитель для поля ввода и вывода:

Теперь давайте создадим наш массив ожидаемых слов:

Далее мы будем работать с биграммами. Биграмма слова - это набор пар соседних символов в слове. Например, биграмма биграммы - это [би, ig, гр, ра, ам]. Подробнее о биграммах читайте здесь: https://en.wikipedia.org/wiki/Bigram.

Мы сравним биграмму последнего введенного пользователем слова с биграммой каждого слова в нашем массиве ожидаемых слов и посмотрим, какое из них имеет наибольшее сходство, а затем заменим слово пользователя наиболее подходящим словом в массиве.

Мы добавили две новые функции:

  • getBigram (), который возвращает биграмму слова в виде массива;
  • getSimilarity (), который возвращает биграммное сходство двух слов. Он делает это с помощью функции getBigram () для получения биграммы каждого слова, затем подсчитывает количество пар соседних символов в первой биграмме, которые также находятся во второй биграмме, и возвращает отношение этого числа к длине более длинного массива биграмм.

Например, если два слова - «привет» и «привет», необходимо предпринять следующие шаги:

  • Возьмите биграммы: [«он», «эль», «ll», «lo»] и [«he», «el», «lo»].
  • Подсчитайте, сколько пар соседних символов в первой биграмме находится и во второй. Поскольку «он», «эль» и «ло» присутствуют в обеих биграммах, у нас есть три похожие пары.
  • Наконец, найдите отношение этого числа к длине более длинной биграммы. Это дает 3/4 или 0,75 как биграммуное сходство двух слов.

Теперь давайте добавим это в функцию autoCorrect ():

Теперь наш код может проверять слова, написанные пользователем, и заменять их наиболее подходящим словом из массива ожидаемых слов.

Однако есть проблема. Если пользователь хочет ввести техническую компанию, которая не входит в число перечисленных нами, но немного похожа по написанию на одну из них, наш инструмент заменяет компанию пользователя на аналогичную. Например, «Алибаба» становится «Алфавит».

Чтобы исправить это, мы можем установить пороговое значение, ниже которого не следует делать никаких корректировок:

С новым кодом для функции autoCorrect (), если биграммное сходство слова, введенного пользователем, и совпадающего слова из нашего массива не более 0,5, слово не будет исправлено. Пороговое значение зависит от вас и от того, насколько точно вы хотите, чтобы вводимые пользователем данные соответствовали правильному написанию.

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

В последнем примере написание, введенное пользователем, слишком далеко от правильного написания «Facebook» (0,29), поэтому установленное нами пороговое значение запрещает автокоррекцию.

Подведение итогов

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

Окончательная версия кода доступна по адресу https://github.com/eshiofune/auto-correction.

Пожалуйста, оставьте свои предложения и комментарии ниже.