> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# parseAlgoliaHitReverseSnippet

> Returns the non-matching parts of an Algolia hit snippet.

<Tip>
  Autocomplete is also available as an experimental widget in InstantSearch,
  making it easier to integrate into your search experience.
  For more information,
  see the API reference for [InstantSearch.js](/doc/api-reference/widgets/autocomplete/js) or
  [React InstantSearch](/doc/api-reference/widgets/autocomplete/react).
</Tip>

The `parseAlgoliaHitReverseSnippet` function lets you parse the non-highlighted parts of an Algolia hit's snippet.
This is a common pattern for [Query Suggestions](/doc/guides/building-search-ui/ui-and-ux-patterns/query-suggestions/js),
where you want to highlight the differences between each suggestion.

<Note>
  If you're using [`autocomplete-js`](/doc/ui-libraries/autocomplete/api-reference/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.**
</Note>

## Installation

First, you need to install the preset.

<CodeGroup>
  ```sh npm theme={"system"}
  npm install @algolia/autocomplete-preset-algolia
  ```

  ```sh yarn theme={"system"}
  yarn add @algolia/autocomplete-preset-algolia
  ```
</CodeGroup>

Then import it in your project:

```js JavaScript icon=code theme={"system"}
import { parseAlgoliaHitReverseSnippet } from "@algolia/autocomplete-preset-algolia";
```

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

```html HTML icon=code-xml theme={"system"}
<script
  src="https://cdn.jsdelivr.net/npm/@algolia/autocomplete-preset-algolia@1.19.9/dist/umd/index.production.js"
  integrity="sha256-mbQPS+x0+jNL5Xw3QUxxFofMTi1IncKd/7o4dqP9PDY="
  crossorigin="anonymous"
></script>
<script>
  const { parseAlgoliaHitReverseSnippet } = window["@algolia/autocomplete-preset-algolia"];
</script>
```

## Examples

### With a single string

```js JavaScript icon=code theme={"system"}
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

```js JavaScript icon=code theme={"system"}
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

<ParamField body="hit" type="AlgoliaHit">
  The Algolia hit whose attribute to retrieve the reverse snippet from.
</ParamField>

<ParamField body="attribute" type="string | string[]">
  The attribute to retrieve the reverse snippet from.
  You can use the array syntax to reference nested attributes.
</ParamField>

## Returns

<ResponseField name="returns" type="ParsedAttribute[]">
  An array of the parsed attribute's parts.
</ResponseField>