前言
在进行网页开发过程中，实现文本编辑功能是一项重要且常见的任务。其中，Mark.js 是一个快速高效的 JavaScript 库，用于在页面上对文本应用标记和样式。由于其易于使用和可扩展性，Mark.js 受到许多开发者的青睐。在使用 Mark.js 时，我们通常需要引入其类型定义文件，以获得更好的开发体验。本文将详细介绍如何使用 npm 包 @types/mark.js，以及如何运用这些类型定义文件编写优秀的前端代码。
安装
在开始使用 @types/mark.js 之前，我们需要先在项目中安装 Mark.js，可以使用 npm 进行安装：
npm install mark.js
接下来，我们需要安装 @types/mark.js，以获得 TypeScript 定义文件：
npm install @types/mark.js
引入
在安装好 Mark.js 和对应的类型定义文件后，我们可以在 TypeScript 中引入 Mark.js，以获得更良好的类型检查和智能提示。具体来说，我们需要在代码中添加如下语句：
import * as Mark from 'mark.js';
随后，我们就可以愉快地使用 Mark.js 了。
API
在 Mark.js 中，最常用的 API 是 Mark 的构造函数。我们可以使用以下代码创建一个 Mark 实例：
const mark = new Mark(document.querySelector("body"));其中，构造函数的参数是需要标记的区域，可以是一个元素节点或一个选择器字符串。
mark.mark(searchText: string, options?: MarkOptions)
使用此函数可以将目标文本中与搜索文本相匹配的部分标记。该函数接受两个参数：搜索文本和可选的选项对象。选项对象用于指定标记的样式和其他设置，具体设置请参考官方文档。
以下代码演示了如何标记一段文本：
mark.mark("searchText", {
className: "mark",
separateWordSearch: false
});mark.unmark(options?: UnmarkOptions)
使用此函数可以删除当前实例上的所有标记。该函数接受一个可选的选项对象，用于指定删除标记时使用的样式和其他设置。
以下代码演示了如何删除所有标记：
mark.unmark({
done: function() {
console.log("unmarked!");
}
});示例
下面的示例演示了如何使用 Mark.js 和 @types/mark.js。我们首先在 HTML 页面中创建一个输入框和一个段落，在输入框中输入需要搜索的文本，然后点击“搜索”按钮。搜索结束后，匹配的部分将以指定的样式标记。
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
--------------------- ----------
-------
------
-----
------ ----------- ---------- ----------------------- --
------- ------------- -----------------------
------
-- -------------
--- ----- ----- --- ----- ---- --- ---- ----
----
------- -----------------------
-------
-------以下是 TypeScript 代码：
-- -------------------- ---- -------
------ - -- ---- ---- ----------
----- ---- - --- -----------------------------------------
----------------------------------------------------------- -- -- -
----- ---------- - -----------------------------------------------------------
-------------
----- ---------- -
--------------------- -
---------- -------
------------------- -----
---
-
---
---在此示例中，我们首先创建一个 Mark 实例，并将其应用于 id 为“content”的段落中。然后，我们监听“搜索”按钮的点击事件，在单击按钮时使用输入框中的文本执行新的搜索。当在搜索之前应用了旧标记时，我们首先使用 mark.unmark 删除旧标记，随后使用 mark.mark 进行新的标记。
结论
@types/mark.js 是使用 Mark.js 进行文本标记的必备工具。使用类型定义文件，我们可以获得更好的开发体验和更准确的类型检查，从而在开发过程中提高效率和代码质量。希望本文能够对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f091f7b403f2923b035c011