UI libraries / InstantSearch.js / Widgets

reverseHighlight

Signature 
reverseHighlight({
  attribute: string,
  hit: object,
  // Optional parameters
  highlightedTagName: string,
});
Import
Copy 
1

import { reverseHighlight } from 'instantsearch.js/es/helpers';
See code examples

About this widget

The reverseHighlight function returns any attribute from a hit into its highlighted form, when relevant.

The function leverages the highlighting feature of Algolia and is designed to work with the hits or infiniteHits widget. This helper is available in both forms: as a string and as a function.

Examples

Copy 
1
2
3
4
5
6
7
8
9

hits({
  container: '#hits',
  templates: {
    item: `
      <h2>{{#helpers.reverseHighlight}}{ "attribute": "name" }{{/helpers.reverseHighlight}}</h2>
      <p>{{ description }}</p>
    `,
  },
});

Options

Parameter Description
attribute
type: string
Required

The attribute of the record to highlight. You can give a dot-separated value for deeply nested objects, like actor.name.
Copy 
1
2
3
4

reverseHighlight({
  // ...
  attribute: 'actor.name',
});
hit
type: object
Required

The original hit object provided to the function. Note that the value is already bound to the function inside a string template, so you don’t have to provide it. For this to work, the provided object must have a _highlightResult[attribute].value property.
Copy 
1
2
3
4

reverseHighlight({
  // ...
  hit: item,
});
highlightedTagName
type: string
default: mark
Optional

The name of the HTML element to wrap the highlighted parts of the string.
Copy 
1
2
3
4

reverseHighlight({
  // ...
  highlightedTagName: 'em',
});

HTML output

Copy 
1

<span>This is the <mark class="ais-Highlight-highlighted">highlighted text</mark></span>
Did you find this page helpful?
InstantSearch.js v4