Author: | julmot |
---|---|
Views Total: | 2,887 views |
Official Page: | Go to website |
Last Update: | November 18, 2018 |
License: | MIT |
Preview:

Description:
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.
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