找 。 （期间）插入之前和之后

Question

我想找到第二个。 （div）插入div之前和之后，contentEditable属性设置为TRUE。

例如，如果我将该字符串放入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>

如果有人插入了某些东西（右键单击或直接使用键盘），我想知道他插入文本的位置，并找到插入前后的第二个句号，放<br/>就在两个时期之后。

在这里，如果有人在“Vivamus”和“sed”之间插入一些像“新文本”这样的思考，我想这样做：

<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>

我真的不知道如何找到插入以及如何查找句点（我使用.find(":contains('.')")成功，但我认为还有另一种更好的解决方案......）

提前感谢您的帮助！

Answer 1

由于浏览器的差异，找到插入位置只是一件令人讨厌的事情，但是有些图书馆可以做到这一点（google“javascript caret position”）。

一旦你有了插入符号位置（例如100），找到它周围的句点：

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

.indexOf和.lastIndex函数采用第二个参数作为偏移量。 "foo".indexOf('o') == 1，而"foo".indexOf('o', 2) == 2

Answer 2

javascript Range - 对象可以为您做到这一点。保存startposition（startContainer为您提供'selection'的startNODE，startOffset将为您提供相对于startContainer的确切位置）。只需使用范围来检查“选择”（尽管没有选择）。保存endposition（与start相同，但使用endContainer和endOffset），并在那里插入<br />。 Llorem ipsum blabla被视为一个文本节点，而不是像你的div一样包容。