Compare HTML source against plain text and highlight the differences. Extract visible text from HTML, diff it word-by-word against a target, and get back ready-to-render highlighted markup.
When the extracted text matches the target exactly, everything is highlighted as matched.
Words present in the HTML source but missing from the target are marked as unmatched (red).
Words in the target that don't appear in the source are marked as added (blue).
Tags are never wrapped inside highlights — they split and reopen across structural elements.
Use custom HTML tags and CSS classes instead of the default <mark> elements.
The segments array gives you machine-readable offset data for building custom UIs.
Edit the HTML source and target text, then press Compare to see the highlighted diff.