Blazorise Highlighter component

Visually highlight part of the text based on the search term.

Highlighter is Blazor component that changes format of wanted words and phrases, to make them more notable in text on web page (e.g. for database search results). You can change anything you can imagine, including font size, color, bold, italic, underline, background color etc., or simply use css styling.

Examples

Basic

  • This is the first item
  • This is the second item
  • This is the third item
<Field>
    <FieldLabel>Search value</FieldLabel>
    <FieldBody>
        <TextInput @bind-Value="@searchValue" />
    </FieldBody>
</Field>

<ListGroup>
    @foreach ( var sentence in sentences )
    {
        <ListGroupItem @key="sentence">
            <Highlighter Text="@sentence" HighlightedText="@searchValue" />
        </ListGroupItem>
    }
</ListGroup>

@code {
    string searchValue = "item";

    IEnumerable<string> sentences = new List<string>
    {
        "This is the first item",
        "This is the second item",
        "This is the third item"
    };
}

Multiple Highlights

Use the HighlightedTexts parameter to highlight multiple words or phrases within the same block of text. This is useful for multi-term search or emphasizing several keywords at once.
  • This is the first item
  • This is the second item
  • This is the third item
<Field>
    <FieldLabel>Search values (comma separated)</FieldLabel>
    <FieldBody>
        <TextInput @bind-Value="@searchValue" />
    </FieldBody>
</Field>

<ListGroup>
    @foreach ( var sentence in sentences )
    {
        <ListGroupItem @key="sentence">
            <Highlighter Text="@sentence" HighlightedTexts="@highlightedWords" />
        </ListGroupItem>
    }
</ListGroup>

@code {
    string searchValue = "the,item";

    IEnumerable<string> sentences = new List<string>
    {
        "This is the first item",
        "This is the second item",
        "This is the third item"
    };

    string[] highlightedWords =>
        ( searchValue ?? string.Empty )
        .Split( ',', StringSplitOptions.RemoveEmptyEntries | StringSplitOptions.TrimEntries ).ToArray();
}

Boundaries

If you wish to highlight the text until the next regex boundary occurs, set the UntilNextBoundary property to true, or the CaseSensitive property to true if you want a case-sensitive highlight.
"There will be no foolish wand-waving or silly incantations in this class. As such, I don't expect many of you to appreciate the subtle science and exact art that is potion-making. However, for those select few who possess the predisposition, I can teach you how to bewitch the mind and ensnare the senses. I can tell you how to bottle fame, brew glory, and even put a stopper in death. Then again, maybe some of you have come to Hogwarts in possession of abilities so formidable that you feel confident enough to not pay attention!" — Severus Snape
<Fields>
    <Field>
        <FieldLabel>Search value</FieldLabel>
        <FieldBody>
            <TextInput @bind-Value="@searchValue" />
        </FieldBody>
    </Field>
    <Field>
        <FieldLabel>Until Next Boundary</FieldLabel>
        <FieldBody>
            <Switch @bind-Value="@untilNextBoundary"></Switch>
        </FieldBody>
    </Field>
    <Field>
        <FieldLabel>Case Sensitive</FieldLabel>
        <FieldBody>
            <Switch @bind-Value="@caseSensitive"></Switch>
        </FieldBody>
    </Field>
</Fields>

<Card>
    <CardBody>
        <Highlighter Text="@sentence" HighlightedText="@searchValue" UntilNextBoundary="@untilNextBoundary" CaseSensitive="@caseSensitive" />
    </CardBody>
</Card>

@code {
    string searchValue = "y";
    bool untilNextBoundary;
    bool caseSensitive;

    string sentence = "\"There will be no foolish wand-waving or silly incantations in this class. As such, I don't expect many of you to appreciate the subtle science and exact art that is potion-making. However, for those select few who possess the predisposition, I can teach you how to bewitch the mind and ensnare the senses. I can tell you how to bottle fame, brew glory, and even put a stopper in death. Then again, maybe some of you have come to Hogwarts in possession of abilities so formidable that you feel confident enough to not pay attention!\" — Severus Snape";
}

Best Practices

Highlight for Relevance

Highlight only the text that helps users connect a result with their search or current task. Matching rules such as case sensitivity and word boundaries should fit the content and behave predictably.

Readability and Performance

Choose highlight colors with sufficient contrast in every supported theme, and do not use highlighting as the only status indicator. When rendering large result sets, limit the amount of text and the number of terms processed at once.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page