parseAlgoliaHitReverseHighlight
The parseAlgoliaHitReverseHighlight function lets you parse the non-highlighted parts of an Algolia hit. This is a common pattern for Query Suggestions, where you want to highlight the differences between each suggestion.
If you’re using autocomplete-js, all Algolia utilities are available directly in the package with the right user agents and the virtual DOM layer. You don’t need to import the preset separately.
Installation# A
First, you need to install the preset.
1
2
3
yarn add @algolia/autocomplete-preset-algolia
# or
npm install @algolia/autocomplete-preset-algolia
Then import it in your project:
1
import { parseAlgoliaHitReverseHighlight } from '@algolia/autocomplete-preset-algolia';
If you don’t use a package manager, you can use the HTML script element:
1
2
3
4
5
6
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-preset-algolia"></script>
<script>
const { parseAlgoliaHitReverseHighlight } = window[
'@algolia/autocomplete-preset-algolia'
];
</script>
Examples# A
With a single string#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { parseAlgoliaHitReverseHighlight } from '@algolia/autocomplete-preset-algolia';
// An Algolia hit for query "zelda"
const hit = {
query: 'zelda switch',
_highlightResult: {
query: {
value: '__aa-highlight__zelda__/aa-highlight__ switch',
},
},
};
const reverseHighlightedParts = parseAlgoliaHitReverseHighlight({
hit,
attribute: 'query',
});
/*
* [
* { value: 'zelda', isHighlighted: false },
* { value: ' switch', isHighlighted: true },
* ]
*/
With nested attributes#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
import { parseAlgoliaHitReverseHighlight } from '@algolia/autocomplete-preset-algolia';
// An Algolia hit for query "video"
const hit = {
hierarchicalCategories: {
lvl1: 'Video games',
},
_highlightResult: {
hierarchicalCategories: {
lvl1: {
value: '__aa-highlight__Video__/aa-highlight__ games',
},
},
},
};
const reverseHighlightedParts = parseAlgoliaHitReverseHighlight({
hit,
attribute: ['hierarchicalCategories', 'lvl1'],
});
/*
* [
* { value: 'Video', isHighlighted: false },
* { value: ' games', isHighlighted: true },
* ]
*/
Parameters# A
hit
# |
type: AlgoliaHit
Required
The Algolia hit whose attribute to retrieve the reverse highlighted parts from. |
attribute
# |
type: string | string[]
Required
The attribute to retrieve the reverse highlighted parts from. You can use the array syntax to reference nested attributes. |
Returns# A
|
type: ParsedAttribute[]
An array of the parsed attribute’s parts. |
