屈服于拼写检查

Question

这个标题可能有点误导; 我的拼写检查器更多地关注格式而不是拼写(大写,标点符号和空格,撇号,将互联网俚语转换为完整单词,经常加扰的单词等).但是基本原则适用.

基本上,我正在构建的JS/jQuery检查器会在键入单词时更正单词(在单词之后键入空格或标点符号之后).

然而,就像任何自动校正一样,它必然会遇到错误.我甚至没有考虑创建能够确定"它"或"它"在特定情况下是否更合适的功能(尽管如果存在这样的插件或代码片段,请指向一个).

所以我想让它成为一个"让步"的自动更正(因为缺乏对更好名字的了解).基本上;

1. 用户在单词中键入将启动检查器并键入空格.
2. 检查员纠正了这个词.
3. 用户认为这是一个错误并将其纠正(通过对整个单词或其中的一部分进行退格,或者突出显示它或者他们觉得编辑它们感觉很舒服).
4. 用户继续键入,并且检查器不再触摸该单词的该实例.

现在最简单的方法是完全禁用对该单词的检查,但我希望检查程序能够纠正它的未来实例.我正在寻找的将检测用户编辑自动更正的单词(无论是在打字后或之后)回到自动校正之前的状态,然后学习单独留下该单词的特定实例.

我甚至不知道从哪里开始.我认为每个单词都包含在一个范围内是自满的,自动更正的单词包含一个特殊类和一个包含原始单词的data-*属性,监听自动更正单词的编辑,如果它被编辑回等于数据 - *value,添加一个类,使其脱离未来的自动更正轮次.

我想虽然这可能是不必要的复杂,或者至少不是阻力最小的路径.这样做最聪明的方法是什么？

Answer 1

span乍一看,您建议的方法(将a中的每个单词分开并在其中存储其他数据)似乎是最明智的方法.在编辑器级别,你只需要确保所有的文字是里面的一些span,和他们每个人只包含一个字(如果需要拆分的话).在单词级别上,只需监听spans(绑定input和propertyChange)中的更改并根据其类/数据执行操作.

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

所以,我建议采用以下方法:

• 保留一个单词列表Array,其中每个单词都存储当前值和原始值;
• 当内容textarea发生变化时,保持一组不变的单词并重做其余的单词;
• 只有当插入符号位于非单词字符(改进空间)之后且您没有击中时才应用拼写检查backspace;
• 如果用户对校正不满意,点击backspace一次将撤消它,除非修改,否则不会再次检查.
  • 如果一次完成许多更正(例如,如果大量文本被复制粘贴),则每个backspace校正将撤消一次校正,直到没有人离开.
  • 点击任何其他键将进行更正,因此如果用户仍然不满意,他将不得不返回并再次更改它.
  • 注意:与OP要求不同,如果用户输入非单词字符,则更改后的版本将再次自动更正; 他需要打backspace一次才能"保护"它.

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

概念验证的步骤详细解释:

• 保留一个单词列表Array,其中每个单词都存储当前值和原始值;

  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) { ... }
  };