We Keep Coding

Select text occurrences in dom provided by input text

I'm trying to build some search engine on my nwjs application and for several reasons, I can't use APIs like Mark.js because it causes dom changes wrapping some HTML tag around the word I want to find. That is why I want to use text selection to represent the highlight but I don't know-how.

Sounds like you want this:
https://github.com/nwutils/find-in-nw
It will also add dom wrappers, but removes them when done.
The only other way I can think of doing what you want would be:
Detect the x,y coordinates of text on the page
Good luck. Text reflows based on layout and browser width. If the text is not wrapped in an element I'm not sure how to get it's coords or size (bounding box/rect)
Create an absolute positioned element above it with a mix-blend-mode: darken
This would work for dark text on a background lighter than your highlight. So like white text on a black background with a yellow highlight. But if it's white text on a black background you'd need mix-blend-mode: lighten. Also, good luck determining the background color and text as those can be stored on basically anywhere in the DOM.
You're better off just using that library, or finding a different way approach or define your problem space.

How to detect if there is text in textarea tag under a rect shape div?

Here is my situation as you see in the picture. I am working on a markdown editor. A floating command button panel is visible, when mouse over the textarea. The command button panel is absolute positioned at the top right corner of the textarea.
But some times, text in textarea is blocked by the command panel, making selecting the text underneath it impossible.
I'd like to detect a situation when there is a text under the command panel, then apply a class to shift command panel up 50px.
Here is my question: How to detect if there is text in textarea tag under a rect shape div?
Thanks!
AS you can see in the below picture, the command panel hovering over textarea blocks the text. I'd like to detect this situation.

So, one thing that you can do is get the width of the text area. AKA the cols attribute of the textarea.
Once you have the width of the text area, you get the text (textarea value) within the text area and find the length of that text. If the length of the text within the textarea is greater than the number of cols you know that the text will span the length of the textarea.
One very apparent caveat is that lets say you are writing a poem or something and the text never spans the length of a full line, that length will be longer than the number of cols while never actually spanning the full length of the textarea
Another inherent issue is that if you start scrolling in your textarea new text may come underneath the controls.
I don't really think it would be possible to detect whether or not text inside of a textarea is underneath a certain div.
What I would probably suggest doing is just always have the controls div 50px higher than the textarea. Simple solution, that will still look good and won't require any crazy coding on your part, because I can't really picture an easy way (or any way for that matter) to do this.
Hope this helps.

Ok, I've had to do something similar for a resizing textarea in the past. The secret is to have an offscreen input or textarea with variable width. As the text is updated in your visible text field, copy the text over to the off screen element element. The shadow element has to have all of the same styling that affects the visible element (padding, border, width, height, font size, etc) to make sure you get accurate results. Then measure the width of the shadow element on each text change.

How to change blinking cursor/caret in textarea

I have a textarea with transparent text, with an underlying pre that displays the text via js, so it looks like the user is typing dynamic text as they go. It works on the same concept as the background colors on this Regex Tester, except I'm changing text color and background color, so I want transparent text in the textarea.
However, defining the textarea's color as transparent, also makes the blinking cursor transparent, which is disorienting. Is there a way to only change the blinking cursors color or only change the text's color and not affect the blinking cursor?
I have browsed other questions, but they haven't provided sufficient answers.
Note: I am referring to the blinking textarea caret, not the mouse cursor. When you click in a textarea or a text input, a blinking textarea "cursor" or caret pops up. This question is about that, not about the mouse cursor.

The easy solution, but working only if you use a monospaced font (like Courier or Courier New) - don't set textarea's color to transparent, but on keyDown fill it with spaces insead of any other characters:
on keyDown ↓
get the character ↓
put it in the underlaying <pre> tag ↓
put a space in the textarea
You would need to get the caret position to place the space and the character in appropriate place, but there are scripts for that already (this one for example).
I can create a fiddle/plunkr example for you if you want.
The thing is getting harder if the font you are using is not monospaced, but sice you are using a <pre> tag you should be ok with this one (if anyone is curious I can describe the non-trivial, time consuming and definately not-IE-compatible approach for not monospaced fonts I came up with).
EDIT:
Actually you can also get the caret position from the transparent textarea and move a 1px-wide black div to the correct position (for not monospaced fonts). You can also blink it using CSS animations or Javascript.

try the css property caret-color
docs here: w3schools - caret color
textarea {
caret-color:red;
}
<textarea></textarea>

MS Word like DOM manipulation in HTML

Have a look at this video. In MS Word, one can drag any element anywhere. Based on that, the remaining content (only text, in this video example) reflows and wraps to fit. For example, when two images are side by side and one is dragged away or towards the other, the text in between shrinks or expands accordingly.
Is it anyhow possible to mimic such behavior in HTML, with Javascript? The biggest difficulty I find is the fact that elements own their content in HTML. So, a span owns its text, a div owns its text. But in the video, we can see that the text element in between the images hasn't exactly any content of its own, it gets whatever fits into it while transferring text from left to right. That is why, its content changes with change in orientation. Also, its text is not continuous. It contains bits and pieces of multiple sentences.
Are such manipulations possible with HTML and Javascript? If so, any heads-up will be nice...

Have a look at css exculsions:
http://adobe.github.com/web-platform/samples/css-exclusions/
it might help you acheive what you want. note that it is an experimental feature.

How can i determine the position of textarea cursor relative to the window in x,y?

I am trying to create a javascript code editor just for learning and I am doing a great job so far. The only thing is that I wanna place the autocomplete box in a position relative to the text cursor in textarea. So how can I determine the cursor position relative to the upper left corner of the window ?
Something else please, how can i capture the tab & enter keys press in a textarea ?
I am using a semi-transparent textarea (semi to keep the cursor blinking) with underlying div to enable code highlighting later on. Is this the best technique to do that ? Or there is a way to make textarea accept rich text or HTML ?

I suspect that you can do all that without a textarea. Read up on the contentEditable property. Here's a demo. This is how the Google Docs editor is implemented, incidentally. And here's a stackoverflow question dealing with finding the cursor position in a contentEditable div.