Exactly match the textarea with an overlaying div Simple test usinga textarea which can be used to receive input from users type in data However often words will want to be highlighted or visual overlay to show additional details e g certain words mistakes recommendations Minimum working example with a div to display overlapping visual information Todos Tidy up code and adding a method to identify words Add a set of methods to search index specific words Optimize to identify which words text has changed currently updates everything Add other visual candy e g rounded boxes with different colors to mean differnet things small icon warning top left or right of words underline feature color certain words different colors Hover over tooltips Extra information number of characters words Writing tool squiggly lines right click on words for lookup data style box sizing border box body min height 300px font 1rem 1 4 system ui sans serif textstyle box sizing border box position absolute left 0px top 0px width 100 height 100 white space pre wrap border 1px solid black font inherit padding 0 margin 0 background color transparent color red overflow hidden overflow auto resize none line height 1 0 border none font size 12pt white space pre wrap style div style width 100 height 200px position relative border 1px solid gray textarea class textstyle onkeydown dochange this oninput dochange this onscroll dochange this textarea div class textstyle style pointer events none color blue div div script function dochange val let tx val value tx tx replaceAll amp tx tx replaceAll lt tx tx replaceAll gt tx tx replaceAll g quot tx tx replaceAll g apos draw border around the word cat tx tx replaceAll cat span style position relative span style position absolute border 1px solid green width 100 height 100 span cat span draw border around the word tx tx replaceAll span style position relative span style position absolute border 1px solid orange width 100 height 100 span span val parentNode children 1 innerHTML tx val parentNode children 1 scrollTop val scrollTop onload function let ta document getElementsByTagName textarea 0 ta value Cats like milk but cats also like to play cat and cats bats and tcats Hash test dochange ta script
low auto resize none line height 1 0 border none font size 12pt white space pre wrap style div style width 100 height 200px position relative border 1px solid gray textarea class textstyle onkeydown dochange this oninput dochange this onscroll dochange this textarea div class textstyle style pointer events none color blue div div script function dochange val let tx val value tx tx replaceAll amp tx tx replaceAll lt tx tx replaceAll gt tx tx replaceAll g quot tx tx replaceAll g apos draw border around the word cat tx tx replaceAll cat span style position relative span style position absolute border 1px solid green width 100 height 100 span cat span draw border around the word tx tx replaceAll span style position relative span style position absolute border 1px solid orange width 100 height 100 span span val parentNode children 1 innerHTML tx val parentNode children 1 scrollTop val scrollTop onload function let ta document getElementsByTagName textarea 0 ta value Cats like milk but cats also like to play cat and cats bats and tcats Hash test dochange ta script