检测某个单词刚刚输入到文本区域

Posted 2023-05-07

【中文标题】检测某个单词刚刚输入到文本区域

【英文标题】：Detect Once a Certain Word Has Just Been Entered in a Textarea

【发布时间】：2012-01-02 15:28:54

【问题描述】：

考虑到 EditArea 和 CodeMirror 的自动完成等功能，我想知道是否像 Dreamweaver 一样，有一种方法可以检测您输入的最后一个单词是否在某个列表中，然后提供相同类型的建议框，但带有函数的参数。我想你会在整个字段上使用正则表达式，或者可能 split() 整个事情（或当前行）然后使用数组的长度属性来查找文本的最后一位，然后做一些涉及 indexOf 的事情手术;但是，这似乎会占用资源。看起来我已经回答了我自己的问题，但它总是有助于充分解释一个人的困境，尤其是在公开场合。一定有比我更好的解决方案。我很感激任何意见。谢谢。

【参考方案1】：

将要匹配的单词列表放入对象中，将文本或选项显示为值。然后在 keyup 或 keypress 上，您可以使用以下函数获取文本区域的最后一个单词：

function showLastWord(id)
  var el = document.getElementById(id);
  var lastWord = el.value.match(/\w+$/);
  return lastWord? lastWord[0] : '';

然后检查单词是否在列表中并适当地做一些事情。

编辑

一个小例子是：

<textarea onkeyup="showHelp(this);"></textarea>
<script>

var getLastWord = (function() 
    re = /\w+$/;
    return function (s)
      var lastWord = s.match(re);
      return lastWord? lastWord[0] : '';
    
());

var keyWords = foo:'foo was typed',bar:'bar was typed';

function showHelp(el) 
  var lastWord = getLastWord(el.value);

  // Check for matching own property of keyWords
  if (keyWords.hasOwnProperty(lastWord)) 

    // Do stuff
    console.log(keyWords[lastWord]);
  

【讨论】：

我只是在想……那些输入的单词没有放在末尾怎么办？假设您在文本中间输入。

然后在每次击键时，您都需要查看值并计算出正在输入或修改的“单词”。如果您想要一个通用的“告诉正在修改的单词”功能，还有更多工作要做。