在前端开发中，经常需要对用户输入的文本进行高亮、标记等操作，这时可以使用 jquery-highlighttextarea 这个 npm 包来实现。本文将详细介绍如何使用该包，并提供示例代码。
安装
首先安装 jquery-highlighttextarea：
npm install jquery-highlighttextarea
或者通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/jquery-highlighttextarea@1.0.0/dist/jquery.highlighttextarea.min.js"></script>
使用
基本用法
在 HTML 中创建一个 textarea 元素：
<textarea id="input"></textarea>
然后在 JavaScript 中调用 highlightTextarea 方法：
$('#input').highlightTextarea();这样就可以在 textarea 中输入文本并选择一段文本，此时会出现一个弹出框，可以选择标记颜色等选项，点击确定后，所选文本将被高亮。
如果需要使用多种标记颜色，可以在调用方法时传入参数：
$('#input').highlightTextarea({
colors: ['yellow', 'blue', 'green']
});这里使用了三种颜色，当选择其中一种颜色来标记文本时，会在文本上显示相应的颜色块。
自定义选项
除了标记颜色外，还可以自定义标记类型（如下划线、删除线等）和标记样式（如边框、背景色等）：
-- -------------------- ---- -------
-------------------------------
------ ---------
------ -
---------------- -------
------- ---- ----- ----
--
------- -
------- -- ---- -- ---------- -------------
------- --- ---- --- ---------- --------- ------ ---------------- ----------------
-
---这里定义了两个标记区域，第一个从文本开头到第五个字符，使用下划线样式（自定义的样式需要在 CSS 中定义），第二个从第十个到第二十个字符，使用删除线样式，并且文本会被标记为添加了 strike 类名。
事件监听
可以通过监听 highlighttextarea:changed 事件来获取用户输入和标记操作的相关信息：
$('#input').highlightTextarea()
.on('highlighttextarea:changed', function(e, data) {
console.log(data.value); // 用户输入的文本
console.log(data.ranges); // 所有标记区域的信息
});示例代码
HTML：
<textarea id="input"></textarea>
CSS：
.underline {
text-decoration: underline;
}
.strike {
text-decoration: line-through;
}JavaScript：
-- -------------------- ---- -------
-------------------------------
------- ---------- ------- ---------
------- -
------- -- ---- -- ---------- -------------
------- --- ---- --- ---------- --------- ------ ---------------- ----------------
-
--
-------------------------------- ----------- ----- -
------------------------
-------------------------
---总结
jquery-highlighttextarea 是一个实用的 npm 包，可以方便地对用户输入的文本进行高亮、标记等操作。本文介绍了其基本用法和一些高级选项，并提供了示例代码，希望可以帮助读者更好地使用该包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38337