在前端开发中，有时候我们需要获取光标所在位置的单词，并对其进行相关操作。这时候，一个名为“word-at-caret”的 npm 包就可以派上用场了。它可以轻松地获取光标所在单词，并且还支持跨浏览器使用。
安装 word-at-caret
首先，我们需要在项目中安装这个 npm 包。在终端中输入以下命令：
npm install word-at-caret
这样，就可以成功安装 word-at-caret 包。
使用 word-at-caret
在使用 word-at-caret 之前，我们需要在需要用到的 js 文件中导入 word-at-caret。方法如下：
const wordAtCaret = require('word-at-caret');默认情况下，word-at-caret 会获取光标所在处的单词。如果需要获取光标点前（或后）的单词，可以通过参数进行调整，如下所示：
// 获取光标所在单词 const word = wordAtCaret(); // 获取光标前第三个单词 const wordBeforeOffset = wordAtCaret(-3); // 获取光标后第二个单词 const wordAfterOffset = wordAtCaret(2);
word-at-caret 示例
下面，我们来看一个具体的案例。我们需要在一个文本框内实时显示当前输入的单词，并在单词为“hello”时弹出提示。
HTML 代码如下：
<div> <h3>输入文本</h3> <textarea id="content"></textarea> </div>
使用 jQuery 可以轻松实现我们的需求。代码实现如下：
-- -------------------- ---- -------
-- -- -------------
----- ----------- - -------------------------
-- ----------
----------------------- ----------- ---------- -
-- --------
----- ---- - --------------
-- ---------
----------------------
-- ------- ----------
-- ----- --- -------- -
------------ ---------
-
---到这里，我们就可以实现一个简单的实时监测输入的单词，并进行相关操作的功能了。
总结
本文介绍了如何使用 npm 包 word-at-caret 来获取光标所在位置的单词，并提供了详细的使用说明和示例。希望可以帮助大家更好地使用该包，在实际开发中提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671138dd3466f61ffe506