标题可能有点误导；我的拼写检查器更注重格式而不是拼写(大写字母、标点符号和空格、撇号、将互联网俚语转换为完整单词、经常被打乱的单词等)。但是，基本原则适用。

基本上，我正在构建的 JS/jQuery 检查器会在输入单词时纠正单词(在单词后输入空格或标点符号之后)。

但是，就像任何自动更正一样，它必然会出错。我什至没有考虑创建功能来确定在给定情况下“它”或“它是”是否更合适(尽管如果存在这样的插件或代码片段，请给我指出一个)。

所以我想让它成为一个“屈服”的自动更正(因为不知道更好的名字)。基本上;

1. 用户输入一个会触发检查器的词，然后输入一个 空间。
2. 检查员纠正了这个词。
3. 用户认为这是一个错误 并更正它(通过退格整个单词或部分单词， 或突出显示它，或者以他们觉得舒服的方式对其进行编辑)。
4. 的 用户继续输入，检查器不会再次触及该单词的那个实例。

现在最简单的当然是完全禁用对该词的检查，但我希望检查器更正它的 future 实例。我正在寻找的是检测用户将自动更正的词(无论是在键入后还是稍后)编辑回自动更正之前的状态，然后学会不理会该词的特定实例。

我什至不知道从哪里开始。我在想一个 contenteditable，每个单词都包含在一个 span 中，自动更正的单词有一个特殊的类和一个包含原始单词的 data-* 属性，听取对自动更正单词的编辑，如果它被编辑回等于 data-*值，添加一个将其排除在未来自动更正轮次之外的类。

我在想这可能会不必要地复杂化，或者至少不是阻力最小的路径。这样做最明智的方法是什么？

最佳答案

您建议的方法(在 span 中分隔每个单词并在其中存储额外的数据)乍一看似乎是最明智的方法。在编辑器级别，您只需要确保所有文本都在某个 span 内，并且每个文本仅包含一个单词(必要时将其拆分)。在单词级别，只需监听 span 的变化(绑定(bind) input 和 propertyChange)并根据其类/数据采取行动。

然而，真正的痛苦在于保持插入符号的位置一致。当您更改 textarea 或带有 contentEditable 的元素的内容时，插入符号的移动相当不可预测，并且没有简单的(跨浏览器)方式来跟踪插入符。我在 SO 和其他地方搜索了解决方案，我找到的最简单的工作解决方案是 this blog post .不幸的是，它仅适用于 textarea，因此无法使用“跨度中的每个单词”解决方案。

因此，我建议采用以下方法:

• 在数组中保存单词列表，其中每个单词都存储当前值和原始值；
• 当textarea的内容发生变化时，保留不变的那组词，其余重做；
• 仅当插入符号紧跟在非单词字符之后(有改进空间)并且您没有按退格键时才应用拼写检查；
• 如果用户对更正不满意，按一次 backspace 将撤消它，并且不会再次检查除非修改。
  • 如果一次进行了多次更正(例如，如果大量文本是复制粘贴的)，每个 backspace 都会撤消一次更正，直到没有人留下为止。
  • 点击任何其他键将提交更正，因此如果用户仍然不满意，他将不得不返回并再次更改。
  • 注意:与 OP 要求不同，如果用户输入非单词字符，更改后的版本将再次自动更正；他需要按一次 backspace 来“保护”它。

我在 jsFiddle 创建了一个简单的概念验证.详情如下。请注意，您可以将它与其他方法结合使用(例如，检测“向下箭头”键并显示带有一些自动更正选项的菜单)等。

proof-of-concept 的步骤详细解释:

• 在数组中保存单词列表，其中每个单词都存储当前值和原始值；

  var words = [];
  

  此正则表达式将文本拆分为单词(每个单词都有一个 word 属性和一个 sp 属性；后者存储紧跟其后的非单词字符)

  delimiter:/^(\w+)(\W+)(.*)$/,
  ...
  regexSplit:function(regex,text) {
      var ret = [];
      for ( var match = regex.exec(text) ; match ; match = regex.exec(text) ) {
          ret.push({
              word:match[1],
              sp:match[2],
              length:match[1].length + match[2].length
          });
          text = match[3];
      }
      if ( text )
          ret.push({word:text, sp:'', length:text.length});
       return ret;
  }
  

• 当textarea的内容发生变化时，保留不变的那组词，其余重做；

      // Split all the text
      var split = $.autocorrect.regexSplit(options.delimiter, $this.val());
      // Find unchanged words in the beginning of the field
      var start = 0;
      while ( start < words.length && start < split.length ) {
          if ( !words[start].equals(split[start]) )
              break;
          start++;
      }
      // Find unchanged words in the end of the field
      var end = 0;
      while ( 0 < words.length - end && 0 < split.length - end ) {
          if ( !words[words.length-end-1].equals(split[split.length-end-1]) ||
               words.length-end-1 < start )
              break;
          end++;
      }
      // Autocorrects words in-between
      var toSplice = [start, words.length-end - start];
      for ( var i = start ; i < split.length-end ; i++ )
          toSplice.push({
              word:check(split[i], i),
              sp:split[i].sp,
              original:split[i].word,
              equals:function(w) {
                  return this.word == w.word && this.sp == w.sp;
              }
          });
      words.splice.apply(words, toSplice);
      // Updates the text, preserving the caret position
      updateText();
  

• 仅当插入符号紧跟在非单词字符之后(有改进空间)并且您没有按 backspace 时才应用拼写检查；

  var caret = doGetCaretPosition(this);
  var atFirstSpace = caret >= 2 &&
                     /\w\W/.test($this.val().substring(caret-2,caret));
  function check(word, index) {
      var w = (atFirstSpace && !backtracking ) ?
              options.checker(word.word) :
              word.word;
      if ( w != word.word )
          stack.push(index); // stack stores a list of auto-corrections
      return w;
  }
  

• 如果用户对更正不满意，按一次 backspace 将撤消它，并且不会再次检查它除非修改。

  $(this).keydown(function(e) {
      if ( e.which == 8 ) {
          if ( stack.length > 0 ) {
              var last = stack.pop();
              words[last].word = words[last].original;
              updateText(last);
              return false;
          }
          else
              backtracking = true;
          stack = [];
      }
  });
  

• updateText 的代码只是将所有单词再次连接成一个字符串，并将值设置回 textarea。如果没有任何更改，插入符号将被保留，或者放置在最后一次自动更正完成/撤消之后，以说明文本长度的变化:

  function updateText(undone) {
      var caret = doGetCaretPosition(element);
      var text = "";
      for ( var i = 0 ; i < words.length ; i++ )
          text += words[i].word + words[i].sp;
      $this.val(text);
      // If a word was autocorrected, put the caret right after it
      if ( stack.length > 0 || undone !== undefined ) {
          var last = undone !== undefined ? undone : stack[stack.length-1];
          caret = 0;
          for ( var i = 0 ; i < last ; i++ )
              caret += words[i].word.length + words[i].sp.length;
          caret += words[last].word.length + 1;
      }
      setCaretPosition(element,caret);
  }
  

• 最终的插件结构:

  $.fn.autocorrect = function(options) {
      options = $.extend({
          delimiter:/^(\w+)(\W+)(.*)$/,
          checker:function(x) { return x; }
      }, options);
      return this.each(function() {
          var element = this, $this = $(this);
          var words = [];
          var stack = [];
          var backtracking = false;
          function updateText(undone) { ... }
          $this.bind("input propertyChange", function() {
              stack = [];
              // * Only apply the spell check if the caret...
              // * When the contents of the `textarea` changes...
              backtracking = false;
          });
          // * If the user was unsatisfied with the correction...
      });
  };
  $.autocorrect = {
      regexSplit:function(regex,text) { ... }
  };
  

关于javascript - 产生拼写检查器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12387910/