Find

Enter search term in the box below. Search results will be highlighted as you type.




Rangy TextRange Demo

This demo is for Rangy 1.3, which has not yet been fully released.

Rangy's TextRange module provides various methods for navigating the visible text on a page by character or word.

Demos

Find

The find panel is on the left and can be used to search and highlight text on the page, optionally using a regular expression.

Selection snap to words

Selecting via the mouse in the box below will snap the selection to whole words.

Please select some of this text. Don't be shy. Here are some things with debatable word boundaries: 50%, 60:40, flip-flop, tic-tac-toe, fo'c'sle, 'quotes'. You can edit this too.

Snapping to words can optionally include the trailing space, as in the box below:

Please select some of this text. Don't be shy. Here are some things with debatable word boundaries: 50%, 60:40, flip-flop, tic-tac-toe, fo'c'sle, 'quotes'. You can edit this too.

You can also control what constitutes a word. By default, single apostrophes inside a word are allowed, hence "don't" and "fo'c'sle" are considered a single word in all these examples. You may also want to consider hyphenated words as single words, as in the example below:

Please select some of this text. Don't be shy. Here are some things with debatable word boundaries: 50%, 60:40, flip-flop, tic-tac-toe, fo'c'sle, 'quotes'. You can edit this too.

You can also trim ranges and selections. In the box below, try selecting some text that starts and/or ends in a space:

Please select some of this text. Don't be shy. Here are some things with debatable word boundaries: 50%, 60:40, flip-flop, tic-tac-toe, fo'c'sle, 'quotes'. You can edit this too.

Character index-based selection save and restore

Rangy's TextRange module provides a character index-based selection save and restore which is not vulnerable to formatting changes (unlike Rangy's existing selection save/restore module). Try it below:

Select some of this text and manipulate the selection and the formatting using the buttons above.

Moving the caret

The TextRange module provides methods to move the caret as though using the left and right arrow keys. See this in action by clicking in the editable area below and using the buttons to move the caret:

Association football is a sport played between two teams.

It is usually called football, but in some countries, such as the United States, it is called soccer.

    In Japan, New Zealand, South Africa, Australia, Canada and Republic of Ireland, both words are commonly
    used.

Two lines
separated by a <br> element