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';// 设置颜色和默认颜色
          }
        });
    });

组件产出效果：

总结 

到此这篇关于vue使用advanced-mark.js实现高亮文字效果的文章就介绍到这了,更多相关vue高亮文字效果内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！