Как получить доступ к предложениям по проверке правописания Chrome в JavaScript

Как получить доступ к предложениям по проверке правописания Chrome в JavaScript

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

Я понятия не имею, каков ваш вариант использования для этой функциональности, но я собрал демонстрацию с использованием API проверки правописания montanaflynn на MashApe . Демонстрация просматривает текстовую область, и когда пользователь приостанавливает набор текста, он отправляет текст через API для тестирования. API возвращает JSON, содержащий исходную строку, предложенную исправленную строку и объект, содержащий исправленные слова и их предлагаемые замены.

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

Я также добавил функцию перетасовки, которая скремблирует слова в строке перед отправкой, чтобы добавить уровень конфиденциальности при использовании API (он также использует SSL). Ни API, ни Chrome не используют контекстные предложения, поэтому перетасовка не меняет результаты.

Вот ссылка на CodePen: http://codepen.io/aecend/pen/rOebQq

И вот код:

CSS

 {amp}lt;style{amp}gt; * { font-family: sans-serif; } textarea { margin-bottom: 10px; width: 500px; height: 300px; padding: 10px; } .words { width: 500px; } .word { display: inline-block; padding: 2px 5px 1px 5px; border-radius: 2px; background: #00B1E6; color: white; margin: 2px; cursor: pointer; } {amp}lt;/style{amp}gt; 

HTML

 {amp}lt;textarea id="text" placeholder="Type something here..."{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;div id="words"{amp}gt;{amp}lt;/div{amp}gt; 

JavaScript

 {amp}lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; ;(function(){ "use strict"; var words = document.getElementById("words"), input = document.getElementById("text"), timeout, xhr; input.addEventListener("keyup", function(e){ if (timeout) clearTimeout(timeout); if (!this.value.trim()) words.innerHTML = ''; timeout = setTimeout(function() { var test_phrase = shuffle_words( input.value ); spell_check(test_phrase); timeout = null; }, 500); }); function shuffle_words(inp) { inp = inp.replace(/s /g, ' '); var arr = inp.split(" "), n = arr.length; while (n {amp}gt; 0) { var i = Math.floor(Math.random() * n--), t = arr[n]; arr[n] = arr[i]; arr[i] = t; } return arr.join(' '); } function spell_check(text){ if (xhr) xhr.abort(); xhr = $.ajax({ url: 'https://montanaflynn-spellcheck.p.mashape.com/check/', headers: { 'X-Mashape-Key': 'U3ogA8RAAMmshGOJkNxkTBbuYYRTp1gMAuGjsniThZuaoKIyaj', 'Accept': 'application/json' }, data: { 'text': text }, cache: false, success: function(result){ xhr = null; suggest_words(result); } }); } function suggest_words(obj){ if (!obj.corrections) return; words.innerHTML = ''; for (var key in obj.corrections) { if (obj.corrections.hasOwnProperty(key)) { var div = document.createElement("div"); div.className = "word"; div.innerHTML = obj.corrections[key][0]; div.orig = key; div.onmouseover = function() { var start = input.value.indexOf(this.orig); input.selectionStart = start; input.selectionEnd = start   this.orig.length; }; div.onmouseout = function() { var len = input.value.length; input.selectionStart = len; input.selectionEnd = len; } div.onclick = function() { input.value = input.value.replace(this.orig, this.innerHTML); this.parentNode.removeChild(this); } words.appendChild(div); } } } })(); {amp}lt;/script{amp}gt; 

Я использовал jQuery только для упрощения запроса AJAX для этой демонстрации. Это легко сделать в ванильном JS.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector