vue实现高亮文字效果——advanced-mark.js

组件介绍-advanced-mark.js：

advanced-mark.js 是一个用于 Vue 的高亮文字组件，它可以帮助你在文本中高亮显示指定的关键词或短语。
组件地址：https://angezid.github.io/advanced-mark.js/doc-v2/getting-started.html

• 主要功能：
• 关键词高亮：在文本中高亮显示一个或多个关键词
• 多关键词支持：可以同时高亮多个不同的关键词
• 自定义样式：允许自定义高亮部分的样式
• 大小写敏感选项：可选择是否区分大小写
• 正则表达式支持：支持使用正则表达式进行复杂匹配
• 可以设置css名称进行限制高亮区域

下载安装：

npm install advanced-mark.js

或

yarn add advanced-mark.js

要初始化新实例，必须使用：

var instance = new Mark(context);
instance.mark('lorem');

使用方法介绍：

• element 【string】：获取document，通过document.getElementById（）或document.querySelector（）获取的单个元素，或document.querySelectorAll（）获取节点列表，包含多个单个元素的数组（请注意，在内部，数组按元素在文档中的位置排序）
  字符串选择器（内部调用document.querySelectorAll（））
  例：const allNodes =document.querySelectorAll(selector)）；
• className 【string】：标记元素的自定义类。
• separateWordSearch【boolean or string】：当它设置为true时，如果搜索字符串包含多个单词，它会将字符串按空格拆分为单独的单词，并突出显示单个单词而不是整个字符串。
  它也适用于搜索数组中的每个字符串。
  当它设置为“separateWordSearch ”时，它会保留双引号周围的术语，防止它们分裂成单独的单词。
  当设置为‘false’的时候，指定将术语不分解为单独的单词。
• diacritics【boolean】：是否匹配变音字符。
• caseSensitive【boolean】：是否搜索区别大小写。
• accuracy【string or object】：两种模式值，
  -字符串模式：
  partially：部分匹配，例如搜索"a"时，会高亮所有包含该字母的单词（如"and"、“back"中 的"a”）。
  exactly：强制精确匹配，默认通过空格或文本节点的起止位置作为边界（需配合acrossElements选项使用）。
  startsWith：前缀匹配，例如搜索"pre"会完整高亮以该前缀开头的单词（如"prefix"、“predict”）。
  complementary：互补匹配，例如搜索"a"时，仅高亮完整包含该字符且未被边界分隔的单词（如"and"、“visa”）。
  -对象模式：
  通过 value 指定匹配模式（必须为上述四个字符串值之一）
  通过 limiters 自定义边界字符，例如：

  { value: "exactly", limiters: ",.;:?!'\"()" }
  

• wildcards【string】：匹配空格，enabled 模式忽略空格；withSpaces 模式允许空格作为有效字符；disabled 完全禁用通配符功能；
• ignoreJoiners【boolean】：是否查找包含软连字符、零宽度空格、零宽度非连接符和零宽度连接符的匹配项。
• synonyms【object】：该对象用于建立词汇间的双向/单向关联关系，支持两种配置形式：
• each：每个标记元素的回调。
  例：

  each: function (markElement, eachInfo) {
  // markElement：当前被高亮的 DOM 元素。
  // eachInfo：包含匹配信息的对象，其中 eachInfo.match[0] 是匹配到的关键词
  const keyword = eachInfo.match[0];
  markElement.style.backgroundColor =
  keywordColors[keyword] || '#FBD1D5';
   }
  

注: 如果想要多个部分分散使用高亮功能，那么可以使用数组形式进行存储，并遍历循环。

const  classNames=['.css1','.css2','.css3',...]
   const allNodes = classNames.flatMap((selector) =>
      document.querySelectorAll(selector));
    allNodes.forEach((node) => {
      // 在指定的 DOM 元素中查找并高亮指定的关键词
      const instance = new Mark(node); //new一个新对象
      instance.unmark(); // 清除之前的标记
        instance.mark(highlightKeywords[注：接受高亮词的数组], {
          separateWordSearch: false, // false指定将术语不分解为单独的单词
          each: function (markElement, eachInfo) {
            // markElement：当前被高亮的 DOM 元素。
            // eachInfo：包含匹配信息的对象，其中 eachInfo.match[0] 是匹配到的关键词
            const keyword = eachInfo.match[0];
            markElement.style.backgroundColor =
              keywordColors[keyword] || '#FBD1D5';// 设置颜色和默认颜色
          }
        });
    });

组件产出效果：