Overview
Introduction
This tool scans any block of free text for integer values and highlights just the ones that match a mode you choose: even, odd, or greater than a threshold.
It's meant for quickly spotting numbers of interest inside a larger document, log excerpt, or dataset dump without manually scanning every digit yourself.
What Is Integer Highlighter?
A text-highlighting tool that finds every integer token in free-form text (using the pattern -?\d+) and classifies each one against a chosen mode.
Matching integers are rendered with a visual highlight; everything else, including non-matching numbers, words, and punctuation, is shown exactly as written.
How Integer Highlighter Works
The input text is scanned for integer tokens using a simple regular expression that matches an optional leading minus sign followed by one or more digits.
Each matched token is converted to a number and tested against the chosen mode: divisible by 2 for even, not divisible by 2 for odd, or strictly greater than the given threshold for "greater than N".
The component renders the text by splitting it around those tokens and building a React span for each matching one, rather than assembling raw HTML, so highlighting never risks injecting unintended markup.
When To Use Integer Highlighter
Use it to quickly visually scan a log file, report, or block of text for numbers meeting a specific condition.
It's also handy as a teaching aid for even/odd or threshold comparisons, letting students see which numbers in a passage match a rule.
Often used alongside Integer Filter, Integer Pattern Finder and Integer Digit Highlighter.
Features
Advantages
- Non-matching text and numbers are always left completely untouched, so nothing about the original content is altered.
- Provides both a visual highlighted view and a plain-text list of just the matches, covering both a document review and a data-extraction use case.
- Handles negative integers correctly in every mode, including even/odd classification.
Limitations
- Only recognizes plain integer tokens; it doesn't understand decimals, thousands separators, or numbers written as words.
- Very large integers beyond JavaScript's safe integer range are compared using ordinary number conversion, so extreme values could lose precision in the "greater than N" comparison.
- Highlighting is purely visual (an inline styled span); it doesn't modify, extract to variables, or otherwise transform the source text.
Examples
Best Practices & Notes
Best Practices
- Use "greater than N" mode with a threshold just below the values you care about, so only the numbers you're interested in get highlighted.
- Check the plain-text matched list if you need the numbers themselves for further processing, rather than reading them back out of the highlighted text.
Developer Notes
The lib exposes a small `integerMatchesHighlightMode` predicate the component reuses directly when rendering per-token spans (after splitting the text with a capturing-group regex), so the highlighting logic used for the visual output and the logic used to build the secondary plain-text match list can never disagree; rendering deliberately avoids dangerouslySetInnerHTML in favor of mapping split tokens to React fragments/spans.
Integer Highlighter Use Cases
- Visually scanning a log file or report for numbers matching a condition
- Teaching even/odd or greater-than number classification with real text examples
- Extracting just the numbers of interest from a larger block of text
Common Mistakes
- Expecting decimal numbers to be treated as a single token; 3.14 is scanned as two separate integers, 3 and 14.
- Forgetting to set a threshold before selecting "greater than N" mode, which the tool will flag as an error.
- Assuming highlighting reorders or filters the visible text; it always renders every character in its original position.
Tips
- Try "odd" mode on a passage with negative numbers to confirm the sign is factored in correctly.
- Copy the small matched-integers list directly if you just need the numbers, not the annotated text.