如何使用JavaScript捕获浏览器输入框中被标记的拼写错误单词

问题 #

在HTML中，当为输入框启用spellcheck全局属性（即设置spellcheck="true"）时，绝大多数浏览器会用红色点状下划线标注拼写错误的单词。
有没有办法通过JavaScript（或其他方案）记录浏览器已经标记为拼写错误的单词？
开发者可以自行实现拼写检查功能复刻浏览器的行为，但有没有方法可以直接复用客户端浏览器已经完成的拼写检查结果？
我希望最终能得到类似misspells = ['hapy', 'delerious', 'tipical']的拼写错误数组，最好还能将浏览器本地显示的错误标记替换为保存文本中的某类标签，方便后续解析处理。

回答 #

目前没有标准化的原生浏览器API可以直接读取内置拼写检查器标记的错误单词列表，浏览器的拼写检查逻辑属于内核内部实现，默认不向外暴露这部分数据，主要是出于隐私保护、避免不同浏览器实现差异导致兼容问题的考量。

你可以用以下两种方案实现需求：

• 生产环境推荐：用前端拼写检查库自主实现
  可以用typo.js这类纯JS实现的拼写检查库，自行加载对应语言的词典，完全自主控制校验逻辑：
  1. 监听输入框的input事件，将输入内容按分隔符拆分为单个单词
  2. 遍历单词列表，调用库的校验方法筛选出错词，存入你需要的misspells数组
  3. 若需要自定义错误标记，可以将输入框替换为contenteditable富文本容器，用自定义标签（比如<span class="spell-error">）包裹错误单词，自定义下划线样式对齐原生显示效果，后续提取内容时也可以直接识别这类标签做解析。
• 测试用曲线方案（兼容性极差，不建议上线）
  部分旧版Chromium内核浏览器可以通过模拟全选文本、调用document.execCommand('Copy')复制带格式的内容，再读取剪贴板内容识别拼写错误标记，但该方法受浏览器权限、内核版本影响极大，目前绝大多数现代浏览器已经禁用了非用户主动触发的execCommand调用，仅能作为特殊场景下的测试方案使用。

内容的提问来源于stack exchange，提问作者Mallory-Erik