Подключаем к сайту орфокорректор. Орфонейрокорректор!

В ста­тье про ней­ро­се­ти мы гово­ри­ли, что они здо­ро­во справ­ля­ют­ся с машин­ным пере­во­дом и тек­ста­ми. Наста­ло вре­мя попро­бо­вать эти тех­но­ло­гии на прак­ти­ке — будем под­клю­чать модуль орфо­кор­рек­ции «Яндекс.Спеллер» к веб-странице. В резуль­та­те вве­ден­ный на стра­ни­це текст будет авто­ма­ти­че­ски про­ве­рять­ся орфокорректором.

Яндекс.Спеллер помо­га­ет нахо­дить и исправ­лять орфо­гра­фи­че­ские ошиб­ки в рус­ском, укра­ин­ском или англий­ском тек­сте. Что­бы обна­ру­жи­вать ошиб­ки и под­би­рать заме­ны, Спел­лер исполь­зу­ет биб­лио­те­ку машин­но­го обу­че­ния CatBoost. Бла­го­да­ря CatBoost он может рас­шиф­ро­вы­вать иска­жён­ные до неузна­ва­е­мо­сти сло­ва («адни­ка­сни­еи» → «одно­класс­ни­ки») и учи­ты­вать кон­текст при поис­ке опе­ча­ток («ску­чать музы­ку» → «ска­чать музыку»). 

Основ­ные усло­вия, по кото­рым предо­став­ля­ет­ся «Спел­лер», такие:

Это­го вполне хва­та­ет для наше­го част­но­го про­ек­та. Если вы захо­ти­те исполь­зо­вать «Спел­лер» в про­фес­си­о­наль­ных целях, почи­тай­те пол­ные усло­вия.

Вот что мы сделаем:

  1. Возь­мём шаб­лон пустой страницы.
  2. Поме­стим на неё заго­ло­вок, пояс­ни­тель­ный текст и поле ввода.
  3. Напи­шем скрипт, кото­рый после каж­до­го вве­дён­но­го сло­ва про­ве­ря­ет наш текст и авто­ма­ти­че­ски исправ­ля­ет ошибки.

Оформляем страницу

Возь­мём наш стан­дарт­ный шаблон:

Шаблон с Бутстрапом

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Орфокорректор</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <!-- тут будет наша страница -->
</body>
<!-- конец всей страницы -->

</html>

Доба­вим на стра­ни­цу заго­ло­вок, текст и поле ввода:

<!-- заголовок на странице --> <h1>Орфокорректор</h1>   <!-- пояснительный текст --> <p>Напишите что угодно с ошибками. Страница сама всё исправит.</p>   <!-- поле ввода текста --> <textarea id="text_field" class="text"></textarea>
Вот что у нас полу­чи­лось. Выгля­дит неопрят­но, давай­те доба­вим стилей. 
/* общие параметры страницы*/
body {
  text-align: center;
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/* заголовок */
h1 {
  font-size: 48px;
  text-align: center;
}
/* поле ввода */
.text {
  height: 80%;
  min-width: 300px;
  margin-left: 15vw;
  margin-right: 15vw;
  border: solid;
  border-width: 1px;
  text-align: left;
  -webkit-box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
}

Пишем скрипт проверки орфографии

Что­бы мож­но было обра­щать­ся к эле­мен­ту на стра­ни­це по име­ни, под­клю­чим jQuery. Если вы не зна­е­те, зачем это нуж­но и как рабо­та­ет, — про­чи­тай­те нашу ста­тью.

<script type="text/javascript" src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>

Зада­ча скрип­та — ждать нажа­тия про­бе­ла или энте­ра, после чего отпра­вить текст на про­вер­ку и полу­чить назад гото­вые сло­ва без оши­бок. Как толь­ко скрипт полу­ча­ет от сер­ве­ра Яндек­са ответ — скрипт меня­ет текст в окне вво­да на правильный.

Код про­бе­ла — 32, код энте­ра — 13. Полу­ча­ет­ся, что нам нуж­но отсле­жи­вать нажа­тие каж­дой кла­ви­ши и смот­реть, что имен­но нажа­лось. Если выпа­ли нуж­ные нам коды — запус­ка­ем скрипт про­вер­ки. Подроб­нее про отсле­жи­ва­ние нажа­тых кла­виш — в ста­тье про редак­тор с авто­со­хра­не­ни­ем.

$(document).ready(function () {
  // эта функция получает наш результат проверки орфографии
  fix_spell = function (data) {
    data.forEach(function (elem) {
      // она находит наше поле ввода по имени
      $('#text_field').val(
        // и меняет всё на правильные слова без ошибок
        $('#text_field').val().replace(
          elem['word'],
          elem['s'][0] || elem['word']
        )
      );
    });
  }
});
// обработчик нажатия на клавиши
document.addEventListener('keydown', function (e) {
  // если нажат пробел или энтер
  if ((e.keyCode == 32) || (e.keyCode == 13)) {
    // делим текст на строки
    var lines = $('#text_field').val().replace(/\r\n|\n\r|\n|\r/g, "\n").split("\n");
    // и обрабатываем каждую строчку:
    lines.forEach(function (line) {
      if (line.length) {
        // отправляем строку со словами на проверку в Спеллер, результат сразу отправляется в функцию fix_spell
        $.getScript('http://speller.yandex.net/services/spellservice.json/checkText?text=' + line + '&callback=fix_spell');
      }
    });
  }
});

Сохра­ня­ем скрипт отдель­ным фай­лом script.js в той же пап­ке, что и стра­ни­ца, и под­клю­ча­ем его в коде страницы:

<script type="text/javascript" src="script.js"></script> 
Полный код страницы:

<!DOCTYPE html>
<html>
<!-- служебная часть -->

<head>
  <!-- заголовок страницы -->
  <title>Орфокорректор</title>
  <!-- настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    /* общие параметры страницы*/
    body {
      text-align: center;
      margin: 10;
      font-family: Verdana, Arial, sans-serif;
      font-size: 16px;
    }

    /* заголовок */
    h1 {
      font-size: 48px;
      text-align: center;
    }

    /* поле ввода */
    .text {
      min-height: 300px;
      min-width: 500px;
      border: solid;
      border-width: 1px;
      text-align: left;
      -webkit-box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
      box-shadow: 6px 10px 9px 0px rgba(0, 0, 0, 0.75);
    }
  </style>
  <!-- закрываем служебную часть страницы -->
</head>

<body>
  <!-- подключаем jQuery -->
  <script type="text/javascript" src="http://yastatic.net/jquery/2.1.3/jquery.min.js"></script>
  <!-- подключаем наш скрипт проверки орфографии -->
  <script type="text/javascript" src="script.js"></script>
  <!-- заголовок на странице -->
  <h1>Орфокорректор</h1>
  <!-- пояснительный текст -->
  <p>Напишите что угодно с ошибками. Страница сама всё исправит.</p>
  <!-- поле ввода текста -->
  <textarea id="text_field" class="text"></textarea>
</body>
<!-- конец всей страницы -->

</html>

Посмотрите на результат

Мож­но поиг­рать с нашей пуб­лич­ной вер­си­ей на сай­те mihailmaximov.ru. Она точ­но такая же, как мы опи­са­ли в ста­тье, и про­вер­ка идёт по каж­до­му нажа­тию энте­ра или про­бе­ла. Если не хоти­те пере­гру­жать сер­ве­ра Яндек­са — сде­лай­те про­вер­ку по кнопке. 

Что дальше

Мож­но при­кру­тить этот орфо­кор­рек­тор к наше­му тек­сто­во­му редак­то­ру, и тогда вы сра­зу буде­те печа­тать текст почти без ошибок.

Если вы не укла­ды­ва­е­тесь в лими­ты по коли­че­ству или объ­ё­му про­ве­рок, мож­но убрать авто­про­вер­ку и доба­вить кноп­ку руч­ной про­вер­ки. Или сде­лать чек­бокс, кото­рый будет отве­чать за автокоррекцию.

А ещё мож­но доба­вить счёт­чик оши­бок — он пока­жет, насколь­ко акку­рат­но вы наби­ра­е­те текст.