contentEditable div 替换 url 链接答案

【问题标题】：contentEditable div replace url linkscontentEditable div 替换 url 链接
【发布时间】：2014-02-04 07:17:57
【问题描述】：

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

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

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>");

    }
}

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

【问题讨论】：

考虑到代码有多短，除了小提琴之外，请在此处发布，以便在回答此问题时，它不依赖于外部链接。另外，您使用的是什么版本的不同浏览器，它们有何不同？
@zero298，例如，当我粘贴 url 时，IE v11 会删除在替换文本之后键入的任何字符。所有浏览器（Opera、Chrome、Firefox、IE v8-11、Safari）继续以蓝色显示替换文本之后键入的文本。
仅供参考 - 你的正则表达式可能会简化为 /https?:\/\/([-\w.]+)?[-\w.]+\.\w{1,4}\/?([-\w&@+.~#?\/=]+)?/ 假设你的意思不是 &-@ 作为最后一类中的范围，并且那些 Unicode 嵌入字符不是真实的。
@sln，你说嵌入 Unicode 的字符不是真实的是什么意思？
stackoverflow.com/questions/14636218/… 作为起点可能会有所帮助。这是一个使用 span 而不是 <a> 元素的更新示例。 jsfiddle.net/8hYSc/12

标签： javascript regex html contenteditable

【解决方案1】：

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

http://jsbin.com/EZizIge/1/

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");
  }
}

使用 css：

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

【讨论】：

我之前试过了，缺少的一点是url显示为蓝色后，输入的文字显示为蓝色。不过谢谢你的回复。