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>
        <TextEdit @bind-Text="@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"
    };
}

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>
            <TextEdit @bind-Text="@searchValue" />
        </FieldBody>
    </Field>
    <Field>
        <FieldLabel>Until Next Boundary</FieldLabel>
        <FieldBody>
            <Switch @bind-Checked="@untilNextBoundary"></Switch>
        </FieldBody>
    </Field>
    <Field>
        <FieldLabel>Case Sensitive</FieldLabel>
        <FieldBody>
            <Switch @bind-Checked="@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";
}

API

Attributes

Name Description TypeDefault
Text The whole text in which a HighlightedText will be highlighted. string
HighlightedText The search term to be highlighted. string
CaseSensitive Whether or not the highlighted text is case sensitive. boolfalse
NextBoundary A regex expression used for searching the word boundaries. string.*?\\b
UntilNextBoundary If true, highlights the text until the next word boundary. boolfalse
On this page