Develop Reference

Selecting parts of div text via the code

Is it possible to select specific text inside a div using the code. I have a div of text, and I need to iterate through each word selecting it individually, then deslecting and onto the next word.
I'm not talking about simulating a select by changing the background css of the words requiring highlighting, but actually selecting it so the outcome is the same as if the user used the mouse to select it.
I know it's possible inside a text area input, but is it possible on a Div?
------------------------UPDATE------------------------------------------
Ok this is where I'm at with it after having another look at it today. I can select all the text in a span, but not specifically a range of words within that span. The closest I have come ( code shown below... ) is selecting the range manually, then removing the selection, then reapplying it.
<div contentEditable = 'true' id="theDiv">
A selection of words but only from here to here to be selected
</div>
<script type="text/javascript">
setInterval( function() {
var currSelection = window.getSelection();
var storedSelections = [];
if ( currSelection ) {
for (var i = 0; i < currSelection.rangeCount; i++) {
storedSelections.push (currSelection.getRangeAt (i));
}
currSelection.removeAllRanges ();
}
if ( storedSelections.length != 0 ) {
currSelection.addRange( storedSelections[0] )
}
}, 1000 );
</script>
The stored selection range object has a startOffset and endOffset property. My question is how do I set this alongside the initial selection via the code ( not via a mouse select ) ?

Please read this article, it's difficult to summarise, so better read it:
http://www.quirksmode.org/dom/range_intro.html
This answer here can be useful too:
Can you set and/or change the user’s text selection in JavaScript?

Turns out it's fairly straightforward...
<div id = "theDiv">adsf asdf asdf asdf</div>
<script type="text/javascript">
var theDiv = document.getElementById('theDiv')
theDivFirstChild = theDiv.firstChild;
var range = document.createRange();
range.setStart( theDivFirstChild, 2 );
range.setEnd( theDivFirstChild, 8);
window.getSelection().addRange(range);
</script>

Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index

What is problem here?
if ( window.getSelection() )
EditField = window.getSelection().getRangeAt(0);
throws error:
Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index.

The problem seems to be WebKit-specific; I could not reproduce it in IE or Firefox. As OP already mentioned, the error on Google Chrome is:
Uncaught IndexSizeError: Failed to execute 'getRangeAt' on 'Selection': 0 is not a valid index
Safari has the same issue, but the message is different:
INDEX_SIZE_ERR: DOM Exception 1: Index or size was negative, or greater than the allowed value.
Typically happens in simple WYSIWYG editors. Example:
<form name="frm">
<div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;">
Text inside my editor.
</div>
Click this button to insert some text into the text editor:
<button type="button" onclick="doInsert('TEST');">Insert</button>
</form>
<script>
function doInsert(text) {
var sel = window.getSelection && window.getSelection();
if (sel) {
var range = sel.getRangeAt(0); // error here
var node = document.createTextNode(text);
range.deleteContents();
range.insertNode(node);
}
}
</script>
Once the page has loaded, click the button; you will see the error message in the JavaScript console (Chrome) or error console (Safari). But if you click anywhere inside the editor section before clicking the button, the error will not occur.
This problem is easy to prevent; always check rangeCount before calling getRangeAt:
function doInsert(text) {
var sel = window.getSelection && window.getSelection();
if (sel && sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
...
Of course, you can avoid the situation by giving the editor focus (with method focus) upon page load.
However, there are rare events that cause your editor to lose its selection range later on. So far, I have only been able to reproduce this with a multi-select list control:
<form name="frm">
<div contenteditable="true" style="border:1px solid grey;height:8em;width:100%;">
Click to position the caret anywhere inside this editor section.
</div>
Next, select an item from this list:
<select id="insertables" multiple="multiple">
<option>foo</option>
<option>bar</option>
<option>baz</option>
</select>
<br />Finally, click this button to insert the list item into the text editor:
<button type="button" onclick="doInsert(frm.insertables.value);">Insert</button>
</form>
<script>
function doInsert(text) {
var sel = window.getSelection && window.getSelection();
if (sel) {
var range = sel.getRangeAt(0); // error here
var node = document.createTextNode(text);
range.deleteContents();
range.insertNode(node);
}
}
</script>
Again, I can prevent the error by checking rangeCount. But the problem remains that my button does not insert the selected list item at the last known caret position, as it was supposed to do. Method focus does not help; it will reset the caret position to the top left position in the editor.
A solution is to continuously save the current selection range (for this purpose, trap event SelectionChange):
var savedRange = null;
document.addEventListener("selectionchange", HandleSelectionChange, false);
function HandleSelectionChange() {
var sel = window.getSelection && window.getSelection();
if (sel && sel.rangeCount > 0) {
savedRange = sel.getRangeAt(0);
}
}
And restore it when the button is clicked:
function doInsert(text) {
var sel = window.getSelection && window.getSelection();
if (sel && sel.rangeCount == 0 && savedRange != null) {
sel.addRange(savedRange);
}
if (sel && sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
var node = document.createTextNode(text);
range.deleteContents();
range.insertNode(node);
}
}
Fiddle: http://jsfiddle.net/stXDu/

The exact way to address this problem (like 90% of everything in JavaScript) is object detection; selection related isn't as straight forward of course:
if (window.getSelection().rangeCount >= 1) {var r = window.getSelection().getRangeAt(0);}
To test throw window.getSelection().rangeCount in to a console when there is no selected text and it'll return 0; with a selection it'll return 1. I am not sure however if and how you could manage to get it to return 2 or greater.

I have some solution in my project
use iframe as WYSIWYG editor
we set the editwin as the window of the iframe
every time before insert something to the editor by code, you should use the below code first.
editwin.focus();
editwin.document.body.focus();
use textarea as editor
set textobj as the dom of the textarea
same way like up, but different code
textobj.focus();

Here is something to consider: have you disabled selection somewhere in your code? If so, in some situations you may want to first enable selection, preferably in a mousedown event or before focusing on your element (NB!), before getting the range. Doing this has solved my version of the problem.
$('#MyEditableDiv').on('mousedown', function (e) {
$(document).enableSelection();
});

Tag few words from text

We have a HTML page. Is it possible to select (by mouse) few words of a paragraph, get reference to those selected words and encapsulate them, say, by the <span>...</span> tag programatically? We can use jQuery or HTML5/CSS3?

You can use a mouseup handler and use getSelection. Say you have a div called testtagging, then this is a way to add a span to a selected text within that div. See this jsfiddle.
$('#testtagging').on('mouseup',tag);
function tag(e){
tagSelection('<span style="color:red">$1</span>');
}
function tagSelection(html) {
var range, node;
if (document.selection && document.selection.createRange) {
//IE
range = document.selection.createRange();
range.pasteHTML(html.replace(/\$1/,range.text));
return true;
}
if (window.getSelection && window.getSelection().getRangeAt) {
//other browsers
range = window.getSelection().getRangeAt(0);
node = range.createContextualFragment(
html.replace(/\$1/,range.toString())
);
range.deleteContents();
range.insertNode(node);
}
return true;
}​
[edit] adjusted for use with IE too. JsFiddle is also adapted

JSFiddle working example
Propose to wrap all paragraph words into span elements:
var r = /(\S+)/ig;
var text = $("p").text();
$("p").html(text.replace(r, "<span class='w'>$1</span>"));
Then bind hover/click events:
$("p > .w").on("hover", function()
{
$(this).toggleClass("hover");
})
.on("click", function()
{
$(this).toggleClass("selected");
});
If you want to parse words from selected text range, you should use window.getSelection().
Refer to this question or ask me to adapt this code.

Saving and Restoring caret position for contentEditable div

I have a contentEditable div, the innerHTML of which can be updated through AJAX while editing. The problem is that when you change the contents of the div it moves the cursor to the end of the div (or loses focus depending on the browser). What is a good cross-browser solution to store caret position before changing innerHTML and then to restore it?

back to 2016 :)
After I came across solutions here and they did not suit me, because my DOM was replaced completely after each typing. I've done more research and come with a simple solution that saves the cursor by character's position that works perfect for me.
The idea is very simple.
find the length of characters before caret and save it.
change the DOM.
using TreeWalker to walk just on text nodes of context node and counting characters until we got the right text node and the position inside it
Two edge case:
content removed completely so there is no text node:
so: move the cursor to the start of the context node
there is less content than the index pointed on :
so: move the cursor to the end of the last node
function saveCaretPosition(context){
var selection = window.getSelection();
var range = selection.getRangeAt(0);
range.setStart( context, 0 );
var len = range.toString().length;
return function restore(){
var pos = getTextNodeAtPosition(context, len);
selection.removeAllRanges();
var range = new Range();
range.setStart(pos.node ,pos.position);
selection.addRange(range);
}
}
function getTextNodeAtPosition(root, index){
const NODE_TYPE = NodeFilter.SHOW_TEXT;
var treeWalker = document.createTreeWalker(root, NODE_TYPE, function next(elem) {
if(index > elem.textContent.length){
index -= elem.textContent.length;
return NodeFilter.FILTER_REJECT
}
return NodeFilter.FILTER_ACCEPT;
});
var c = treeWalker.nextNode();
return {
node: c? c: root,
position: index
};
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.1/prism.min.js"></script>
<link href="https://rawgit.com/PrismJS/prism/gh-pages/themes/prism.css" rel="stylesheet"/>
<style>
*{
outline: none
}
</style>
<h3>Edit the CSS Snippet </H3>
<pre>
<code class="language-css" contenteditable=true >p { color: red }</code>
</pre>
<script >
var code = document.getElementsByTagName('code')[0];
code.addEventListener('input',function () {
var restore = saveCaretPosition(this);
Prism.highlightElement(this);
restore();
})
</script>

I know this is an ancient thread but I thought I would provide an alternative non-library solution
http://jsfiddle.net/6jbwet9q/9/
Tested in chrome, FF, and IE10+ Allows you to change, delete and restore html while retaining caret position/selection.
HTML
<div id=bE contenteditable=true></div>
JS
function saveRangePosition()
{
var range=window.getSelection().getRangeAt(0);
var sC=range.startContainer,eC=range.endContainer;
A=[];while(sC!==bE){A.push(getNodeIndex(sC));sC=sC.parentNode}
B=[];while(eC!==bE){B.push(getNodeIndex(eC));eC=eC.parentNode}
return {"sC":A,"sO":range.startOffset,"eC":B,"eO":range.endOffset};
}
function restoreRangePosition(rp)
{
bE.focus();
var sel=window.getSelection(),range=sel.getRangeAt(0);
var x,C,sC=bE,eC=bE;
C=rp.sC;x=C.length;while(x--)sC=sC.childNodes[C[x]];
C=rp.eC;x=C.length;while(x--)eC=eC.childNodes[C[x]];
range.setStart(sC,rp.sO);
range.setEnd(eC,rp.eO);
sel.removeAllRanges();
sel.addRange(range)
}
function getNodeIndex(n){var i=0;while(n=n.previousSibling)i++;return i}

Update: I've ported Rangy's code to a standalone Gist:
https://gist.github.com/timdown/244ae2ea7302e26ba932a43cb0ca3908
Original answer
You could use Rangy, my cross-browser range and selection library. It has a selection save and restore module that seems well-suited to your needs.
The approach is not complicated: it inserts marker elements at the beginning and end of each selected range and uses those marker elements to restore the range boundaries again later, which could be implemented without Rangy in not much code (and you could even adapt Rangy's own code). The main advantage of Rangy is support for IE <= 8.

Tag-like autocompletion and caret/cursor movement in contenteditable elements

I'm working on a jQuery plugin that will allow you to do #username style tags, like Facebook does in their status update input box.
My problem is, that even after hours of researching and experimenting, it seems REALLY hard to simply move the caret. I've managed to inject the <a> tag with someone's name, but placing the caret after it seems like rocket science, specially if it's supposed work in all browsers.
And I haven't even looked into replacing the typed #username text with the tag yet, rather than just injecting it as I'm doing right now... lol
There's a ton of questions about working with contenteditable here on Stack Overflow, and I think I've read all of them, but they don't really cover properly what I need. So any more information anyone can provide would be great :)

You could use my Rangy library, which attempts with some success to normalize browser range and selection implementations. If you've managed to insert the <a> as you say and you've got it in a variable called aElement, you can do the following:
var range = rangy.createRange();
range.setStartAfter(aElement);
range.collapse(true);
var sel = rangy.getSelection();
sel.removeAllRanges();
sel.addRange(range);

I got interested in this, so I've written the starting point for a full solution. The following uses my Rangy library with its selection save/restore module to save and restore the selection and normalize cross browser issues. It surrounds all matching text (#whatever in this case) with a link element and positions the selection where it had been previously. This is triggered after there has been no keyboard activity for one second. It should be quite reusable.
function createLink(matchedTextNode) {
var el = document.createElement("a");
el.style.backgroundColor = "yellow";
el.style.padding = "2px";
el.contentEditable = false;
var matchedName = matchedTextNode.data.slice(1); // Remove the leading #
el.href = "http://www.example.com/?name=" + matchedName;
matchedTextNode.data = matchedName;
el.appendChild(matchedTextNode);
return el;
}
function shouldLinkifyContents(el) {
return el.tagName != "A";
}
function surroundInElement(el, regex, surrounderCreateFunc, shouldSurroundFunc) {
var child = el.lastChild;
while (child) {
if (child.nodeType == 1 && shouldSurroundFunc(el)) {
surroundInElement(child, regex, surrounderCreateFunc, shouldSurroundFunc);
} else if (child.nodeType == 3) {
surroundMatchingText(child, regex, surrounderCreateFunc);
}
child = child.previousSibling;
}
}
function surroundMatchingText(textNode, regex, surrounderCreateFunc) {
var parent = textNode.parentNode;
var result, surroundingNode, matchedTextNode, matchLength, matchedText;
while ( textNode && (result = regex.exec(textNode.data)) ) {
matchedTextNode = textNode.splitText(result.index);
matchedText = result[0];
matchLength = matchedText.length;
textNode = (matchedTextNode.length > matchLength) ?
matchedTextNode.splitText(matchLength) : null;
surroundingNode = surrounderCreateFunc(matchedTextNode.cloneNode(true));
parent.insertBefore(surroundingNode, matchedTextNode);
parent.removeChild(matchedTextNode);
}
}
function updateLinks() {
var el = document.getElementById("editable");
var savedSelection = rangy.saveSelection();
surroundInElement(el, /#\w+/, createLink, shouldLinkifyContents);
rangy.restoreSelection(savedSelection);
}
var keyTimer = null, keyDelay = 1000;
function keyUpLinkifyHandler() {
if (keyTimer) {
window.clearTimeout(keyTimer);
}
keyTimer = window.setTimeout(function() {
updateLinks();
keyTimer = null;
}, keyDelay);
}
HTML:
<p contenteditable="true" id="editable" onkeyup="keyUpLinkifyHandler()">
Some editable content for #someone or other
</p>

As you say you can already insert an tag at the caret, I'm going to start from there. The first thing to do is to give your tag an id when you insert it. You should then have something like this:
<div contenteditable='true' id='status'>I went shopping with <a href='#' id='atagid'>Jane</a></div>
Here is a function that should place the cursor just after the tag.
function setCursorAfterA()
{
var atag = document.getElementById("atagid");
var parentdiv = document.getElementById("status");
var range,selection;
if(window.getSelection) //FF,Chrome,Opera,Safari,IE9+
{
parentdiv.appendChild(document.createTextNode(""));//FF wont allow cursor to be placed directly between <a> tag and the end of the div, so a space is added at the end (this can be trimmed later)
range = document.createRange();//create range object (like an invisible selection)
range.setEndAfter(atag);//set end of range selection to just after the <a> tag
range.setStartAfter(atag);//set start of range selection to just after the <a> tag
selection = window.getSelection();//get selection object (list of current selections/ranges)
selection.removeAllRanges();//remove any current selections (FF can have more than one)
parentdiv.focus();//Focuses contenteditable div (necessary for opera)
selection.addRange(range);//add our range object to the selection list (make our range visible)
}
else if(document.selection)//IE 8 and lower
{
range = document.body.createRange();//create a "Text Range" object (like an invisible selection)
range.moveToElementText(atag);//select the contents of the a tag (i.e. "Jane")
range.collapse(false);//collapse selection to end of range (between "e" and "</a>").
while(range.parentElement() == atag)//while ranges cursor is still inside <a> tag
{
range.move("character",1);//move cursor 1 character to the right
}
range.move("character",-1);//move cursor 1 character to the left
range.select()//move the actual cursor to the position of the ranges cursor
}
/*OPTIONAL:
atag.id = ""; //remove id from a tag
*/
}
EDIT:
Tested and fixed script. It definitely works in IE6, chrome 8, firefox 4, and opera 11. Don't have other browsers on hand to test, but it doesn't use any functions that have changed recently so it should work in anything that supports contenteditable.
This button is handy for testing:
<input type='button' onclick='setCursorAfterA()' value='Place Cursor After <a/> tag' >
Nico