Similary Viewer Uncomplicated script which takes two strings and visually shows the differences in the output window editor Jump between the original and the edited version and view matching words similarity style import url https fonts googleapis com css family Open Sans before after box sizing border box body height 400pt margin 30px container backdrop textarea width 100 height 100 highlights textarea padding 10px font 20px 28px Open Sans sans serif letter spacing 1px container display block margin 0 auto transform translateZ 0 webkit text size adjust none backdrop position absolute z index 1 border 2px solid 685972 background color fff overflow auto pointer events none transition transform 1s highlights white space pre wrap word wrap break word color transparent textarea display block position absolute z index 2 margin 0 border 2px solid 74637f border radius 0 color 444 background color transparent overflow auto resize none transition transform 1s mark border radius 3px color transparent background color b1d5e5 textarea focus button focus outline none box shadow 0 0 0 2px c6aada input padding 0 margin 0 style button onclick selOriginal original button button onclick selEdited edited input id showdiff type checkbox checked onclick handleInput button div class container div class backdrop div class highlights div div textarea This demo shows how to highlight bits of text within a textarea Alright that s a lie You can t actually render markup inside a textarea However you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there JavaScript takes care of syncing the content and scroll position from the textarea to the div so everything lines up nicely Hit the toggle button to peek behind the curtain And feel free to edit this text All capitalized words will be highlighted textarea div script src https ajax googleapis com ajax libs jquery 3 5 1 jquery min js script script var original This example shows how to highlight text Not just any text but text words which are repeated in an a different version i e track similar words Relatively straightforwards however you need to be careful that you keep everything in sync especially the way the textarea and the div are used to accept intput editing from the keyboard while marking a duplicated overlapping text area as you can t directly hightlight mark text in a textarea var edited Apples are incredibly good for you and eating them is linked to a lower risk of many major diseases including diabetes and cancer JavaScript takes care of syncing the content and scroll position from the textarea to the div so everything lines up nicely Hit the toggle button to peek behind the curtain And feel free to edit this text All capitalized words will be highlighted onload function textarea val original handleInput let sel original function selOriginal if sel original return sel original edited textarea val textarea val original handleInput function selEdited if sel edited return sel edited original textarea val textarea val edited handleInput var container container var backdrop backdrop var highlights highlights var textarea textarea var toggle button function applyHighlights text text text replace n g n n replace A Z b g mark mark return text function escapeRegExp string return string replace g means the whole matched string id is checked function applyHighlights text if sel original return text if showdiff is checked return text let ret text let owords original split g owords owords map name name toLowerCase owords owords filter el return el trim length 1 ignore single letters owords new Set owords owords owords sort function a b return b length a length for let k 0 k owords length k let regEx new RegExp escapeRegExp owords k gi text text replace regEx 1 mark 2 mark 3 text text replace regEx 1 mark 2 mark 3 text text replaceAll owords k mark owords k mark end for k return text function handleInput var text textarea val var highlightedText applyHighlights text highlights html highlightedText function handleScroll var scrollTop textarea scrollTop backdrop scrollTop scrollTop var scrollLeft textarea scrollLeft backdrop scrollLeft scrollLeft function bindEvents textarea on input handleInput scroll handleScroll bindEvents handleInput script script console log ready script
overlapping text area as you can t directly hightlight mark text in a textarea var edited Apples are incredibly good for you and eating them is linked to a lower risk of many major diseases including diabetes and cancer JavaScript takes care of syncing the content and scroll position from the textarea to the div so everything lines up nicely Hit the toggle button to peek behind the curtain And feel free to edit this text All capitalized words will be highlighted onload function textarea val original handleInput let sel original function selOriginal if sel original return sel original edited textarea val textarea val original handleInput function selEdited if sel edited return sel edited original textarea val textarea val edited handleInput var container container var backdrop backdrop var highlights highlights var textarea textarea var toggle button function applyHighlights text text text replace n g n n replace A Z b g mark mark return text function escapeRegExp string return string replace g means the whole matched string id is checked function applyHighlights text if sel original return text if showdiff is checked return text let ret text let owords original split g owords owords map name name toLowerCase owords owords filter el return el trim length 1 ignore single letters owords new Set owords owords owords sort function a b return b length a length for let k 0 k owords length k let regEx new RegExp escapeRegExp owords k gi text text replace regEx 1 mark 2 mark 3 text text replace regEx 1 mark 2 mark 3 text text replaceAll owords k mark owords k mark end for k return text function handleInput var text textarea val var highlightedText applyHighlights text highlights html highlightedText function handleScroll var scrollTop textarea scrollTop backdrop scrollTop scrollTop var scrollLeft textarea scrollLeft backdrop scrollLeft scrollLeft function bindEvents textarea on input handleInput scroll handleScroll bindEvents handleInput script script console log ready script