Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
autosuggest-highlight
Advanced tools
Utilities for highlighting text in autosuggest and autocomplete components
The autosuggest-highlight npm package is used to highlight matching parts of suggestions in an autosuggest component. It is particularly useful in search interfaces where you want to visually emphasize the parts of the suggestion that match the user's input.
Highlight Matching Parts
This feature allows you to highlight the parts of a suggestion that match the user's input. The `match` function finds the matching parts, and the `parse` function splits the text into highlighted and non-highlighted parts.
const highlight = require('autosuggest-highlight');
const text = 'California';
const query = 'cal';
const matches = highlight.match(text, query);
const parts = highlight.parse(text, matches);
console.log(parts); // [{ text: 'Cal', highlight: true }, { text: 'ifornia', highlight: false }]
The react-highlight-words package provides similar functionality for highlighting words within a string. It is more tailored for React applications and offers additional customization options for styling the highlighted parts.
The highlight.js package is a general-purpose syntax highlighter that can be used to highlight code snippets in various programming languages. While it is not specifically designed for autosuggest components, it can be adapted for similar use cases.
The fuse.js package is a lightweight fuzzy-search library that can be used to perform search operations and highlight matching parts. It offers more advanced search capabilities compared to autosuggest-highlight, including fuzzy matching and scoring.
Utilities for highlighting text in autosuggest and autocomplete components.
yarn add autosuggest-highlight
or
npm install autosuggest-highlight --save
Function | Description |
---|---|
match(text, query, options) | Calculates the characters to highlight in text based on query . |
parse(text, matches) | Breaks the given text to parts based on matches . |
Calculates the characters to highlight in text
based on query
.
It returns an array of pairs. Every pair [a, b]
means that text.slice(a, b)
should be highlighted.
Options are passed as JSON.
Option | Description |
---|---|
insideWords | boolean false by default. Searches inside words |
findAllOccurrences | boolean false by default. Finds all occurrences of each match |
requireMatchAll | boolean false by default. Requires each word of query to be found in text or else returns an empty set |
We match at the beginning of a word by default:
var match = require('autosuggest-highlight/match');
// text indices: 012345678
// highlighting: vv
var matches = match('some text', 'te'); // [[5, 7]]
// text indices: 012345678
// highlighting:
var matches = match('some text', 'e'); // []
Enable search inside words:
var match = require('autosuggest-highlight/match');
// text indices: 012345678
// highlighting: v
var matches = match('some text', 'm', { insideWords: true }); // [[2, 3]]
When query
is a single word, only the first match is returned by default:
// text indices: 012345678901234
// highlighting: v
var matches = match('some sweet text', 's'); // [[0, 1]]
You'll get the second match, if query
contains multiple words:
// text indices: 012345678901234
// highlighting: v v
var matches = match('some sweet text', 's s'); // [[0, 1], [5, 6]]
Or using the findAllOccurrences option:
// text indices: 012345678901234
// highlighting: v v
var matches = match('some sweet text', 's', { findAllOccurrences: true }); // [[0, 1], [5, 6]]
Matches are case insensitive:
// text indices: 012345678
// highlighting: v
var matches = match('Some Text', 't'); // [[5, 6]]
and diacritics are removed:
// text indices: 0123456
// highlighting: vvvv
var matches = match('Déjà vu', 'deja'); // [[0, 4]]
When query
has multiple words, the order doesn't matter:
// text indices: 012345678901234
// highlighting: v v
var matches = match('Albert Einstein', 'a e'); // [[0, 1], [7, 8]]
// text indices: 012345678901234
// highlighting: v v
var matches = match('Albert Einstein', 'e a'); // [[0, 1], [7, 8]]
Breaks the given text
to parts based on matches
.
It returns an array of text
parts by specifying whether each part should be highlighted or not.
For example:
var parse = require('autosuggest-highlight/parse');
// text indices: 0123456789012345
// highlighting: vv v
var parts = parse('Pretty cool text', [[7, 9], [12, 13]]);
/*
[
{
text: 'Pretty ',
highlight: false
},
{
text: 'co',
highlight: true
},
{
text: 'ol ',
highlight: false
},
{
text: 't',
highlight: true
},
{
text: 'ext',
highlight: false
}
]
*/
For using this library with old browsers such as IE11 you must change import to
var match = require('autosuggest-highlight/ie11/match');
var parse = require('autosuggest-highlight/ie11/parse');
FAQs
Utilities for highlighting text in autosuggest and autocomplete components
The npm package autosuggest-highlight receives a total of 248,624 weekly downloads. As such, autosuggest-highlight popularity was classified as popular.
We found that autosuggest-highlight demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.