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

Posted 2023-02-22

【中文标题】如何在 JavaScript 中访问 Chrome 拼写检查建议

【英文标题】：How to access Chrome spell-check suggestions in JavaScript

【发布时间】：2015-08-22 15:09:14

【问题描述】：

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

【问题讨论】：

我几乎可以肯定在 Chrome 上使用 Javascript 访问拼写检查功能是不可能的。但如果您的项目允许，您可以使用第三方 API，例如：market.mashape.com/montanaflynn/spellcheck

这可能是一个解决方案：***.com/questions/1884829/…

好吧，如果你真的因为某种原因需要通过浏览器拼写检查引擎来做，你可以尝试使用 webrtc 的东西来获取页面的截图，然后识别上面的红色波浪。但是……你知道的。

你至少可以记住替换并在下次自动应用它们。

【参考方案1】：

如何访问 Chrome 对拼写错误的单词的拼写检查建议？

据我所知，you cannot。为了更全面地回答，我还要提一下相关问题：

曾经有一个非官方的 Google 拼写检查 API that has disappeared 您可以download but not access Chrome 的内置字典 有no open API for Google's dictionary

有与此相关的事件吗？

不，contextmenu 事件也没有为此提供任何有用的信息：它没有拼写检查信息，您无法阅读上下文菜单项列表（其中可能包含拼写建议）。 change 事件也不提供拼写检查信息。

如何在 JavaScript 中检测文本区域内的拼写错误？

您可以自己编写代码，也可以使用第三方库。关于这个主题还有其他 Stack Overflow 问题，或者您可以自己搜索。相关 Stack Overflow 问题包括：

Javascript Spell Checking Methods javascript spell checker recommendations Javascript based spell-checkers for web applications Add spell check to my website Need Client side spell checker for DIV javascript spell checking

【讨论】：

很好的回答，虽然我有点失望地发现我是对的（这基本上是不可能的）。直到最后一天我才会颁发赏金，但在此期间你确实有一个赞成票。 :)

自从 5 年前回答了这个问题以来，我想知道有什么改变吗？我们现在可以访问浏览器的拼写检查吗？另外，像 *** 这样的网站如何在其“评论”字段中处理拼写检查？

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

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

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

【参考方案2】：

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

你似乎在问：

“Google Chrome”/“Chromium”特定：

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

以下是其中的一些部分：

这个 API 可以成为网络平台的一部分吗？ 拼写检查不太可能成为 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.      

重点？帮助社区为 Zulu、Klingon 等创建自定义词典，因为大约 20-30% 的拼写检查错误报告与不受支持的语言有关。

现在我们不要将 Chrome 的 SpellCheck API（上图）与 Chrome/Webkit 的 SpellCheck API 混淆（嗯？说什么？）： Hironori Bono（Google Chrome 的软件工程师）proposed an API 大约在 2011 年左右，还有一些 related bug rapports 和一个 patch 曾经（/现在？）在 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”（-like）事件答： 如上所述，Chrome 似乎没有此类事件。 HTM5 目前仅公开了对支持拼写检查的元素启用或禁用拼写检查的功能。 问：如何针对拼写错误的单词访问 Chrome 的拼写检查建议答：如上所述：您似乎可以'吨。它似乎与几乎重复的问题的答案相同：How can I access Chrome's spell-check dictionary? 注意到“TinyMCE's spellchecker was previously provided by 'hacking' a Chrome toolbar API owned by Google, against Google's own legal usage policies. This spellchecking service has been discontinued permanently.”可能会很有趣。现在，如果您在网上搜索，您可能会发现他们是如何做到这一点的，但这似乎并不是最好的方法（并在这里提倡）。 使用 javascript 拼写检查库，您可以使用 Chrome 的字典（因此您不需要维护字典），但您必须提供这些文件并将其与您的网络应用程序一起发送（而不是在浏览器中获取已安装的文件） )。

一般：

问：如何在 JavaScript 中检测文本区域内的拼写错误答： Internet Explorer 允许使用拼写检查器 通过 ActiveX 集成到 Microsoft Word 中，如下所示 代码sn-p。

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 Spell Checking Methodshttp://code.google.com/p/bjspell/http://www.javascriptspellcheck.com/http://ejohn.org/blog/revised-javascript-dictionary-search/ 等等 比较/解释它们确实超出了此答案的范围。 值得注意的是您希望使用哪种格式的字典！

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

赏金-“要求”要求：

问：确凿的证据答：我应该找到一些关于这个主题的东西，而不是一些深奥的实验特征。我也没有看到库试图将其功能填充到一些（即将推出的）标准化方法/事件标识符等中。 如前所述，像 TinyMCE 这样的流行库目前也没有其他解决方案。 在“生活标准”/“世界是我们的游乐场”的心态下，当我按下“提交”按钮时，我的答案很可能已经过时了。但即便如此，我也不会在不久的将来在“生产”级网站/界面上推荐这样的实验性功能。 问： 并获得一个很好的答案，说明如何实现这一目标 （特定于 chrome 还是一般？拼写检查建议或检测到有错字？）答：除了上述之外，我想不出任何东西（除了网络上的库- 开发人员目前使用（见 4））。

希望这会有所帮助！

【讨论】：

感谢您非常详尽的回答！ :)

【参考方案3】：

没有用于访问 Chrome 拼写检查建议的 API，也不会在输入错误的单词时触发任何事件。但是，事件可以实现。

我不知道您使用此功能的用例是什么，但我使用montanaflynn's Spellcheck API on MashApe 进行了演示。该演示会监视一个文本区域，当用户暂停输入时，它会通过 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 中轻松完成。

【参考方案4】：

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