 |
| Search Keyword Highlighting Plugin For jQuery (Images: Plugin JS) |
mark.js is a jQuery plugin that allows you to search or bookmark searched text in a specific container. Supports regular expressions, diacritics, synonyms, custom class names, separate word searches (multiple terms), filter selectors, word boundaries, and iframe elements.
Installation:
# NPM $ npm install mark.js # Bower $ bower install mark.js
Basic usage:
1. Embed the latest version of jQuery library and mark.js script into your html document.
<script src="//code.jquery.com/jquery-1.12.2.min.js"></script> <script src="dist/jquery.mark.min.js"></script>
2. Mark and highlight keyword searched by your users.
$("#selector").mark(keyword, options);
3. 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
4. Mark and highlight marched keyword using RegExp.
$("#selector").markRegExp(regexp, options);
5. Available options for the markRegExp 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
6. Mark ranges using the markRanges() method.
$("#selector").markRegExp(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
});
7. Remove highlights manually.
$("#selector").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
})
Live Demo
See the Pen Search Keyword Highlighting Plugin For jQuery - Mark.js by Plugin JS (@pluginjs) on CodePen.
File Info
- File Name :
- search-keyword-highlighting-plugin-for-jquerymark-js.zip
- Size :
- 9.81KB
- Site Download :
- Github.com
- Official Website:
- Go to website
- License:
- MIT