contentEditable div替换url链接

时间:2014-01-15 17:12:01

标签: javascript regex html contenteditable

我有一个contentEditable DIV,我希望将任何用户输入的URL(通过将字符串与正则表达式匹配)替换为包含在span标记内的蓝色文本。

但是,不同的浏览器会返回不同的结果。此外,用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>");

    }
}

如何将光标设置在替换文本的末尾并继续使用默认颜色(黑色)键入?

1 个答案:

答案 0 :(得分:0)

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

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