识别和格式化 HTML contenteditable 中的 URL，将光标保持在原位答案

【问题标题】：Recognizing & formatting URLs in HTML contenteditable, keep cursor in place识别和格式化 HTML contenteditable 中的 URL，将光标保持在原位
【发布时间】：2013-01-26 17:41:46
【问题描述】：

如上一篇文章所述

jQuery - Identify and mark link in textarea

我想创建一个输入框，在其中自动识别、格式化 URL，并在 URL 之后的空白处或模糊处为每个 URL 调用一个方法。我们还有一个问题，尽管用于设置检测到的链接周围的格式化 p-tags 的elem.html(newText); 工作正常，但之后将光标设置为开头。因此，当您编写“this is a www.url.com”并按空格键时，URL 会被正确识别并格式化并调用方法“linkDetected”，但光标会移动到输入字段的开头，不可能继续写。

我创建了一个 JSFiddle，您可以自己查看代码和问题：

http://jsfiddle.net/TgAGk/1/

感谢任何帮助。

【问题讨论】：

我最近为 contenteditable 回答了一个非常相似的问题：stackoverflow.com/questions/14636218/…。这是一个 jsFiddle 示例：jsfiddle.net/8hYSc/3。可以改进为不添加指向仍在插入符号的文本的链接。
更新了仅在按下回车键或空格键后才触发链接的示例：jsfiddle.net/8hYSc/4
@TimDown 这很好，除了你必须输入 http:// （单独使用 www. 不起作用）并编辑链接或删除链接后的空格并附加一些内容（假设你输入“youtube.com”，删除空格并附加“/videos”）不起作用...
同意，它肯定需要一些调整。正则表达式当然不是我推荐的：我使用了一个非常简单的说明性正则表达式，因为编写一个像样的正则表达式的问题并不简单，并且与中心问题无关。虽然这是一个起点，插入符号保存/恢复的东西应该很有用。
请查看我在下面附加的代码 - 你知道它为什么不起作用吗？ @TimDown

标签： javascript jquery range selection contenteditable

【解决方案1】：

好的，我已经添加了我在这里找到的 setCaret 函数：

Set cursor position on contentEditable <div>（@Nico Burns 回答）

http://jsfiddle.net/TgAGk/2/

var nouse = 'ignore this and thanks for the unnecessary code-check';

但是，它根本不起作用。有人看出我的缺点了吗？

【讨论】：

问题是选择保存/恢复依赖于 DOM 不变，而您的代码正在替换 HTML 并因此更新 DOM。这就是为什么您需要某种独立于 DOM 的方式来表示选择的原因，例如基于字符偏移的方法。
谢谢蒂姆 - 关于如何到达那里的任何想法？如果我们只是删除链接突出显示，其他一切都可以正常工作，但这不是我想要的......
我链接到的示例对我来说似乎是一个合理的起点。
蒂姆，这就是我朋友现在正在做的事情 :) 非常感谢！

【解决方案2】：

要轻松使用范围和选择，请使用rangy (rangyinputs)。

【讨论】：

我们考虑过 rangy，但这是额外的开销，也许还有其他一些解决方案，因为只剩下将光标留在原处的问题......