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

# Highlighting

> Visually highlights matched terms in search results.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

## About this widget

Displays the [highlighted attributes](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/ios) of your search results.

<Card title="Explore example code" icon="github" href="https://github.com/algolia/instantsearch-ios/tree/master/Examples/Showcase">
  Browse the Highlighting example code on GitHub.
</Card>

## Examples

Consider a movies <Index />.
Each movie record consists of two fields: `title` and `year`.
Algolia's response to the query "red" could look like:

```json JSON icon=braces theme={"system"}
{
  "title": "The Shawshank Redemption",
  "year": 1994,
  "objectID": "439817390",
  "_highlightResult": {
    "title": {
      "value": "The Shawshank <em>Red</em>emption",
      "matchLevel": "full",
      "fullyHighlighted": false,
      "matchedWords": ["red"]
    }
  }
}
```

Consider the `_highlightResult`'s value: `"The Shawshank <em>Red</em>emption"`.
The part of the string to highlight is marked with `<em>` tags or [your custom tags](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/ios#pre-and-post-tags).

`HighlightedString` is constructed with a raw tagged string, detects the tags and creates a `TaggedString`. This tagged string provides following properties:

* `input`. The input string.
* `output`. The input string without its tags.
* `taggedRanges`. A list of ranges defining highlighted ranges in `output`.

You can build a highlighted string in iOS is with an `NSAttributedString`.
InstantSearch provides `HighlightedString` and `NSAttributedString` extensions to simplify this.

```swift Swift icon=code theme={"system"}
let rawHighlightedString = "The Shawshank <em>Red</em>emption"
let highlightedString = HighlightedString(string: rawHighlightedString)

// Attributes to apply for a highlighted part of the string
let highLightingAttributes: [NSAttributedString.Key: Any] = [
  .foregroundColor: UIColor.red
]

// Create attributed string highlighted part of which is red
let attributedString = NSAttributedString(highlightedString: highlightedString, attributes: attributes)
```

The produced `NSAttributedString` can be assigned to a UIKit component that supports it.

```swift Swift icon=code theme={"system"}
let attributedString: NSAttributedString = ...
let label: UILabel = ...

label.attributedText = attributedString
```

The `Hit` wrapper structure uses the `HighlightedString` structure.
You can extract a highlighted string for an attribute using its `hightlightedString(forKey key: String)` function.

Example:

```swift Swift icon=code theme={"system"}
/* JSON search response
  {
    "title": "The Shawshank Redemption",
    "year": 1994,
    "objectID": "439817390",
    "_highlightResult": {
      "title": {
        "value": "The Shawshank <em>Red</em>emption",
        "matchLevel": "full",
        "fullyHighlighted": false,
        "matchedWords": [
          "red"
        ]
      },
    }
  }
*/

struct Movie: Codable {
  let title: String
  let year: Int
}

let movieHit: Hit<Movie> = ... /* parse JSON response */

let highlightedMovieTitle: HighlightedString? = movieHit.hightlightedString(forKey: "title")
```

You can read more about usage of the `Hit` wrapper structure in the [`Hits` reference](/doc/api-reference/widgets/hits/ios).