We Keep Coding

How do I stop cursor moving to the start every time innerHTML is changed?

I have a function that separates words into separate span tags and updates the div I am typing into but every time I update the innerHTML the cursor moves to the start of the box so the next character I type outputs behind the last one instead of after it. Could someone tell me how I can stop the cursor from doing this?
Here is my code
const editorDiv = document.getElementById('editor');
function wrapWords(str, tmpl) { //separates words into <span>
return str.replace(/\w+/g, tmpl || "<span>$&</span>");
}
editorDiv.addEventListener('keydown', function(event) {
editorDiv.innerHTML = wrapWords(editorDiv.innerText)
});
<div id="editor" contenteditable="true">
<span>hello</span>
</div>
When I type into the div text looks like this:
.siht ekil skool txeT

One way I have solved this in the past is to use 2 seperate elements, positioned on top of each other, with position: absolute, so that they overlap in a pixel-perfect manner.
The element on top is a regular input element, and its text color is set to transparent.
The element behind it contains the styled text (spans etc.)
This way, you can replace the styled content as the user types, without interfering with the input element's cursor at all.
Sorry that I don't have an 'essential code snippet' at hand, but I hope you get the idea. It did work well in practice for me.

How to make a div to be a custom mouse cursor being able to select text?

Here's what I've just made:
The blue dot you see is a div which I want to be a cursor. Here's some code I have now:
function handler(e) {
var coords = getCoords(document.getElementById("cursor"));
var pageY = coords.top;
var pageX = coords.left;
var element = document.elementFromPoint(pageX - 1, pageY - 1);
}
This code finds a node which is under that blue dot coordinates and works great (at least for now). That blue dot has the id "cursor".
The thing I actually want to do now is to be able to select text which is under that cursor. I've got this:
<span>Text sample sample sample text</span>
How can I select a part of this text from here to here? (as an example). Just to select a part of this text (which is in a span element) with moving that cursor through the text selecting it at once as I would do with my mouse? I need to get a character which is under that blue dot? But how?
Is it possible? I know that I can actually select a whole span element using document.createRange, but the point is that I want to select only a part, and this part to be calculated based on the coordinates of the cursor (blue dot). Maybe, if it's not, there's some other ways to do that?

How to make user input unaffected by span elements color style

I have some words in a content editable <div> that needs to be a different color from the rest of the text. The problem is that I don't want the user to be able to use the different color style and they should still be able to delete the blue word.
<div id="textarea" contenteditable>Hello world<span style="color: blue">!</span>
</div>
Is it possible for the users' input to be unaffected by the color style?

Instead of making the entire DIV editable, break it into separate spans, so you can specify the individual editability.
<div id="textarea"><span contenteditable>Hello world</span><span style="color: blue">!</span>
</div>

You haven't really provided enough for us to go on - eg. what are the rules which determine what is blue and what is not? Is the blue text always an exclamation mark? Does it always come at the end?
What it sounds like you will need is to build a simple lightweight code editor and apply the rules you desire. The way this works is you create a transparent editable div in the same space as a "display" div. The content of the editable textarea is invisible and the contents of the "display" div are visible. For every key stroke, you take the content of the editable textarea and write it to the "display" div and apply any custom rules. Here's a simple fiddle showing what I mean:
https://jsfiddle.net/ymdrfupb/1/
const editable = document.querySelector('.editor > [contenteditable]');
const display = document.querySelector('.editor > .display');
function setDisplayContent(text) {
// wrap any non-alphanumeric trailing characters with a blue span
display.innerHTML = text.replace(/([^\w]+)$/, '<span class="blue">$1</span>');
}
editable.addEventListener('input', (ev) => {
setDisplayContent(ev.target.innerHTML);
});
setDisplayContent(editable.innerHTML);

Display huge text (partly colored)

I am curently working on one visualization, using JavaScript, which should deal with large amount of text.
In each sentence there are at least couple of words which I need to color, which means that a single sentence would look something like that:
"Word word word coloredWord word word coloredWord coloredWord word...".
Currently for each part without coloredWord I am creating a span element and appending a text node to it. And also each coloredWord is put in one span (I am using spans to be able to set classNames).
However it takes too long to display it.
I have tried to use fragment and also to first set the div.style.display to "none" till all nodes are created. But I could not see any difference.
Is there maybe another way how to display such a text where huge part of it needs to be colored in different colors?

As #monxas mentioned you could use spans inline like so
<p>Test test <span>colored</span> test test </p>
css
span{
color:red;
}

Style text inside an HTML textarea

My problem is that I have textarea and want to find a specified string and mark all of its occurences (something similar to what regex101.com does with regex matches).
This leads me to a more general question (see my question title) and I would like to learn if the following can be applied to parts of text inside a textarea:
change font color
change background color
change font style (bold, italic)
change font size
Should I use something which already exists (like codemirror)?
I would also appreciate it if someone could explain the idea behind this (for example regex101.com has a textarea but also uses some span elements to highlight the matches)

Have you tried doing something like:
var textArea = document.getElementById("textArea");
textArea.style.color = 'Red';
textArea.style.backgroundColor = 'Black';