組件介紹-advanced-mark.js：

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

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

下載安裝：

npm install advanced-mark.js

或

yarn add advanced-mark.js

要初始化新實(shí)例，必須使用：

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

使用方法介紹：

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

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

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

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

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

const  classNames=['.css1','.css2','.css3',...]
   const allNodes = classNames.flatMap((selector) =>
      document.querySelectorAll(selector));
    allNodes.forEach((node) => {
      // 在指定的 DOM 元素中查找并高亮指定的關(guān)鍵詞
      const instance = new Mark(node); //new一個(gè)新對(duì)象
      instance.unmark(); // 清除之前的標(biāo)記
        instance.mark(highlightKeywords[注：接受高亮詞的數(shù)組], {
          separateWordSearch: false, // false指定將術(shù)語不分解為單獨(dú)的單詞
          each: function (markElement, eachInfo) {
            // markElement：當(dāng)前被高亮的 DOM 元素。
            // eachInfo：包含匹配信息的對(duì)象，其中 eachInfo.match[0] 是匹配到的關(guān)鍵詞
            const keyword = eachInfo.match[0];
            markElement.style.backgroundColor =
              keywordColors[keyword] || '#FBD1D5';// 設(shè)置顏色和默認(rèn)顏色
          }
        });
    });

組件產(chǎn)出效果：

總結(jié) 

到此這篇關(guān)于vue使用advanced-mark.js實(shí)現(xiàn)高亮文字效果的文章就介紹到這了,更多相關(guān)vue高亮文字效果內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論