How to change color of a specific word in an INPUT box

Question

Hi. I'm trying to make a basic text editor kind of thing as practise in HTML. I want that when a user enters a specific word, say 'print', the word, and only that word changes color inside the TEXTAREA. Also how can I change the position of the cursor in the input field at my will, i.e. the coder's will.

Thank you in advance for your help.

Here's my trial, it doesn't change the text color, only inserts an indent if you write an 'if' statement (python)
https://code.sololearn.com/WQu1zTs29i83/?ref=app

Answer 1

Well, as I said, I am just making it for practise. So I wanted to know how to do that on my own.
Still thanks for you time though

Answer 2

This needs to be edited.. But spent 2hrs on this..

You could use div with content editable true to format it.
https://code.sololearn.com/WxqEdrEa7jPH/?ref=app

Answer 3

https://code.sololearn.com/Wcm88SFnn1mz/?ref=app

I have seen source code of a text editor

what they do is they have two layers , one for entering text (that textarea)
and another for hilighting text (div)

the text color of textarea is transparent and that div is just behind that ... so as soon as you type something in textarea it will be copied to that div and since text area is invisible , the div text is seen through it ... now all you need is to perform some string manipulations to insert some html elements inside parts you want to highlight and use div.innerHTML=manupulated text

one of my old code doing exact same thing : https://code.sololearn.com/WgCLgzWkadR2/?ref=app

almost 2 years xD
i was just checking your awesome profile and found this unanswered questions

Answer 4

Or you can check out highlight.js https://highlightjs.org/