UI libraries / Autocomplete / API reference / autocomplete-preset-algolia

parseAlgoliaHitSnippet

The parseAlgoliaHitSnippet function lets you parse the highlighted parts of an Algolia hit’s snippet.

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 { parseAlgoliaHitSnippet } 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 { parseAlgoliaHitSnippet } = 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 { parseAlgoliaHitSnippet } from '@algolia/autocomplete-preset-algolia';

// An Algolia hit for query "the"
const hit = {
  name: 'The Legend of Zelda: Breath of the Wild',
  _snippetResult: {
    name: {
      value:
        '__aa-highlight__The__/aa-highlight__ Legend of Zelda: Breath of __aa-highlight__the__/aa-highlight__ Wild',
    },
  },
};
const snippetedParts = parseAlgoliaHitSnippet({
  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 { parseAlgoliaHitSnippet } from '@algolia/autocomplete-preset-algolia';

// An Algolia hit for query "cam"
const hit = {
  hierarchicalCategories: {
    lvl1: 'Cameras & Camcoders',
  },
  _snippetResult: {
    hierarchicalCategories: {
      lvl1: {
        value:
          '__aa-highlight__Cam__/aa-highlight__eras & __aa-highlight__Cam__/aa-highlight__coders',
      },
    },
  },
};
const snippetedParts = parseAlgoliaHitSnippet({
  hit,
  attribute: ['hierarchicalCategories', 'lvl1'],
});

/*
 * [
 *  { value: 'Cam', isHighlighted: true },
 *  { value: 'eras & ', isHighlighted: false },
 *  { value: 'Cam', isHighlighted: true },
 *  { value: 'coders', isHighlighted: false },
 * ]
 */

Parameters

Parameter Description
hit
type: AlgoliaHit
Required

The Algolia hit whose attribute to retrieve the snippet from.
attribute
type: string | string[]
Required

The attribute to retrieve the snippet from. You can use the array syntax to reference nested attributes.

Returns

Parameter Description
type: ParsedAttribute[]

An array of the parsed attribute’s parts.
Previous
parseAlgoliaHitHighlight
Next
parseAlgoliaHitReverseHighlight
Did you find this page helpful?