2

I have a contentEditable DIV where I would like to replace any user typed URL (by matching the string with regular expression) with blue color text wrapped inside a span tag.

However, different browsers return different results. Besides, replacing the matched text with span puts cursor at the beginning of the text. Here is the link: 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>");

    }
}

How can I set the cursor at the end of the replaced text and continue typing with the default color (black)?

user1190478
  • 119
  • 1
  • 11
  • Considering how short the code is, please post it here in addition to the fiddle so that when this question is answered, it does not depend on an external link. Also, what version of the different browsers are you using and what are they doing differently? – zero298 Jan 15 '14 at 17:23
  • @zero298, for example, when I paste the url, IE v11 removes any character typed after the replaced text. All browsers (Opera, Chrome, Firefox, IE v8-11, Safari) continue displaying the text typed after the replaced text in blue color. – user1190478 Jan 15 '14 at 17:34
  • Just a FYI - Your regex probably reduces to `/https?:\/\/([-\w.]+)?[-\w.]+\.\w{1,4}\/?([-\w&@+.~#?\/=]+)?/` assuming you did not mean `&-@` as a range in the last class, and those Unicode embeded characters aren't real. –  Jan 15 '14 at 18:24
  • @sln, what do you mean by saying that the Unicode embeded characters aren't real? – user1190478 Jan 15 '14 at 18:31
  • http://stackoverflow.com/questions/14636218/jquery-convert-text-url-to-link-as-typing/14637351#14637351 may help as a starting point. Here's an updated example to use spans rather than `` elements. http://jsfiddle.net/8hYSc/12/ – Tim Down Jan 16 '14 at 15:46
  • hay @user1190478 did you find any answer can you please help me with this question http://stackoverflow.com/questions/24301080/autolink-url-in-contenteditable-iframe – dhee Jun 19 '14 at 07:37

1 Answers1

0

Not a direct answer but a suggestion of another way of achieving the same user experience in a simpler way:

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

With css: 

.link{
  text-decoration: underline;
  color: blue;
}
ed.
  • 2,696
  • 3
  • 22
  • 25
  • I have tried it before, one thing it lacks is that after displaying the url in blue color, the text typed after it is displayed in blue. But thanks for the reply. – user1190478 Jan 15 '14 at 17:49