Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript selection/range framework

I've been working with selection/range objects, and because to the incredible amount of inconsistencies between browsers for specific selection/range stuff (even more than the DOM) I was wondering if there was a framework that would help me get through them.

like image 778
Luca Matteis Avatar asked Jan 25 '10 18:01

Luca Matteis


People also ask

What is selection range JavaScript?

The basic concept of selection is Range, that is essentially a pair of “boundary points”: range start and range end. A Range object is created without parameters: let range = new Range(); Then we can set the selection boundaries using range.

Is there range in JavaScript?

In JavaScript, the range is a function that inputs the beginning and ending index and returns the list of all the integers. It represents the difference between the lowest and highest values. The range function helps in sorting all the numbers between starting and ending points.

How do you create an action for selected text with the selection API?

In this code, we first get a copy of the selection menu control inside <template> , then assign it to the control variable. Next, we write the handler function for the onpointerup event of the element carrying the sample text. Inside the function, we get the selection and the selected string using document.

What is a selection anchor?

The anchor of a selection is the beginning point of the selection.


3 Answers

I've written a new range/selection library called Rangy that is similar in concept to IERange but goes quite a lot further. The core is pretty much complete and currently available to download. I'm currently bugfixing and documenting it and it should be only be a few weeks before a full release.

UPDATE 31 August 2011

Rangy is now stable and at version 1.2 (downloads page).

like image 113
Tim Down Avatar answered Oct 17 '22 15:10

Tim Down


(Made an answer by request ;)

Take a look at IERange:

IERange is a feature-complete implementation of W3C DOM Ranges for Internet Explorer, allowing users to write one cross-browser version of their range manipulation code.

Supports Range APIs:

  • document.createRange()
  • startContainer, startOffset, endContainer, endOffset, commonAncestorContainer, collapsed
  • setStart(), setEnd(), setStartBefore(), setStartAfter(), setEndBefore(), setEndAfter(), selectNode(), selectNodeContents(), collapse()
  • insertNode(), surroundContents()
  • extractContents(), cloneContents(), deleteContents()
  • compareBoundaryPoints(), cloneRange(), createContextualFragment(), toString()

Supports Selection APIs:

  • Range support (Webkit-style)
  • window.getSelection()
  • addRange(), removeAllRanges(), getRangeAt(), toString()
like image 36
Roatin Marth Avatar answered Oct 17 '22 17:10

Roatin Marth


fieldselection is a very usable jquery plugin for selection/range manipulation.

like image 1
miku Avatar answered Oct 17 '22 16:10

miku