How to highlight specific words in contenteditable div in html

Question

Actually I am making a online code editor. I need to change color of words like "void" , "digitalWrite" etc when user types in my contenteditable div. For example if anyone types void then color of only void should become red How can I do these. Here is html

<div id="mydiv" contenteditable></div>

You could read this question https://stackoverflow.com/questions/119441/highlight-a-word-with-jquery — fynsta, May 05 '21 at 18:05
You can add onChange to your div and call the function given [here](https://stackoverflow.com/a/59362131/12831292) — PiracyIsillegal, May 05 '21 at 18:18

ShadowLp174 · Answer 1 · 2021-05-05T18:17:30.160

try it by adding an input event listener to the div and if there is a keyword like void, then you could surround it with a span with a specific color.
Pls don't do this!!! This is a very big vulnerability because anyone can code for you.
But if you really need this, you can use this code:

 document.querySelector(“.editor”).addEventListener(“input”, () => {
   var content = document.querySelector(“.editor”).innerHTML;
   var newContent = content.substr(0, content.search("void")) + "<span>void" + "</span>" + content.substr(content.search("void") + "void".length, content.length);
 }, false);

Sry if its not working, I hate coding on phone...

How to highlight specific words in contenteditable div in html

1 Answers1