Lucid is a stand-alone, zero-dependency, fast and lightweight library to highlight text and find matches.

Installing

Npm

npm i lucid-search --save

CDN

<script src="https://unpkg.com/lucid-search/dist/lucid-search.min.js"></script>

Demo

• Go to examples

Usage

Default (ES6)

import {
    findMatches,
} from 'lucid-search';

const haystack = 'The quick brown fox jumps over the lazy dog';
const needle = 'The dog';

const found = findMatches(haystack, needle);

console.log(found);
/*
{
    mark: "<span class="matched">The</span> quick brown fox jumps over <span class="matched">the</span> lazy <span class="matched">dog</span>",
    matches: (3) ["The", "the", "dog"]
}
*/

With options (ES6)

import {
    findMatches,
} from 'lucid-search';

const haystack = 'The quick brown fox jumps over the lazy dog';
const needle = 'The dog';
/*
    Due to performance you need to pass in the whole options object with "el" and "cssClass"
*/
const options = {
    cssClass: 'found', // default is "marked"
    el: 'mark', // default is "span"
};

const found = findMatches(haystack, needle, options);

console.log(found);
/*
{
    mark: "<mark class="found">The</mark> quick brown fox jumps over <mark class="found">the</mark> lazy <mark class="found">dog</mark>",
    matches: (3) ["The", "the", "dog"]
}
*/

Default (CDN)

Same like with ES6, only with lucidSearch prefix:

// ...
const found = lucidSearch.findMatches(haystack, needle);
// ...

Flavours

findMatches(haystack, needle, options)

• Use for plain strings without special characters like üöäè
• Demo

findMatchesHtml(haystack, needle, options)

• Use for plain strings and html strings without special characters like üöäè
• Demo

findMatchesNormalized(haystack, needle, options)

• Use for plain strings with special characters like üöäè
• Demo

findMatchesHtmlNormalized(haystack, needle, options)

• Use for plain strings and html strings with special characters like üöäè
• Demo

uncoverMatches(haystack, needles, options)

• Similar to findMatches but expects an array of strings like ["the", "dog"] as needle
• Demo

uncoverMatchesHtml(haystack, needles, options)

• Similar to findMatchesHtml but expects an array of strings like ["the", "dog"] as needle

uncoverMatchesNormalized(haystack, needles, options)

• Similar to findMatchesNormalized but expects an array of strings like ["the", "dog"] as needle

uncoverMatchesHtmlNormalized(haystack, needles, options)

• Similar to findMatchesHtmlNormalized but expects an array of strings like ["the", "dog"] as needle

score(matches, [haystack])

• Creates a score for passed matches, pass haystack so that lucid-search ranks matches closer to the beginning higher
• Demo

Funding

License

BSD-3-Clause © Stefan Nieke