npm 包 mark.js 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

mark.js 是一个用于在页面上高亮显示关键词的小型 JavaScript 库。它可以帮助开发者在搜索结果或文档中标记和突出显示用户查询的关键词，提高用户体验和可读性。

安装

使用 NPM 安装

npm install mark.js --save

直接下载

您还可以从 GitHub 下载最新版本。

使用

mark.js 可以与 jQuery 或纯 JavaScript 一起使用。以下是一个简单的示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>mark.js 示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="mark.min.js"></script>
</head>
<body>
  <input id="keyword" type="text">
  <button id="btn">搜索</button>
  <p id="content">这是一段示例文本。</p>
  <script>
    $(function() {
      $("#btn").click(function() {
        var keyword = $("#keyword").val();
        $("#content").unmark().mark(keyword);
      });
    });
  </script>
</body>
</html>

在这个例子中，我们使用 jQuery 选择器选中了 #content 元素，并使用 mark() 函数将输入框中的关键词进行高亮显示。unmark() 函数可以删除之前标记的高亮显示。

配置

您可以通过传递一个选项对象来自定义 mark.js 的行为。以下是一些可能有用的选项：

// javascriptcn.com 代码示例
{
  "element": "mark", // 高亮显示使用的标签名
  "className": "", // 高亮显示使用的类名
  "exclude": [], // 要排除的元素
  "iframes": false, // 是否在 iframe 内搜索
  "accuracy": "partially", // 匹配精度，可选值：partially、complementary、exactly
  "diacritics": true, // 是否忽略重音符号
  "synonyms": {} // 同义词映射表
}

例如，要将所有匹配项用 <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