UI Libraries / Autocomplete / parseAlgoliaHitSnippet

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 { parseAlgoliaHitHighlight } 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#

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#

type: ParsedAttribute[]

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