parseAlgoliaHitReverseSnippet

Prefer using the Autocomplete widget from InstantSearch instead of the standalone Autocomplete library. It integrates more closely with your search experience. For more information, see the API reference for InstantSearch.js or React InstantSearch.

The parseAlgoliaHitReverseSnippet function lets you parse the non-highlighted parts of an Algolia hit’s snippet. 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

First, you need to install the preset.

npm install @algolia/autocomplete-preset-algolia

yarn add @algolia/autocomplete-preset-algolia

Then import it in your project:

JavaScript

import { parseAlgoliaHitReverseSnippet } from "@algolia/autocomplete-preset-algolia";

If you don’t use a package manager, you can use the HTML script element:

HTML

<script
  src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-preset-algolia@1.19.11/dist/umd/index.production.js"
  integrity="sha256-t9d6+ZkwhprgF80P/p82Iyt7d/7j8dKIgP+o3CDbaVQ="
  crossorigin="anonymous"
></script>
<script>
  const { parseAlgoliaHitReverseSnippet } = window["@algolia/autocomplete-preset-algolia"];
</script>

Examples

With a single string

JavaScript

import { parseAlgoliaHitReverseSnippet } from "@algolia/autocomplete-preset-algolia";

// An Algolia hit for query "zelda"
const hit = {
  query: "zelda switch",
  _snippetResult: {
    query: {
      value: "__aa-highlight__zelda__/aa-highlight__ switch",
    },
  },
};
const reverseSnippetedParts = parseAlgoliaHitReverseSnippet({
  hit,
  attribute: "query",
});

/*
 * [
 *  { value: 'zelda', isHighlighted: false },
 *  { value: ' switch', isHighlighted: true },
 * ]
 */

Example with nested attributes

JavaScript

import { parseAlgoliaHitReverseSnippet } from "@algolia/autocomplete-preset-algolia";

// An Algolia hit for query "video"
const hit = {
  hierarchicalCategories: {
    lvl1: "Video games",
  },
  _snippetResult: {
    hierarchicalCategories: {
      lvl1: {
        value: "__aa-highlight__Video__/aa-highlight__ games",
      },
    },
  },
};
const reverseSnippetedParts = parseAlgoliaHitReverseSnippet({
  hit,
  attribute: ["hierarchicalCategories", "lvl1"],
});

/*
 * [
 *  { value: 'Video', isHighlighted: false },
 *  { value: ' games', isHighlighted: true },
 * ]
 */

Parameters

AlgoliaHit

The Algolia hit whose attribute to retrieve the reverse snippet from.

string | string[]

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

Returns

ParsedAttribute[]

An array of the parsed attribute’s parts.

​Installation

​Examples

​With a single string

​Example with nested attributes

​Parameters

​Returns

Installation

Examples

With a single string

Example with nested attributes

Parameters

Returns