組件介紹-advanced-mark.js：

advanced-mark.js 是一個用于 Vue 的高亮文字組件，它可以幫助你在文本中高亮顯示指定的關鍵詞或短語。
組件地址：https://angezid.github.io/advanced-mark.js/doc-v2/getting-started.html

• 主要功能：
• 關鍵詞高亮：在文本中高亮顯示一個或多個關鍵詞
• 多關鍵詞支持：可以同時高亮多個不同的關鍵詞
• 自定義樣式：允許自定義高亮部分的樣式
• 大小寫敏感選項：可選擇是否區(qū)分大小寫
• 正則表達式支持：支持使用正則表達式進行復雜匹配
• 可以設置css名稱進行限制高亮區(qū)域

下載安裝：

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（）獲取節(jié)點列表，包含多個單個元素的數(shù)組（請注意，在內部，數(shù)組按元素在文檔中的位置排序）
  字符串選擇器（內部調用document.querySelectorAll（））
  例：const allNodes =document.querySelectorAll(selector)）；
• className 【string】：標記元素的自定義類。
• separateWordSearch【boolean or string】：當它設置為true時，如果搜索字符串包含多個單詞，它會將字符串按空格拆分為單獨的單詞，并突出顯示單個單詞而不是整個字符串。
  它也適用于搜索數(shù)組中的每個字符串。
  當它設置為“separateWordSearch ”時，它會保留雙引號周圍的術語，防止它們分成單獨的單詞。
  當設置為‘false’的時候，指定將術語不分解為單獨的單詞。
• diacritics【boolean】：是否匹配變音字符。
• caseSensitive【boolean】：是否搜索區(qū)別大小寫。
• accuracy【string or object】：兩種模式值，
  -字符串模式：
  partially：部分匹配，例如搜索"a"時，會高亮所有包含該字母的單詞（如"and"、“back"中 的"a”）。
  exactly：強制精確匹配，默認通過空格或文本節(jié)點的起止位置作為邊界（需配合acrossElements選項使用）。
  startsWith：前綴匹配，例如搜索"pre"會完整高亮以該前綴開頭的單詞（如"prefix"、“predict”）。
  complementary：互補匹配，例如搜索"a"時，僅高亮完整包含該字符且未被邊界分隔的單詞（如"and"、“visa”）。
  -對象模式：
  通過 value 指定匹配模式（必須為上述四個字符串值之一）
  通過 limiters 自定義邊界字符，例如：

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

• wildcards【string】：匹配空格，enabled 模式忽略空格；withSpaces 模式允許空格作為有效字符；disabled 完全禁用通配符功能；
• ignoreJoiners【boolean】：是否查找包含軟連字符、零寬度空格、零寬度非連接符和零寬度連接符的匹配項。
• synonyms【object】：該對象用于建立詞匯間的雙向/單向關聯(lián)關系，支持兩種配置形式：
• each：每個標記元素的回調。
  例：

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

注: 如果想要多個部分分散使用高亮功能，那么可以使用數(shù)組形式進行存儲，并遍歷循環(huán)。

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[注：接受高亮詞的數(shù)組], {
          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實現(xiàn)高亮文字效果的文章就介紹到這了,更多相關vue高亮文字效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論