Performant Textual content Highlighting Plugin – advanced-mark.js

advanced-mark.js is a quick and light-weight JavaScript library for highlighting characters, phrases, phrases, phrases, and even textual content ranges on net pages.

With assist for digital DOMs, advanced-mark.js can update highlights effectively when content material adjustments, making it simpler to integrat throughout varied platforms.

Find out how to use it:

1. Set up & obtain.

# NPM
$ npm i advanced-mark.js

2. Import the advanced-mark.js.

// Vanilla JavaScript
import Mark from '/path/to/mark.es6.js';

// jQuery
import Mark from '/path/to/jquery.mark.es6.js';

<!-- Browser (Vanilla JavaScript) -->
<script src="/dist/mark.js"></script>

<!-- Browser (jQuery) -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/dist/jquery.mark.min.js"></script>

3. The mark() technique permits highlighting textual content by passing the phrases to search for.

// Vanilla JavaScript
var occasion = new Mark(selector/array/aspect/nodelist);
occasion.mark('contentToHighlight', choices);

// jQuery
$(".aspect").mark('contentToHighlight', choices);

4. For extra superior matching, markRegExp() accepts common expressions to focus on textual content patterns.

// Vanilla JavaScript
var occasion = new Mark(selector/array/aspect/nodelist);
occasion.markRegExp(regexHere, choices);

// jQuery
$(".aspect").markRegExp(regexHere, choices);

5. The markRanges() technique highlights particular character ranges.

// Vanilla JavaScript
var occasion = new Mark(selector/array/aspect/nodelist);
occasion.markRanges([{ start: 0, length: 5 }, { start: 12, length: 16 }], choices);

// jQuery
$(".aspect").markRanges([{ start: 0, length: 5 }, { start: 12, length: 16 }], choices);

6. Use the unmark() technique to clear all marks.

// Vanilla JavaScript
var occasion = new Mark(selector/array/aspect/nodelist);
occasion.unmark(choices);

// jQuery
$(".aspect").unmark(choices);

7. Type the highlighted content material in your CSS.

mark {
  /* your kinds right here */
}

8. All potential choices:

const choices = {

  // customized mark aspect 
  aspect : 'mark',

  // extra CSS class appended to the highlighted aspect
  className : '',

  // break time period(s) into separate phrases and seek for every particular person phrase
  separateWordSearch : true,

  // match diacritic characters
  diacritics : true,

  // exclude these characters,
  exclude : [],

  // case delicate or not
  caseSensitive : false,

  // 'partially' e.g. looking out 'a' mark 'a' in phrases 'and', 'again', and 'visa'.
  // 'precisely' This feature is definitely pressured to make use of an accuracy object, as a result of the default phrase boundaries are white areas and begin/finish of a textual content node content material (with acrossElements choice - begin/finish of a context).
  // 'startsWith' e.g. looking out 'pre' mark the entire phrases 'prefix', 'predict', and 'prefab'.
  // 'complementary' e.g. looking out 'a' mark the entire phrases 'and', 'again', and 'visa'.
  accuracy : 'partially',

  // an object with synonyms
  // e.g. { 'one': '1' } - '1' is synonym for 'one' and vice versa.
  // he worth will be an array, e.g. { 'be': ['am', 'is', 'are'] }.
  synonyms : {},

  // discover matches that include delicate hyphen, zero width house, zero width non-joiner and nil width joiner
  ignoreJoiners : false,

  // a string or an array of punctuation characters
  ignorePunctuation : [],

  // disabled: The characters ? and * match itself
  // enabled: The character ? match any non-white-space character zero or one time; The character * match any non-white-space character zero or extra time.
  // withSpaces: The character ? match any character zero or one time; The character * match any character zero or extra time, however as few occasions as potential.
  wildcards : 'disabled',
  
  // seek for matches throughout parts
  acrossElements : false,

  // mix a specified variety of particular person time period patterns into one
  combinePatterns : false,

  // cache textual content nodes to enhance efficiency
  cacheTextNodes : false,

  // restrict matches inside default HTML block parts and/or customized parts
  // tagNames string[] - An array of customized HTML tag names
  // lengthen boolean - true extends default boundary parts by the customized parts in any other case solely the customized parts do have boundaries
  // char string - A customized boundary character. The default is x01.
  blockElementsBoundary : false,
  
  // mark inside shadow DOMs
  shadowDOM : false,

  // mark inside iframes
  iframes : false,

  // max time to attend for iframe(s) to load earlier than skipping
  iframesTimeout : 5000,
  
  // callback to filter matches.
  // textNode Textual content - The textual content node which incorporates the match or with acrossElements choice will be a part of the match
  // time period string - The present time period
  // matchesSoFar quantity - The variety of all wrapped matches to this point
  // termMatchesSoFar quantity - The variety of wrapped matches for the present time period to this point
  // filterInfo object:
  //   match array - The results of RegExp exec() technique
  //   matchStart boolean - point out the beginning of a match AE
  //   execution object - The helper object for early abort:
  //   abort boolean - Setting it to true breaks technique execution
  //   offset quantity - When 'acrossElements: false': absolutely the begin index of a textual content node in joined context. When 'acrossElements: true': the sum of the lengths of separated areas or boundary strings that had been added to the composite string to this point.
  filter : (textNode, time period, marksSoFar, termMarksSoFar, filterInfo) => {
    return true; // should return both true or false
  },

  // callback for every marked aspect
  // markElement HTMLElement - The marked DOM aspect
  // eachInfo object:
  //   match array - The results of RegExp exec() technique
  //   matchStart boolean - Point out the beginning of a match AE
  //   rely quantity - The variety of wrapped matches to this point
  every : (markElement, eachInfo) => {},

  // callback on end
  // totalMarks quantity - The entire variety of marked parts
  // totalMatches quantity - The entire variety of matches
  // termStats object - An object containing a person time period's matches rely
  carried out : (totalMarks, totalMatches, termStats) => {},

  // callbackwhen a time period has no match in any respect
  noMatch : (time period) => {},

  // debug mode
  debug : false,
  log : window.console,

  // choices for the markRegExp() technique

  // mark nesting/overlapping capturing teams
  wrapAllRanges : undefined,

  filter : (textNode, matchString, matchesSoFar, filterInfo) => {
    return true; // should return both true or false
  },
  noMatch : (regex) => {},

  // choices for the markRanges() technique
  
  // mark nesting/overlapping capturing teams
  wrapAllRanges : undefined,

  // whether or not to mark ranges of traces as a substitute of ranges of texts
  markLines: undefined,

  filter : (textNode, vary, matchingString, index) => {
    return true;
  },
  noMatch : (vary) => {},

};

This superior jQuery plugin is developed by angezid. For extra Superior Usages, please test the demo web page or go to the official web site.