Javascript contentEditable div替换url链接

我有一个contentEditable DIV，我想在其中用蓝色文本替换任何用户键入的URL（通过将字符串与正则表达式匹配），蓝色文本包装在一个span标记中

但是，不同的浏览器返回不同的结果。此外，用span替换匹配的文本会将光标放在文本的开头。 以下是链接：

CSS

.class{
    position:relative;
    outline:none;
    border:5px solid #96C;
    font-size:16px; 
    width:500px;
    height:60px;
    padding:0px 2px;
    word-wrap:break-word;  
}

HTML

<div class='class' id='div' contentEditable='true'></div>

JavaScript

var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}(\/{1})?([a-zA-Z0-9&-@_\+.‌​~#?\/=]*)?/gi;

var div = document.getElementById('div');

div.onkeyup = function () {
    if (div.innerHTML.match(regExUrl)) {
        st = div.innerHTML.match(regExUrl);
        div.innerHTML = div.innerHTML.replace(regExUrl, "<span style='color:blue;text-decoration:underline'>" + st[0] + "</span>");

    }
}

var regExUrl=/https？：\/\/（[\w\d-\.]+）？[\w\d-\.]+\.{1}[\w]{1,4}（\/{1}）（[a-zA-Z0-9&-@\+。‌​~#?\/=]*)?/胃肠道；
var div=document.getElementById（'div'）；
div.onkeyup=函数（）{
if（div.innerHTML.match（regExUrl））{
st=div.innerHTML.match（regExUrl）；
div.innerHTML=div.innerHTML.replace（regExUrl，“+st[0]+”）；
}
}

---

如何将光标设置在替换文本的末尾，并继续使用默认颜色（黑色）键入？

这不是直接的回答，而是以更简单的方式实现相同用户体验的另一种方法的建议：

使用css：

---

考虑到代码有多短，请把它贴在这里，除了提琴之外，这样回答这个问题时，它就不依赖于外部链接。另外，你使用的不同浏览器的版本以及它们的不同之处是什么？@zero298，例如，当我粘贴url时，IE v11会删除在重新链接之后键入的任何字符放置文本。所有浏览器（Opera、Chrome、Firefox、IE v8-11、Safari）继续以蓝色显示替换文本后键入的文本。仅供参考-您的正则表达式可能会减少为

/https:\/\/（[-\w.]+）？[-\w.]+.\w{1,4}\/（[-\w&+.~\35;？\/=]）？/

假设您在上一个类中不是指

&-@

作为一个范围，并且那些Unicode嵌入字符不是真实的。@sln，您说Unicode嵌入字符不是真实的是什么意思？这可能有助于作为一个起点。这里有一个更新的示例使用span而不是

我以前尝试过，它缺少的一点是在以蓝色显示url后，键入的文本将以蓝色显示。但感谢您的回复。
var regExUrl = /https?:\/\/([\w\d-\.]+)?[\w\d-\.]+\.{1}[\w]{1,4}((\/{1})?)([a-zA-Z0-9&-@_\+.‌​~#?\/=]*)?/gi;

var div = document.getElementById('div');

div.onkeyup = function(){
  if(div.innerHTML.match(regExUrl)){
   $("div").addClass("link");
  } else {
   $("div").removeClass("link");
  }
}

.link{
  text-decoration: underline;
  color: blue;
}