Syntax Highlighting to TextArea CSS JS As you re aware you can t highlight different words in a textarea underline words background color text in different colors and so on One solution is to add a transparent copy of the contents over the top using a div then each time the textarea contents changes you update the div with the same contents but add additional styling data using spans For this example we split the text up into characters this might seem expensive and a could be easier by grouping words together but this was to allow overlapping styles e g part of a word could be underlined with differnet background colors and overhanging words or comments for each character Generally it isn t that slow it only gets slow if you re dealing with very large text files 1M and even then you d use smarter methods partition the text into what s viewable and only process those parts img style display block margin auto src https notebook xbdev net var images imga6p3wb5TNDGk jpg div Exactly match the textarea with an overlaying div Added some helpers to show how to highlight specific words e g search or if you want to add some style information based on the start to end index into the string 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 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 font family Times white space pre wrap white space break spaces overflow wrap break word overflow hidden textstylediv color blue pointer events none textstylediv active pointer events none color blue style div style width 100 height 25px position relative border 1px solid gray textarea class textstyle onkeydown dosync this oninput dochange this onscroll dosync this textarea div class textstylediv textstyle div div script let hightlights function highlightword arg word color border backgroundColor title if typeof arg undefined return if typeof arg word undefined return if hightlights arg word hightlights arg word color black border none backgroundColor transparent title if typeof arg color undefined hightlights arg word color arg color if typeof arg border undefined hightlights arg word border arg border if typeof arg backgroundColor undefined hightlights arg word backgroundColor arg backgroundColor if typeof arg title undefined hightlights arg word title arg title let highlightranges function highlightrange arg start end border highlightranges push arg function dosync val val parentNode children 1 scrollTop val scrollTop grow textarea val style height auto val style height 0px val style height val scrollHeight px make div same val parentNode children 1 style height val style height also make the parent div same val parentNode style height val style height 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 let tx2 tx forEach c tx2 span class char c span val parentNode children 1 innerHTML tx2 val parentNode children 1 scrollTop val scrollTop let divout val parentNode children 1 Object entries hightlights forEach w i const key w 0 const color w 1 color const border w 1 border const backgroundColor w 1 backgroundColor const title w 1 title let i0 tx indexOf key for let i 0 i 1000 i 1000 max if i0 0 break let i1 i0 key length for let n i0 n i1 n divout children n style color color divout children n style borderBottom border divout children n style backgroundColor backgroundColor divout children n title title i0 tx indexOf key i1 end forEach w highlightranges forEach r const i0 r start const i1 r end const border r border for let n i0 n i1 n divout children n style borderBottom border dosync val onload function let ta document getElementsByTagName textarea 0 ta value Do all cats like milk but some teee cats prefer to play cat and cats bats and tcats Hash test dochange ta highlightword word cat color orange highlightword word test color yellow highlightword word fat color yellow highlightword word test border 1px solid green highlightword word and backgroundColor gray title this is a tool tip highlightrange start 17 end 30 border 2px double red console log ready script
hts arg word border arg border if typeof arg backgroundColor undefined hightlights arg word backgroundColor arg backgroundColor if typeof arg title undefined hightlights arg word title arg title let highlightranges function highlightrange arg start end border highlightranges push arg function dosync val val parentNode children 1 scrollTop val scrollTop grow textarea val style height auto val style height 0px val style height val scrollHeight px make div same val parentNode children 1 style height val style height also make the parent div same val parentNode style height val style height 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 let tx2 tx forEach c tx2 span class char c span val parentNode children 1 innerHTML tx2 val parentNode children 1 scrollTop val scrollTop let divout val parentNode children 1 Object entries hightlights forEach w i const key w 0 const color w 1 color const border w 1 border const backgroundColor w 1 backgroundColor const title w 1 title let i0 tx indexOf key for let i 0 i 1000 i 1000 max if i0 0 break let i1 i0 key length for let n i0 n i1 n divout children n style color color divout children n style borderBottom border divout children n style backgroundColor backgroundColor divout children n title title i0 tx indexOf key i1 end forEach w highlightranges forEach r const i0 r start const i1 r end const border r border for let n i0 n i1 n divout children n style borderBottom border dosync val onload function let ta document getElementsByTagName textarea 0 ta value Do all cats like milk but some teee cats prefer to play cat and cats bats and tcats Hash test dochange ta highlightword word cat color orange highlightword word test color yellow highlightword word fat color yellow highlightword word test border 1px solid green highlightword word and backgroundColor gray title this is a tool tip highlightrange start 17 end 30 border 2px double red console log ready script