Easy JavaScript plugin for Word resaltado en el documento-Mark. js

Vista prévia

Descripción

Mark. js es una biblioteca de JavaScript ligera y fácil de usar que se utiliza para resaltar palabras/cadenas/frases especificadas en el elemento seleccionado. Bueno para resaltar palabras clave de búsqueda en la página de resultados de búsqueda.

también disponible para jQuery .

¿Cómo funciona?

Sólo tiene que incluir la biblioteca Mark. js en la página web y estamos listos para ir.

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

Cree una nueva instancia de Mark y especifique el elemento de destino que desea buscar.

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

Especifique la palabra clave que se marcará.

instance.mark("lorem");

Estilo de la palabra clave resaltada en el CSS.

mark {

background: orange;

color: black;
}

También puede resaltar expresiones regulares personalizadas utilizando el método markRegExp () como 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

Marque los rangos con el método markRanges () .

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
});

Quite los resaltados manualmente.

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
})

Registro de cambios

11/18/2018

• v9.0.0