Highlight matches

Highlights inside a text what matches the search. For the results of a search box: without it, someone looking at a list of twenty names cannot see why each one showed up.

When to use it

• The results of a search box, of a table filter or of the options of a searchable select, while typing.
• children is the whole text, as plain text (what is highlighted has to be cuttable), and match, what is searched for. ALL occurrences are marked, not just the first.
• The comparison ignores accents and case: "jose" highlights "José", and "nino", "niño". The search is trimmed of spaces at both ends, and empty or blank highlights nothing, which is what is needed while typing.
• tone is the same as that of Mark: highlight (the default), accent, secondary or tertiary.

When not to

• A highlight by hand, of a part you choose: Mark.
• A text with formatting (bold, links) inside: Highlight only works on plain text.

Keyboard: it does not take part. It is not interactive.

Accessibility: each match is a Mark, that is a real <mark>: the highlight is not left to colour alone. The text is read whole and in order, because it is cut by the index of the ORIGINAL text: searching the text without accents and cutting with that index would shift the cut by one letter for every earlier accent. Letters that carry a separate mark (an emoji, a letter with its combining accent) are not split in half.

Fine-tuning: that of Mark, --amset-mark-background and --amset-mark-color. The root is a <span> with no style of its own, so it follows the surrounding text.