Question

I would like to find the second . (periods) before and after a insertion in a div with contentEditable attribute set to TRUE.

For example, if I got that string into a div

<div contentEditable>           
  Lorem ipsum dolor. Sit amet, consectetur adipiscing elit. Duis semper nisl eget 
  neque feugiat consectetur. Vivamus sed mi quis dui sodales euismod et id erat. 
  Cras feugiat interdum ligula, vel. Fermentum orci accumsan quis. Donec ut lacus 
  ipsum, sit. Amet accumsan enim.
</div>

If someone insert something (with a right-click or with the keyboard directly), I would like to know where he insert his text, and find the second period before and after his insertion, to put a <br/> just after the two periods.

Here, if someone insert somethink like “New text” between “Vivamus” and “sed”, I would like to do that:

<div contentEditable>           
  Lorem ipsum dolor. Sit amet, consectetur adipiscing elit.<br/> Duis semper nisl eget 
  neque feugiat consectetur. Vivamus sed mi quis dui sodales euismod et id erat. 
  Cras feugiat interdum ligula, vel.<br/> Fermentum orci accumsan quis. Donec ut lacus 
  ipsum, sit. Amet accumsan enim.
</div>

I really don’t know how to locate the insertion and how to find the periods (I successed with .find(":contains('.')"), but i think there is another better solution…)

Thanks in advance for helping!

Answer 1

Finding the caret position is just plain annoying due to browser-differences, but there are libraries out there that do it (google “javascript caret position”).

Once you have the caret position (e.g. 100), finding the periods around it:

var twoForwardPos = text.indexOf('.', text.indexOf('.', caret+1) +1);
var twoBackPos    = text.lastIndexOf('.', text.lastIndexOf('.', caret-1) -1);

The .indexOf and .lastIndex of functions take a 2nd argument that is an offset. "foo".indexOf('o') == 1, whereas "foo".indexOf('o', 2) == 2