16

我有一个简单的 contenteditable div，里面有一些文本。在 onkeyup 事件中，我想基于正则表达式替换 div 的全部内容（innerHTML）。

例如，

HTML：

some text, more text and $even more text

我计划在其中使用 $ （甚至在上面的示例中为 $）获取所有文本并将其包装在 span 标签中的函数：

div.onkeypress = function() { 
     div.innerHTML.replace(/(some_regexp)/, "<span class='class'>$1</span>"); 
};

问题是在这样的替换光标跳转到 div 的开头之后。我希望它保持在以前的位置。

我想我必须在更改之前保存光标的坐标，然后以某种方式使用它们设置光标，但我该怎么做？:)

我尝试保存范围对象，但编辑后我相信它指向无处。

谢谢！

4

3 回答 3

2

问题是您正在更新整个 innerHTML，但只有一小部分在更改。您不能使用正则表达式和 oa 批量替换。您需要扫描 div 并查找匹配项，从中创建文本范围并使用 span 包装内容。请参阅http://www.quirksmode.org/dom/range_intro.html，以编程方式创建范围。

但是，我认为如果光标在要替换的文本中，这将不起作用，但这是一个开始。

于 2010-09-28T16:57:39.193 回答
2

我从另一个论坛拿了这个。它解决了我的问题。

好的，我设法解决了它，如果有人感兴趣，这是解决方案：

存储选择 x, y：

代码：

cursorPos=document.selection.createRange().duplicate();
clickx = cursorPos.getBoundingClientRect().left; 
clicky = cursorPos.getBoundingClientRect().top;

恢复选择：

代码：

cursorPos = document.body.createTextRange();
cursorPos.moveToPoint(clickx, clicky);
cursorPos.select();

你可以看到它在这里工作：

http://www.tachyon-labs.com/sharpspell/

于 2011-01-17T17:07:49.577 回答
1

您知道要替换的文本。所以你知道那个文本的位置。只有你要放置新文本。然后位置也是一样的。编写新的html后，yu可以设置光标。

例如

我不明白这个问题

问题的位置是 5 我替换它

我不明白答案

使光标位置为 5

http://ajaxian.com/archives/javascript-tip-cross-browser-cursor-positioning

http://hartshorne.ca/2006/01/23/javascript_cursor_position/

http://geekswithblogs.net/svanvliet/archive/2005/03/24/textarea-cursor-position-with-javascript.aspx

于 2010-09-30T18:05:44.657 回答