介绍
mark.js 是一个用于在页面上高亮显示关键词的小型 JavaScript 库。它可以帮助开发者在搜索结果或文档中标记和突出显示用户查询的关键词，提高用户体验和可读性。
安装
使用 NPM 安装
npm install mark.js --save
直接下载
您还可以从 GitHub 下载最新版本。
使用
mark.js 可以与 jQuery 或纯 JavaScript 一起使用。以下是一个简单的示例：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- -------------- ---------- ------- ----------------------------------------------------------- ------- --------------------------- ------- ------ ------ ------------ ------------ ------- -------------------- -- -------------------------- -------- ------------ - -------------------------- - --- ------- - -------------------- ------------------------------------- --- --- --------- ------- -------展开代码
在这个例子中，我们使用 jQuery 选择器选中了 #content 元素，并使用 mark() 函数将输入框中的关键词进行高亮显示。unmark() 函数可以删除之前标记的高亮显示。
配置
您可以通过传递一个选项对象来自定义 mark.js 的行为。以下是一些可能有用的选项：
-- -------------------- ---- ------- - ---------- ------- -- ---------- ------------ --- -- --------- ---------- --- -- ------ ---------- ------ -- --- ------ --- ----------- ------------ -- ---------------------------------------- ------------- ----- -- -------- ----------- -- -- ------ -展开代码
例如，要将所有匹配项用 <span class="highlight"> 标签进行高亮显示，可以这样设置：
$("#content").unmark({ element: "span", className: "highlight" }).mark(keyword, { element: "span", className: "highlight" });
总结
mark.js 是一个方便易用的 JavaScript 库，能够帮助开发者在页面上高亮显示关键词，提高用户体验和可读性。本文介绍了如何安装和使用 mark.js，并讲解了一些常用的配置选项。希望对您学习和使用 mark.js 有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/35377
