Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/niekes/lucid-search
Highlight text and find matches
https://github.com/niekes/lucid-search
diacritics highlight javascript match search special-characters text
Last synced: 1 day ago
JSON representation
Highlight text and find matches
- Host: GitHub
- URL: https://github.com/niekes/lucid-search
- Owner: Niekes
- License: bsd-3-clause
- Created: 2021-03-14T14:27:29.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-27T21:19:27.000Z (over 3 years ago)
- Last Synced: 2024-12-12T14:01:52.275Z (11 days ago)
- Topics: diacritics, highlight, javascript, match, search, special-characters, text
- Language: JavaScript
- Homepage: https://lucid.niekes.com
- Size: 859 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
**Lucid** is a stand-alone, zero-dependency, fast and lightweight library to highlight text and find matches.
[](https://app.codecov.io/gh/niekes/lucid-search)
[](https://travis-ci.com/github/Niekes/lucid-search)
[](https://www.npmjs.com/package/lucid-search)
[](https://www.npmjs.com/package/lucid-search)
[](https://github.com/Niekes/lucid-search/blob/master/LICENSE)
[](https://bundlephobia.com/result?p=lucid-search)
[](https://www.npmjs.com/package/lucid-search)
# Installing
### Npm
```bash
npm i lucid-search --save
```
### CDN
```html
```
# Demo
* [Go to examples](https://codepen.io/collection/AEqKVL)
# Usage
### Default (ES6)
```js
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: "The quick brown fox jumps over the lazy dog",
matches: (3) ["The", "the", "dog"]
}
*/
```
### With options (ES6)
```js
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: "The quick brown fox jumps over the lazy dog",
matches: (3) ["The", "the", "dog"]
}
*/
```
### Default (CDN)
Same like with ES6, only with `lucidSearch` prefix:
```js
// ...
const found = lucidSearch.findMatches(haystack, needle);
// ...
```
### Flavours
`findMatches(haystack, needle, options)`
* Use for plain strings **without** special characters like _üöäè_
* [Demo](https://codepen.io/Niekes/pen/qBRNdqp)
---
`findMatchesHtml(haystack, needle, options)`
* Use for plain strings and **html** strings **without** special characters like _üöäè_
* [Demo](https://codepen.io/Niekes/pen/abpZOyV)
---
`findMatchesNormalized(haystack, needle, options)`
* Use for plain strings **with** special characters like _üöäè_
* [Demo](https://codepen.io/Niekes/pen/zYNBGpE)
---
`findMatchesHtmlNormalized(haystack, needle, options)`
* Use for plain strings and **html** strings **with** special characters like _üöäè_
* [Demo](https://codepen.io/Niekes/pen/QWGJBKe)
---
`uncoverMatches(haystack, needles, options)`
* Similar to *findMatches* but expects an array of strings like `["the", "dog"]` as needle
* [Demo](https://codepen.io/Niekes/pen/eYgzNjR)
---
`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](https://codepen.io/Niekes/pen/KKaMPBg)
### Funding
### License
[BSD-3-Clause](https://github.com/Niekes/lucid-search/blob/master/LICENSE) © [Stefan Nieke](https://www.niekes.com)