UI Libraries
/
Autocomplete
/
parseAlgoliaHitHighlight
May. 03, 2021
parseAlgoliaHitHighlight
The parseAlgoliaHitHighlight function lets you parse the highlighted parts of an Algolia hit.
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
First, you need to install the preset.
Copy
1
2
3
yarn add @algolia/autocomplete-preset-algolia
# or
npm install @algolia/autocomplete-preset-algolia
Then import it in your project:
Copy
1
import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
If you don’t use a package manager, you can use the HTML script element:
Copy
1
2
3
4
5
6
<script src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-preset-algolia"></script>
<script>
const { parseAlgoliaHitHighlight } = window[
'@algolia/autocomplete-preset-algolia'
];
</script>
Examples
With a single string
Copy
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
import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
// An Algolia hit for query "the"
const hit = {
name: 'The Legend of Zelda: Breath of the Wild',
_highlightResult: {
name: {
value:
'__aa-highlight__The__/aa-highlight__ Legend of Zelda: Breath of __aa-highlight__the__/aa-highlight__ Wild',
},
},
};
const highlightedParts = parseAlgoliaHitHighlight({
hit,
attribute: 'name',
});
/*
* [
* { value: 'The', isHighlighted: true },
* { value: ' Legend of Zelda: Breath of ', isHighlighted: false },
* { value: 'the', isHighlighted: true },
* { value: ' Wild', isHighlighted: false },
* ]
*/
With nested attributes
Copy
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
27
28
29
import { parseAlgoliaHitHighlight } from '@algolia/autocomplete-preset-algolia';
// An Algolia hit for query "cam"
const hit = {
hierarchicalCategories: {
lvl1: 'Cameras & Camcoders',
},
_highlightResult: {
hierarchicalCategories: {
lvl1: {
value:
'__aa-highlight__Cam__/aa-highlight__eras & __aa-highlight__Cam__/aa-highlight__coders',
},
},
},
};
const highlightedParts = parseAlgoliaHitHighlight({
hit,
attribute: ['hierarchicalCategories', 'lvl1'],
});
/*
* [
* { value: 'Cam', isHighlighted: true },
* { value: 'eras & ', isHighlighted: false },
* { value: 'Cam', isHighlighted: true },
* { value: 'coders', isHighlighted: false },
* ]
*/
Parameters
hit
|
type: AlgoliaHit
Required
The Algolia hit whose attribute to retrieve the highlighted parts from. |
attribute
|
type: string | string[]
Required
The attribute to retrieve the highlighted parts from. You can use the array syntax to reference nested attributes. |
Returns
|
type: ParsedAttribute[]
An array of the parsed attribute’s parts. |
