如何在 JavaScript 中访问 Chrome 拼写检查建议-解网

问：

如何在 JavaScript 中检测文本区域内的拼写错误？是否有与此相关的事件？如何访问 Chrome 针对拼写错误的单词的拼写检查建议？

JavaScript Google-Chrome Chromium 拼写检查

@gameFrenzy07 我的理解是，没有任何实质性的变化。Stack Overflow 不做任何特别的事情;如果您在浏览器中打开了拼写检查，它将自动对评论进行拼写检查。您可以使用拼写检查 HTML 属性进行进一步控制。还有一个新的实验性 forceSpellCheck API，几乎没有支持。textarea

0赞 gameFrenzy07 8/24/2020

@Ninjakannon感谢您的回复。我想问的另一个问题是桌面应用程序如何实现这一点。例如，我看到一个 Slack 桌面应用程序如何即时捕获拼写错误的单词，如果它在我的计算机上，浏览器没有外部支持它？

0赞 Ninjakannon 8/24/2020

@gameFrenzy07 Slack 桌面应用程序使用 Electron，它建立在 Chromium 之上;它基本上只是在独立浏览器中运行，没有什么不同。本机桌面应用程序必须为运行它们的操作系统或平台编写，这是一个单独的问题。

22赞 GitaarLAB 9/19/2015 #2

由于这个问题似乎有点宽泛且易于解释（尤其是在当前的赏金“要求”下），我将首先解释我如何解释它，并尝试回答过程中的子问题（问答风格）。

你似乎在问：

特定于“Google Chrome”/“Chromium”：

问：如果浏览器“Google Chrome”/“Chromium”公开了一个拼写检查 API，您可以通过在公共网页
中使用 javascript 来与之交互 答：不，不是真的（至少不是以您想要的方式）。
有一个特定于 Chromium 的拼写检查 API 提案（从 2012 年 12 月开始）。

以下是其中的一些部分：

这个 API 可以成为 Web 平台的一部分吗？
拼写检查不太可能成为 Web 平台的一部分。

更重要的是，它只有一个名为“loadDictionary”的方法：
```
loadDictionary( myDictionaryFile // string path or URL
              , dictionaryFormat // enumerated string [ "hunspell" (concatentation of .aff and .dic files)
                                 //                   , "text"     (plain text)
                                 //                   ]
              ) // returns int indicating success or an error code in loading the dictionary.      
```
重点是什么？帮助社区为祖鲁语、克林贡语等创建自定义词典，因为大约 20-30% 的拼写检查错误与不受支持的语言有关。

现在，我们不要将Chrome的SpellCheck API（上图）与Chrome/Webkit的SpellCheck API（胡？说什么？）混淆：
Hironori Bono（Google Chrome的软件工程师）在2011年左右提出了一个API，以及一些相关的错误报告和补丁，该补丁在Chrome中（/现在仍然？）。
```
void addSpellcheckRange( unsigned long start
                       , unsigned long length
                       , DOMStringList suggestions
                   // [, unsigned short options]
                       );
void removeSpellcheckRange(SpellcheckRange range);
```
使用示例：
```
var input = document.querySelector('input');
input.addSpellcheckRange( 4
                        , 9
                        , [ 'Chrome'
                          , 'Firefox'
                          , 'Opera'
                          , 'Internet Explorer'
                          ]
                        );
```
^{来源：
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#42 ，
http://peter.sh/experiments/spellcheck-api/ （如果这个 API 仍然有效，你应该能够在那里现场尝试它..）}
重点是什么？经过几天的思考，它突然点击了：与浏览器的自定义拼写检查集成 - 使用浏览器的上下文菜单而不是阻止它并提供您自己的菜单。因此，可以将其与现有的外部拼写检查库链接起来。

上面的历史和实验性 API 显然从未直接支持您想要完成的任务。
问：如果“Google Chrome”/“Chromium”拼写检查 API 在（例如）文本区域
上公开了“onSpellError”（类似）事件答：如上所述，Chrome 似乎没有这样的事件。
HTM5 目前仅公开了对拼写检查支持的元素启用或禁用拼写检查的功能。
问：如何访问 Chrome 针对拼写错误的单词
的拼写检查建议答：如上所述：您似乎无法访问。这似乎与几乎重复的问题的答案相同：如何访问 Chrome 的拼写检查词典？
有趣的是，“TinyMCE 的拼写检查器以前是通过”黑客入侵“谷歌拥有的 Chrome 工具栏 API 提供的，违反了谷歌自己的法律使用政策。此拼写检查服务已永久停止。现在，如果你在网上搜索，你可能会找到他们是如何做到的，但这似乎不是最好的方法（并在这里倡导它）。
但是，使用 javascript 拼写检查库，您可以使用 Chrome 的词典（因此您不需要维护词典），但您必须将这些文件与您的 Web 应用程序一起提供和发布（而不是在浏览器中获取已安装的文件）。

常规：

问：如何在 JavaScript
中检测文本区域内的拼写错误答：Internet Explorer 允许使用拼写检查器通过 ActiveX 集成到 Microsoft Word 中，如下所示代码片段。
```
function CheckText(text) {
  var result = new Array;
  var app = new ActiveXObject('Word.Application');
  var doc = app.Documents.Add();
  doc.Content = text;
  for (var i = 1; i <= doc.SpellingErrors.Count; i++) {
    var spellingError = doc.SpellingErrors.Item(i);
    for (var j = 1; j <= spellingError.Words.Count; j++) {
      var word = spellingError.Words.Item(j);
      var error = {};
      error.word = word.Text;
      error.start = word.Start;
      error.length = word.Text.length;
      error.suggestions = new Array;
      var suggestions = word.GetSpellingSuggestions();
      for (var k = 1; k <= suggestions.Count; k++) {
        error.suggestions.push(suggestions.Item(k).Name);
      }
      result.push(error);
    }
  }
  return result;
}
```
^{来源：https://lists.w3.org/Archives/Public/public-webapps/2011AprJun/0516.html}

但是IE / ActiveX / MS-Word并不是您真正要求的，也不是非常跨平台/浏览器，这给我们留下了本地javascript拼写检查库：
Javascript拼写检查方法
 http://code.google.com/p/bjspell/
http://www.javascriptspellcheck.com/
http://ejohn.org/blog/revised-javascript-dictionary-search/
等。
比较/解释它们确实超出了这个答案的范围。
值得注意的是，您希望使用哪种格式的词典！

或者，可以使用外部拼写检查 API 服务（其中服务器处理数据，您将使用 AJAX 与之通信）。
显然，您需要考虑隐私问题！

赏金“要求”要求：

问：确凿的证据
答：我应该找到更多关于这个主题的东西，而不是一些深奥的实验特征。我也没有看到试图将其功能填充到一些（即将到来的）标准化方法/事件标识符等中的库。如前所述，像 TinyMCE 这样的流行库目前也没有其他解决方案。

在“生活水平”/“世界是我们的游乐场”的心态下，当我按下“提交”按钮时，我的答案很可能已经过时了。但即便如此，我也不会在不久的将来在“生产”级别的网站/界面上推荐这样的实验性功能。
问：并获得一个很好的答案，解释如何实现这一目标
（特定于 chrome 还是一般？拼写检查建议或检测到有错别字？
答：除了上述内容，我想不出任何东西（除了 Web 开发人员目前使用的库（见 4））。

希望这有帮助！

我不知道您对此功能的用例是什么，但我在 MashApe 上使用 montanaflynn 的拼写检查 API 进行了演示。该演示监视一个文本区域，当用户暂停键入时，它会通过 API 发送文本进行测试。API 返回包含原始字符串、建议更正的字符串以及包含更正单词及其建议替换项的对象的 JSON。

建议显示在文本区域下方。将鼠标悬停在建议上时，将突出显示输入错误的单词。单击时，拼写错误将替换为建议。

我还添加了一个随机排序功能，在发送字符串之前对字符串中的单词进行打乱，为API的使用增加了一层隐私（它也使用SSL）。API 和 Chrome 都没有使用基于上下文的建议，因此随机播放不会改变结果。

这是 CodePen 的链接： http://codepen.io/aecend/pen/rOebQq

代码如下：

CSS的

<style>

    * {
        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;
    }

</style>

[HTML全

<textarea id="text" placeholder="Type something here..."></textarea>
<div id="words"></div>

JavaScript的

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script>

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

                }

            }

        }

    })();

</script>

我只是使用jQuery来简化这个演示的AJAX请求。这可以在 vanilla JS 中轻松完成。

0赞 Eugene Tiurin 9/23/2015 #4

您可以禁用内部浏览器拼写检查并集成任何其他开源拼写检查库，例如 JavaScript SpellCheck。它包含深度集成可能需要的所有事件，请查看 API 页面。

上一个：如何在 chromedriver 中启用地理位置支持？

下一个：forEach 方法的 Node.childNodes？

如何在 JavaScript 中访问 Chrome 拼写检查建议

How to access Chrome spell-check suggestions in JavaScript

评论

评论

评论