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

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

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

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

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

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

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

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

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

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

    
language: HTML
<!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>


Вот что у нас полу­чи­лось. Выгля­дит неопрят­но, давай­те доба­вим сти­лей.
    
language: CSS
<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{

    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);

 

  }

 

</style>


Ско­пи­ро­вать код
Код ско­пи­ро­ван

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

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

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

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

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

    
language: JavaScript
$(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> 

Полный код страницы:

    
language: HTML
<!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. Она точ­но такая же, как мы опи­са­ли в ста­тье, и про­вер­ка идёт по каж­до­му нажа­тию энте­ра или про­бе­ла. Если не хоти­те пере­гру­жать сер­ве­ра Яндек­са — сде­лай­те про­вер­ку по кноп­ке. 

Что дальше

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

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

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