Develop Reference

how can I move cursor at any position after editing text at paragraph contenteditable in js

I have contenteditable paragraph where I can write specific words which will automatically be colored . But when I try to edit already colored text my cursor position moves backward so how can I put my cursor at current position while editing already colored text.
my html code:-
<p contenteditable="true" id="ide" style="border:1px solid red;" >...</p>
my js code:-
<script>
function setEndOfContenteditable(contentEditableElement)
{
var range,selection;
if(document.createRange)
{
range = document.createRange();
range.selectNodeContents(contentEditableElement);
range.collapse(false);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}else if(document.selection){
range = document.body.createTextRange();
range.moveToElementText(contentEditableElement);
range.collapse(false);
range.select();
}
}
$(document).ready(function(){
$("#ide").bind('keyup',function(){
var x = $(this).text();
color(x)
setEndOfContenteditable(this);
});
});
function color(c){
var str = c;
var res = str.replace(/hello|house|car|happy/gi, function myFunction(x)
{
return '<span style="color:red;">'+x+'</span>';});
document.getElementById("ide").innerHTML = res;
}
Many people who try this can say this is correct but please try by typing hello or house or car or happy on contenteditable paragraph it will be automatically colored now go back to edit that colored string.
demo:- https://jsbin.com/nodome/edit?html,output

So, your question is a little bit misleading, your problem is keyup event on ⟵→ arrow keys or Select+All, after every keyup your function trying to detect word and execute color(), so if you use keypress event you can avoid this.
$("#ide").bind('keypress', function() {
var x = $(this).text();
color(x)
setEndOfContenteditable(this);
});
But if you want to execute color() after keyup you need to detect which key pressed and exclude arrow keys.
JSBin

JavaScript - Select span text on mouse hover

I have this HTML code.
<div class="dontsplit" onmouseover="selCode('c111');">
Face savoring delicious food <span class="notranslate" id="c111">😊</span>
</div>
I want to select the value between span tags when mouse hovers the div. The code I am using is this.
function selCode(objId) {
if(document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
} else if(window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
But it doesn't seem to work. How do I get this work?
I repeat. I need to automatically select the text between span when mouse hovers over the div. So it can be copied easily. Thanks in advance!

Your script is working for the first mouseover but the second one inwards is giving the error Discontiguous selection is not supported. so clear the existing selection before doing a new selection.
function selCode(objId) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
}
}
Demo: Fiddle

I think this should help.
You can use jQuery .text() method.
You have a span with notranslate class.
So you can do somthing like this to get the text:
$(".notranslate").text();
http://jsfiddle.net/L8r6ns88/

Try this one. I'm using jquery to make this task done.
HTML
<div class="dontsplit">
Face savoring delicious food <span class="notranslate" id="c111">😊</span>
</div>
JS
$(function(){
$('.dontsplit').on('mouseover','.notranslate', function(){
console.log($(this).text()); //see result
})
})

Highlight text in javascript like Evernote Web Clipper

My current solution is:
Get selected html (include text and html tag), namely: selText
highlightText = <span>selText</span>
Find selText in innerHTML of the body or document (or the element which the mouse dragged in)
Replace with highlightText
But if the document is: a a a a a a and user selects the last a. My function will highlight the first or all a.
Any suggestion?
Thank you.

i think your question is duplicated, anyway i just searched the internet and found this article.
Below the final code to achieve what you ask
function highlightSelection() {
var selection;
//Get the selected stuff
if(window.getSelection)
selection = window.getSelection();
else if(typeof document.selection!="undefined")
selection = document.selection;
//Get a the selected content, in a range object
var range = selection.getRangeAt(0);
//If the range spans some text, and inside a tag, set its css class.
if(range && !selection.isCollapsed)
{
if(selection.anchorNode.parentNode == selection.focusNode.parentNode)
{
var span = document.createElement('span');
span.className = 'highlight-green';
range.surroundContents(span);
}
}
}
I also found this library rangy that is an helper you can use to select text but only works with jquery so i prefer the first vanilla-js solution.
var el = $("<span></span>");
el.text(rangy.getSelection().getRangeAt(0).toString());
rangy.getSelection().getRangeAt(0).deleteContents();
rangy.getSelection().getRangeAt(0).insertNode(el.get(0));
rangy.getSelection().getRangeAt(0).getSelection().setSingleRange(range);
On Range and User Selection
You have to select range using Document.createRange that return a Range object before you can use Range.surroundContents(), you could create a range this way.
var range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
In practice you follow this guide to understand range and selection tecniques.
The most important point is contained in this code
var userSelection;
if (window.getSelection) {
userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
userSelection = document.selection.createRange();
}
After this you can use
userSelection.surroundContents()

Content-editable <span> tag unselects when the mouse button is released

I'm trying to use a content-editable span tag as a variable-width inline text input box. Everything is working fine, except I can't get it to select the whole text when I focus on the box. Tabbing to the editable span works fine, but when I click it, the mouse-up event seems to unselect the selection I just made. I'm using google chrome latest on Ubuntu.
http://jsfiddle.net/6b3tP/
Here's the HTML:
<div>
Inline editable <span contenteditable="true">spans</span> are hard to select.
</div>
And here's the JS:
$('span').focus(function() {
var text_node = this.firstChild;
var text = $(this).text();
var range = document.createRange();
range.setStart(text_node, 0);
range.setEnd(text_node, text.length);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
});

I'd suggest delaying doing the selecting using window.setTimeout() to allow the dust to settle before doing anything. You can also simplify the code a little.
Demo: http://jsfiddle.net/6b3tP/1/
Code:
$('span').focus(function() {
var span = this;
window.setTimeout(function() {
var range = document.createRange();
range.selectNodeContents(span);
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}, 1);
});

Hidden text that can be dragged from the browser?

How can you create an html element that when dragged from the browser into a text editor, hidden text on or in the dragged element will be pasted into the editor?
My first thought was to use the href attribute on the anchor tag:
Drag me into a text editor!
This works great in chrome, but firefox and safari remove spaces from the href value which renders the copied message unusable.
Any ideas?

Instead of manipulating the browser's default behavior for dragging text/links/images, you want to set the data to something arbitrary in the dragstart event.
For example, use the text from a hidden #content:
$('[draggable]').on('dragstart', function(e) {
var content = $(this).find('#content').text(); // Can be anything you want!
e.originalEvent.dataTransfer.setData('text/plain', content);
$(this).addClass('dragging');
});
Here is a working JSFiddle

For versions of IE below 10 which don't support the dataTransfer method, I've discovered another somewhat hacky way to make this work.
Basically you make text invisible with css then use js to select it in the background on hover.
HTML
<div id="drag_area" draggable="true">
<div id="text">
hidden text
</div>
</div>​
CSS
#text { filter:alpha(opacity=0); opacity:0;
overflow:hidden; z-index:100000; width:180px; height:50px }
​
JS
function selectText(elementID) {
var text = document.getElementById(elementID);
if ($.browser.msie) {
var range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if ($.browser.mozilla || $.browser.opera) {
var selection = window.getSelection();
var range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
} else {
var selection = window.getSelection();
selection.setBaseAndExtent(text, 0, text, 1);
}
}
$('#drag_area').hover(function(){
selectText('text');
});
Here it is combined with Anson's solution and a little feature detection:
http://jsfiddle.net/zaqx/PB6XL/
(works in IE8, IE9 and all modern browsers)
EDIT: Updated Fiddle in the comments below.