Easy JavaScript Plugin For Word Highlighting In The Document – mark.js

mark.js is a lightweight and easy-to-use JavaScript library used for highlighting specified words/strings/phrases in the selected element. Good for search keyword highlighting in your search result page.

Also available for jQuery.

Basic usage:

Just include the mark.js library on the webpage and we’re ready to go.

<script src="dist/mark.js"></script>

Create a new Mark instance and specify the target element you want to search through.

var instance = new Mark(document.getElementById("container"));

Specify the keyword to be marked.

instance.mark("lorem");

Style the highlighted keyword in the CSS.

mark {
  background: orange;
  color: black;
}

You can also highlight custom regular expressions using markRegExp() method as folllows:

instance.markRegExp(regexp, options);

Available options for the mark method.

// HTML element to wrap matches, e.g. span
element: "mark",  
// A class name that will be appended to element
className: "",   
// An array with exclusion selectors. 
// Elements matching those selectors will be ignored. 
// Example: "exclude": [".ignore", "*[data-ignore]"]
exclude: [],
// Whether to search for each word separated by a blank instead of the complete term
separateWordSearch: true,
// Either one of the following string values:
// "partially": When searching for "lor" only "lor" inside "lorem" will be marked
// "complementary": When searching for "lor" the whole word "lorem" will be marked
// "exactly": When searching for "lor" only those exact words with a word boundary will be marked. In this example nothing inside "lorem". This value is equivalent to the previous option wordBoundary
// Or an object containing two properties:
// "value": One of the above named string values
// "limiters": A custom array of string limiters for accuracy "exactly" or "complementary". 
accuracy: "partially",
// If diacritic characters should be matched. For example "piękny" would also match "piekny" and "doner" would also match "döner"
diacritics: true,
// An object with synonyms. The key will be a synonym for the value and the value for the key. 
// Example: "synonyms": {"one": "1"} will add the synonym "1" for "one" and vice versa
synonyms: {},
// Whether to search also inside iframes. 
// If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. 
// If you don't want to search inside specific iframes (e.g. facebook share), you can pass a filter selector that matches these iframes.
iframes: false,  
// The maximum ms to wait for a load event before skipping an iframe. 
// Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired
iframesTimeout: 5000,
// Whether to search for matches across elements
"acrossElements": false,
// Whether to search case sensitive
"caseSensitive": false,
//  Whether to also find matches that contain soft hyphen, zero width space, zero width non-joiner and zero width joiner. They're used to indicate a point for a line break where there isn't enough space to show the full word.
"ignoreJoiners": false,
// An array of punctuation mark strings. These punctuation marks can be between any characters, e.g. setting this option to ["'"] would match "Worlds", "World's" and "Wo'rlds". 
// One or more apostrophes between the letters would still produce a match (e.g. "W'o''r'l'd's"). A typical setting for this option could be as follows: ":;.,-–—‒_(){}[]!'\"+=".split("")
ignorePunctuation: [],
// "disabled": Disable wildcard usage
// "enabled": When searching for "lor?m", the "?" will match zero or one non-space character (e.g. "lorm", "loram", "lor3m", etc). When searching for "lor*m", the "*" will match zero or more non-space characters (e.g. "lorm", "loram", "lor123m", etc).
// "withSpaces": When searching for "lor?m", the "?" will match zero or one space or non-space character (e.g. "lor m", "loram", etc). When searching for "lor*m", the "*" will match zero or more space or non-space characters (e.g. "lorm", "lore et dolor ipsum", "lor: m", etc).
wildcards: "disabled",
// A callback for each marked element. 
// This function receives the marked jQuery element as a parameter
each: function(){},   
// A callback function that will be called when there are no matches. Receives the not found term as a parameter
noMatch: function(){},
// A callback to filter or limit matches. It will receive the following parameters:
// The text node which includes the match
// The term that has been found
// A counter indicating the number of marks for the term
// A counter indicating the number of all marks
// The function must return false if the mark should be stopped, otherwise true
"filter": function(){},
// As jquery.mark is asynchronous this callback function is called after all marks are completed
done: function(){},   
// Set this option to true if you want to log messages
debug: false,
// Log messages to a specific object (only if debug is true)
log: console

Available options for the mark method.

// HTML element to wrap matches, e.g. span
element: "mark",  
// A class name that will be appended to element
className: "",   
// An array with exclusion selectors. 
// Elements matching those selectors will be ignored. 
// Example: "exclude": [".ignore", "*[data-ignore]"]
exclude: [],
// Whether to search for each word separated by a blank instead of the complete term
separateWordSearch: true,
// Whether to search also inside iframes. 
// If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. 
// If you don't want to search inside specific iframes (e.g. facebook share), you can pass a filter selector that matches these iframes.
iframes: false,  
// The maximum ms to wait for a load event before skipping an iframe. 
// Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired
iframesTimeout: 5000,
// Whether to search for matches across elements
"acrossElements": false,
// Indicates the number of matching groups to ignore in the replacement. 
// Can be used e.g. to implement non-capturing lookbehind groups. 
// Note that when the value is > 0 (when groups should be ignored), it expects a total amount of groups in the RegExp of ignoreGroups + 1
ignoreGroups: 0,
// A callback for each marked element. 
// This function receives the marked jQuery element as a parameter
each: function(){},   
// A callback function that will be called when there are no matches. Receives the not found term as a parameter
noMatch: function(){},
// A callback to filter or limit matches. It will receive the following parameters:
// The text node which includes the match
// The term that has been found
// A counter indicating the number of marks for the term
// A counter indicating the number of all marks
// The function must return false if the mark should be stopped, otherwise true
"filter": function(){},
// As jquery.mark is asynchronous this callback function is called after all marks are completed
done: function(){},   
// Set this option to true if you want to log messages
debug: false,
// Log messages to a specific object (only if debug is true)
log: console

Mark ranges using the markRanges() method.

instance.markRanges(ranges, {
  // defaults
  // HTML element to wrap matches, e.g. span
  element: "mark",  
  // A class name that will be appended to element
  className: "",   
  // An array with exclusion selectors. 
  // Elements matching those selectors will be ignored. 
  // Example: "exclude": [".ignore", "*[data-ignore]"]
  exclude: [],
  // Whether to search also inside iframes. 
  // If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. 
  // If you don't want to search inside specific iframes (e.g. facebook share), you can pass a filter selector that matches these iframes.
  iframes: false,  
  // The maximum ms to wait for a load event before skipping an iframe. 
  // Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired
  iframesTimeout: 5000,
  // A callback for each marked element. 
  // This function receives the marked jQuery element as a parameter
  each: function(){},   
  // A callback function that will be called when there are no matches. Receives the not found term as a parameter
  noMatch: function(){},
  // A callback to filter or limit matches. It will receive the following parameters:
  // The text node which includes the match
  // The term that has been found
  // A counter indicating the number of marks for the term
  // A counter indicating the number of all marks
  // The function must return false if the mark should be stopped, otherwise true
  "filter": function(){},
  // As jquery.mark is asynchronous this callback function is called after all marks are completed
  done: function(){},   
  // Set this option to true if you want to log messages
  debug: false,
  // Log messages to a specific object (only if debug is true)
  log: console
});

Remove highlights manually.

instance.unmark({
  // defaults
  // HTML element to wrap matches, e.g. span
  element: "mark",  
  // A class name that will be appended to element
  className: "",   
  // An array with exclusion selectors. 
  // Elements matching those selectors will be ignored. 
  // Example: "exclude": [".ignore", "*[data-ignore]"]
  exclude: [],
  // Whether to search also inside iframes. 
  // If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. 
  // If you don't want to search inside specific iframes (e.g. facebook share), you can pass a filter selector that matches these iframes.
  iframes: false,  
  // The maximum ms to wait for a load event before skipping an iframe. 
  // Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired
  iframesTimeout: 5000,
  // As jquery.mark is asynchronous this callback function is called after all marks are completed
  done: function(){},   
  // Set this option to true if you want to log messages
  debug: false,
  // Log messages to a specific object (only if debug is true)
  log: console
})

Changelog:

11/18/2018

• v9.0.0