We Keep Coding

Contenteditable div set caret after replacing text with HTML

I'm trying to make a web-based code editor, and I came up with a way to sweep the entire text and replace anything that matches my super simple regex to colored HTML. See it here:
$("#text-area").on('keyup', function(e){
var html = $("#text-area").html();
var filter = html.replace(/function/g, '<span style="color:pink;">function</span>');
$("#text-area").html(filter);
});
I spent hours digging stackoverflow and found similar situations, but subtly different that I can't apply to my situation here. Here is the problem:
1) Once I sweep the text and replace selective words to colored HTML, the caret is returned to the beginning of the div.
2) Since it is a code-editor(reading other files), I need white-space: pre or pre-wrap. But then caret positions are the same for any number of line breaks, so the caret doesn't move and new lines are just added below the caret, and from any new empty line it jumps up to whichever line isn't empty.
I have the simplified version of my situation in the JSFiddle

There is better ways but this is the close solution I got to yours.
Have something have something like when you detect the word you like:
<div>
<span class="normal_text"> First part </span>
<span style="color:pink;">function</span>
<span class="normal_text"> | </span>
</div>
And in the end put the selection equal to range with offset 0 and focus node as the last span. Your function looking for the word "function" should also be listening the last span only to repeat everything.

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;
}

long String in a paragraph without break the full characters

Is that possible to make a long string like below come in next line(in a paragraph) and not breaking the characters in a long/short string? If long string comes, then the full string need to go next line. (Not half words in first line, and remaining half in next line.)
currently it is showing like this,
My sample text ha
s errors as it is displaying a long strings in next l
ine with breaking the word.
I need like this,
My sample text has no errors as it is displaying a
long strings in next line with breaking the word.
Kindly give me any example in jsfiddle or any thing.
Thanks in advance!

try this
word-break: keep-all;
instead of
word-break: break-all;

Is there anyway to set the letter-spacing automatic based on the div width?

I have a fluid width website where I planned to place some text inside <div>. The idea is
<div>FIRST LINE TEXT HERE</div>
<div>THE SECOND LINE TEXT HERE. BUT QUITE LENGTHY</div>
<div>THIRD LINE IS HERE. NOT THAT MUCH LENGTH<div>
I need to display all the three lines to look like a justified LETTERS, by adding letter spacing dynamically based upon the content inside and available out <div> width.

You could compute the widths of the texts in JavaScript, then calculate the letter spacing needed, and add it. Note that this would treat word space like any other character, so the more spacing is added, the closer to each other would words appear to be. The results would be typographically questionable in other ways, too: words don’t look good if letters get too spaced.
If just a little spacing would be needed, it’s usually better to add word spacing, and you could do that for some browsers (not Chrome) with text-align-last: justify. You could consider using additionally text-justify: newspaper, as it may put part of the added spacing between letters, not just between words. See jsfiddle.

I would suggest you to try this..give three different classes to the lines ie first_line, second_line and similarly third_line
Then write css for the classes. for first_line u keep the letter-spacing to wat u want. similarly u can give letter spacing for the other two lines as well.

Find a word line number in a paragraph with JavaScript

Let's say I have a very long paragraph. When I click on a line, JS/jQuery will add an empty <span> tag at the beginning of this specific line - right before the first word in this line.
f.e: This is my paragraph:
<p>
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has.
</p>
When I click the second line, a <span> tag will be insert before the first word in the second line.
Any ideas how to do it?

jQuery can't detect where a wrapped line occurs, unless it happens with a hard-coded break (<br /> or similar).
That said, there is one option, although it's a little hacky.
Duplicate the container
Give it a left of -3000 (to make it invisible, without using display:none because that gives it 0 height)
Remove one word at a time (using .lastIndexOf(' ')), and measure the height each time. When it resizes to the smallest non-zero height, that's where you want to insert your <span>, so then...
.substring() with the position you've just found - .substring(0, position) + '<span>' + .substring(position)

Hello Friend You can find the possible duplicate here in the following link
Get caret position in contentEditable div
Hope this solves your problem.